react-vis

library1.12.1jsnpmunverified

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.

web-framework data

npm install react-vis

github ↗package ↗

INSTALL

IMPORT

SIG · REACT-VIS

react-vis

web-frameworkjavascriptv1.12.1

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–226 runs

build_error

glibc

node 18–226 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

XYPlot

✓ import { XYPlot } from 'react-vis';

✗ const XYPlot = require('react-vis').XYPlot;

Primary container for all orthogonal chart types. Named import is standard for ESM.

LineSeries

✓ import { LineSeries } from 'react-vis';

✗ import LineSeries from 'react-vis/dist/series/line';

One of many specific chart series components. Directly importing from 'react-vis' is the intended way to get series components.

HorizontalGridLines

✓ import { HorizontalGridLines } from 'react-vis';

✗ import { GridLines } from 'react-vis';

Represents horizontal grid lines; specific components exist for different grid orientations.

style.css

✓ import 'react-vis/dist/style.css';

✗ import 'react-vis/style.css';

The main CSS file must be imported for correct styling. Paths must include 'dist'.

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'));

Debug

Known issues

deprecatedThe 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.

affects: >=1.11.0

gotchaCSS 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';`

affects: >=1.0.0

gotchaOlder 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.

affects: <1.11.7

Errors

Common errors & fixes

Module not found: Error: Can't resolve 'react-vis/style.css'

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')

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.

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.

Upgrade

Version history

1.12.1latest on npm

Audit

Dependencies

reactrequiredPeer dependency required for rendering React components.

react-domrequiredPeer dependency required for rendering React components to the DOM.

Agent activity

7 hits · last 30 days

node

OpenAI (training)

Resources

githubhttps://github.com/uber-common/react-vis ↗

packagehttps://www.npmjs.com/package/react-vis ↗