🐯 visx | visualization components
Alternatives To Visx
Project NameStarsDownloadsRepos Using ThisPackages Using ThisMost Recent CommitTotal ReleasesLatest ReleaseOpen IssuesLicenseLanguage
9 days ago35gpl-3.0TypeScript
✨ Seamlessly visualize your JSON data instantly into graphs.
Visx17,21120265a month ago47September 09, 2020127mitTypeScript
🐯 visx | visualization components
Victory10,32068619915 days ago233September 14, 2022263otherJavaScript
A collection of composable React components for building interactive data visualizations
React Vis8,5015241282 days ago99April 19, 2019338mitJavaScript
Data Visualization Components
React Diagrams7,7837225 days ago32June 03, 2022300mitTypeScript
a super simple, no-nonsense diagramming library written in react that just works
Bizcharts6,0156166023 months ago233August 04, 2022333mitTypeScript
Powerful data visualization library based on G2 and React.
React Chartjs 25,9293,3624812 days ago80July 13, 202266mitTypeScript
React components for Chart.js, the most popular charting library
React Konva5,0983781594 days ago119September 23, 20222mitTypeScript
React + Canvas = Love. JavaScript library for drawing complex canvas graphics using React.
Pts4,9656221 days ago68September 25, 202245apache-2.0TypeScript
A library for visualization and creative-coding
Under The Hood Reactjs4,768
2 years ago5mitJavaScript
Entire React code base explanation by visual block schemes (Stack version)
Alternatives To Visx
Select To Compare

Alternative Project Comparisons

Coverage Status


visx is a collection of reusable low-level visualization components. visx combines the power of d3 to generate your visualization with the benefits of react for updating the DOM.

Docs Gallery Blog Slack #visx Changelog Getting started tutorial


Remix on Glitch

Let's make a simple bar graph.

First we'll install the relevant packages:

npm install --save @visx/mock-data @visx/group @visx/shape @visx/scale
import React from 'react';
import { letterFrequency } from '@visx/mock-data';
import { Group } from '@visx/group';
import { Bar } from '@visx/shape';
import { scaleLinear, scaleBand } from '@visx/scale';

// We'll use some mock data from `@visx/mock-data` for this.
const data = letterFrequency;

// Define the graph dimensions and margins
const width = 500;
const height = 500;
const margin = { top: 20, bottom: 20, left: 20, right: 20 };

// Then we'll create some bounds
const xMax = width - margin.left - margin.right;
const yMax = height - - margin.bottom;

// We'll make some helpers to get at the data we want
const x = d => d.letter;
const y = d => +d.frequency * 100;

// And then scale the graph by our data
const xScale = scaleBand({
  range: [0, xMax],
  round: true,
  padding: 0.4,
const yScale = scaleLinear({
  range: [yMax, 0],
  round: true,
  domain: [0, Math.max(],

// Compose together the scale and accessor functions to get point functions
const compose = (scale, accessor) => data => scale(accessor(data));
const xPoint = compose(xScale, x);
const yPoint = compose(yScale, y);

// Finally we'll embed it all in an SVG
function BarGraph(props) {
  return (
    <svg width={width} height={height}>
      {, i) => {
        const barHeight = yMax - yPoint(d);
        return (
          <Group key={`bar-${i}`}>
              y={yMax - barHeight}

// ... somewhere else, render it ...
// <BarGraph />

For more examples using visx, check out the gallery.



The goal is to create a library of components you can use to make both your own reusable chart library or your slick custom one-off chart. visx is largely unopinionated and is meant to be built upon. Keep your bundle sizes down and use only the packages you need.


Under the hood, visx is using d3 for the calculations and math. If you're creating your own awesome chart library on top of visx, it's easy to create a component api that hides d3 entirely. Meaning your team could create charts as easily as using reusable react components.

But why?

Mixing two mental models for updating the DOM is never a good time. Copy and pasting d3 code into componentDidMount() is just that. This collection of components lets you easily build your own reusable visualization charts or library without having to learn d3. No more selections or enter()/exit()/update().

In the wild

Have a project that's using visx? Open a pull request and we'll add it to the list.


  1. What does visx stand for?

    visx stands for visualization components.

  2. Do you plan on supporting animation/transitions?

    A common criticism of visx is it doesn't have animation baked in, but this was a conscious choice. It's a powerful feature to not bake it in.

    Imagine your app already bundles react-motion, adding a hypothetical @visx/animation is bloat. Since visx is react, it already supports all react animation libs.

    Charting libraries are like style guides. Each org or app will eventually want full control over their own implementation.

    visx makes this easier for everyone. No need to reinvent the wheel each time.

    more info:


  3. Do I have to use every package to make a chart?

    nope! pick and choose the packages you need.

  4. Can I use this to create my own library of charts for my team?

    Please do.

  5. Does visx work with preact?

    yup! need to alias react + react-dom and use preact-compat.

  6. I like using d3.

    Me too.


Please see



FOSSA Status

Popular Visualization Projects
Popular Reactjs Projects
Popular User Interface Categories
Related Searches

Get A Weekly Email With Trending Projects For These Categories
No Spam. Unsubscribe easily at any time.
Data Visualization