React-vis Data Visualization Library

1.12.1 · deprecated · verified Sun Apr 19

react-vis is a collection of React components designed for rendering common data visualization charts, including line/area/bar charts, heat maps, scatterplots, and more complex visualizations like sunbursts and treemaps. Its current stable version is 1.12.1. While previously maintained by Uber, the library's README indicates it is now "under new management" and a deprecation shield points to a status as of 2020. This suggests an irregular or stalled release cadence. Key differentiators include its simplicity, requiring minimal data visualization library knowledge to get started, and its flexibility, offering modular components like separate X and Y axis components for fine-grained layout control. It integrates well with React's lifecycle and avoids unnecessary DOM nodes, though its long-term maintenance status is unclear.

Common errors

```
Module not found: Error: Can't resolve 'react-vis/style.css'
```
cause Incorrect import path for the main CSS file.

fix The correct import path includes the `dist` directory: `import 'react-vis/dist/style.css';`
```
TypeError: Cannot read properties of undefined (reading 'x')
```
cause Data passed to a series component (e.g., LineSeries, BarSeries) has an incorrect format or missing 'x' or 'y' properties.

fix Ensure data objects are in the format `{x: value, y: value}` for XYPlot series components. For other chart types, check their specific data requirements in the documentation.
```
React Hook "useState" cannot be called inside a class component.
```
cause While not directly an `react-vis` error, it's a common React development error when mixing class components with modern functional component patterns, which `react-vis` examples might use.

fix Ensure you are using React Hooks only within functional components, or convert your component to a functional component if you intend to use hooks. `react-vis` itself can be used with both class and functional components.

Warnings

deprecated The project is officially marked as deprecated as of 2020, as indicated by a shield in the README. While the repository is now 'under new management', active development and support are likely minimal or non-existent. New projects should consider more actively maintained alternatives.
Fix: For new projects, evaluate actively maintained data visualization libraries like Nivo, Recharts, or TanStack Query. For existing projects, be aware that security updates, bug fixes, or new features are unlikely.
gotcha CSS styling is critical for react-vis components to render correctly. Developers often forget to import the main `style.css` file or specific style modules, leading to unstyled or broken charts.
Fix: Ensure you import the main CSS file: `import 'react-vis/dist/style.css';` or selectively import specific styles: `import 'react-vis/dist/styles/legends.css';`
gotcha Older versions of `react-vis` had issues with Webpack on Windows, specifically related to build processes. While some fixes were applied around v1.11.7, unexpected build errors might still occur in complex setups.
Fix: Upgrade to react-vis v1.11.7 or newer. If issues persist, verify Webpack configuration and dependency resolution.

Install

npm install react-vis npm
yarn add react-vis yarn
pnpm add react-vis pnpm

Imports

XYPlot
wrong:
```
const XYPlot = require('react-vis').XYPlot;
```
correct:
```
import { XYPlot } from 'react-vis';
```
Primary container for all orthogonal chart types. Named import is standard for ESM.
LineSeries
wrong:
```
import LineSeries from 'react-vis/dist/series/line';
```
correct:
```
import { LineSeries } from 'react-vis';
```
One of many specific chart series components. Directly importing from 'react-vis' is the intended way to get series components.
HorizontalGridLines
wrong:
```
import { GridLines } from 'react-vis';
```
correct:
```
import { HorizontalGridLines } from 'react-vis';
```
Represents horizontal grid lines; specific components exist for different grid orientations.
style.css
wrong:
```
import 'react-vis/style.css';
```
correct:
```
import 'react-vis/dist/style.css';
```
The main CSS file must be imported for correct styling. Paths must include 'dist'.

Quickstart

This example demonstrates how to create a basic line chart with react-vis, including X and Y axes and horizontal grid lines within an XYPlot container. It also shows the necessary CSS import.

import React from 'react';
import ReactDOM from 'react-dom';
import { XYPlot, XAxis, YAxis, HorizontalGridLines, LineSeries } from 'react-vis';
import 'react-vis/dist/style.css';

const MyChart = () => (
  <XYPlot width={300} height={300}>
    <HorizontalGridLines />
    <LineSeries
      data={[
        {x: 1, y: 10},
        {x: 2, y: 5},
        {x: 3, y: 15}
      ]}
      style={{strokeWidth: 2}}
    />
    <XAxis title="X-Axis Title" />
    <YAxis title="Y-Axis Title" />
  </XYPlot>
);

ReactDOM.render(<MyChart />, document.getElementById('root'));

view raw JSON →