Need help with react-vis?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

8.0K Stars 826 Forks MIT License 876 Commits 333 Opened issues


Data Visualization Components

Services available


Need anything else?

Contributors list

version build build downloads

react-vis | Demos | Docs




A collection of react components to render common data visualization charts, such as line/area/bar charts, heat maps, scatterplots, contour plots, hexagon heatmaps, pie and donut charts, sunbursts, radar charts, parallel coordinates, and tree maps.

Some notable features:

  • Simplicity.
    doesn't require any deep knowledge of data visualization libraries to start building your first visualizations.
  • Flexibility.
    provides a set of basic building blocks for different charts. For instance, separate X and Y axis components. This provides a high level of control of chart layout for applications that need it.
  • Ease of use. The library provides a set of defaults which can be overridden by the custom user's settings.
  • Integration with React.
    supports the React's lifecycle and doesn't create unnecessary nodes.


Install react-vis via npm.

npm install react-vis --save

Include the built main CSS file in your HTML page or via SASS:

@import "~react-vis/dist/style";

You can also select only the styles you want to use. This helps minimize the size of the outputted CSS. Here's an example of importing only the legends styles:

@import "~react-vis/dist/styles/legends";

Import the necessary components from the library...

import {XYPlot, XAxis, YAxis, HorizontalGridLines, LineSeries} from 'react-vis';

… and add the following code to your


If you're working in a non-node environment, you can also directly include the bundle and compiled style using basic html tags.

The global

object will now be available for you to play around.

You can checkout these example CodePens: #1, #2, #3 or #4

More information

Take a look at the folder with examples or check out some docs:


To develop on this component, install the dependencies and then build and watch the static files:

npm install && npm run start

Once complete, you can view the component's example in your browser (will open automatically). Any changes you make to the example code will run the compiler to build the files again.

To lint your code, run the tests, and create code coverage reports:

npm run full-test


react-vis makes use of ES6 array methods such as

. If you make use of react-vis, in an environment without these methods, you'll see errors like

TypeError: Server rendering error: Object x,y,radius,angle,color,fill,stroke,opacity,size has no method 'find'
. You can use
to polyfill these methods.

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.