{"id":11908,"library":"react-vis","title":"React-vis Data Visualization Library","description":"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.","status":"deprecated","version":"1.12.1","language":"javascript","source_language":"en","source_url":"https://github.com/uber-common/react-vis","tags":["javascript","d3","react","visualization","chart","es6","babel"],"install":[{"cmd":"npm install react-vis","lang":"bash","label":"npm"},{"cmd":"yarn add react-vis","lang":"bash","label":"yarn"},{"cmd":"pnpm add react-vis","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Peer dependency required for rendering React components.","package":"react","optional":false},{"reason":"Peer dependency required for rendering React components to the DOM.","package":"react-dom","optional":false}],"imports":[{"note":"Primary container for all orthogonal chart types. Named import is standard for ESM.","wrong":"const XYPlot = require('react-vis').XYPlot;","symbol":"XYPlot","correct":"import { XYPlot } from 'react-vis';"},{"note":"One of many specific chart series components. Directly importing from 'react-vis' is the intended way to get series components.","wrong":"import LineSeries from 'react-vis/dist/series/line';","symbol":"LineSeries","correct":"import { LineSeries } from 'react-vis';"},{"note":"Represents horizontal grid lines; specific components exist for different grid orientations.","wrong":"import { GridLines } from 'react-vis';","symbol":"HorizontalGridLines","correct":"import { HorizontalGridLines } from 'react-vis';"},{"note":"The main CSS file must be imported for correct styling. Paths must include 'dist'.","wrong":"import 'react-vis/style.css';","symbol":"style.css","correct":"import 'react-vis/dist/style.css';"}],"quickstart":{"code":"import React from 'react';\nimport ReactDOM from 'react-dom';\nimport { XYPlot, XAxis, YAxis, HorizontalGridLines, LineSeries } from 'react-vis';\nimport 'react-vis/dist/style.css';\n\nconst MyChart = () => (\n  <XYPlot width={300} height={300}>\n    <HorizontalGridLines />\n    <LineSeries\n      data={[\n        {x: 1, y: 10},\n        {x: 2, y: 5},\n        {x: 3, y: 15}\n      ]}\n      style={{strokeWidth: 2}}\n    />\n    <XAxis title=\"X-Axis Title\" />\n    <YAxis title=\"Y-Axis Title\" />\n  </XYPlot>\n);\n\nReactDOM.render(<MyChart />, document.getElementById('root'));","lang":"typescript","description":"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."},"warnings":[{"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.","message":"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.","severity":"deprecated","affected_versions":">=1.11.0"},{"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';`","message":"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.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Upgrade to react-vis v1.11.7 or newer. If issues persist, verify Webpack configuration and dependency resolution.","message":"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.","severity":"gotcha","affected_versions":"<1.11.7"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"fix":"The correct import path includes the `dist` directory: `import 'react-vis/dist/style.css';`","cause":"Incorrect import path for the main CSS file.","error":"Module not found: Error: Can't resolve 'react-vis/style.css'"},{"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.","cause":"Data passed to a series component (e.g., LineSeries, BarSeries) has an incorrect format or missing 'x' or 'y' properties.","error":"TypeError: Cannot read properties of undefined (reading 'x')"},{"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.","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.","error":"React Hook \"useState\" cannot be called inside a class component."}],"ecosystem":"npm"}