React Vis - Uber's Visualization Library

Why React Vis?

React Vis was built by Uber to address the need for common charts that behave like standard React components. It abstracts away the imperative nature of D3.

Declarative Composition: Charts are built by composing children like <XAxis />, <YAxis />, and <LineSeries /> inside a parent <XYPlot />.
Broad Chart Support: Beyond standard line/bar charts, it includes complex visualizations like Treemaps, Sunbursts, Sankeys, and Radar charts.
Sensible Defaults: It comes with a predefined set of beautiful palettes and spacing, making it easy to spin up decent-looking charts quickly.
Interaction Helpers: Provides components like <Voronoi /> and <Crosshair /> to easily add hover states and tooltips without complex math.
Animation Support: Offers a simple animation prop to smoothly transition data updates using React Motion (though this adds dependency weight).

Code Snippet

React Vis uses a highly composable API where every element of the chart is a separate component.

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

const data = [
  {x: 1, y: 10},
  {x: 2, y: 5},
  {x: 3, y: 15}
];

export default function SimpleChart() {
  return (
    <XYPlot width={300} height={300}>
      <HorizontalGridLines />
      <LineSeries
        data={data}
        style={{ stroke: 'violet', strokeWidth: 3 }}
      />
      <MarkSeries
        data={data}
        color="purple"
      />
      <XAxis title="X Axis" />
      <YAxis />
    </XYPlot>
  );
}

This snippet creates a chart with both a line and scatter plot (marks) overlaying each other, demonstrating the composable nature of the library.

Pros and Cons

While React Vis was once a top contender, its maintenance status significantly impacts its viability for new projects.

Pros

Low Learning Curve: The API is very intuitive for React developers; if you know how to compose components, you can build a chart.
Visual Variety: Excellent support for non-standard charts (Sankey, Sunburst) that other libraries often neglect.
Design System Agnostic: Styling is largely handled via props or minimal CSS, making it easy to integrate into existing UI systems.

Cons

Maintenance Status: The library is effectively in maintenance mode with infrequent updates, accumulating issues with newer React versions.
Responsiveness: Charts are not responsive by default; you must use the FlexibleXYPlot wrapper, which relies on ResizeObserver and can be finicky.
Bundle Size: It brings in significant dependencies (including D3 and React Motion), which can be heavy if you only need a simple line chart.

Comparison with Other Charts Libraries

The table below outlines how React Vis compares to modern alternatives:

Library	Design Philosophy	Best For	Pain Points
React Vis	Composable Components Builds charts like Lego blocks.	Legacy Projects Maintaining existing Uber-stack apps or needing specific niche charts (Sunburst).	Maintenance Lack of updates makes it risky for new production apps.
Recharts	Composable Components Very similar API to React Vis but actively maintained.	General Purpose The standard replacement for React Vis users.	Performance Can struggle with large datasets (thousands of points).
Nivo	Configuration Object Pass one giant props object to render a chart.	Design Heavy Beautiful, highly customizable visuals out of the box.	Prop Fatigue Finding the right prop in the massive documentation can be hard.

Verdict: When to Adopt

Avoid for new projects. While React Vis has a clean API and served the community well for years, its lack of active development poses a risk for long-term maintenance.

Use Recharts if you prefer the composable component API (<Chart><Line /></Chart>).
Use Nivo if you prefer a comprehensive configuration API and superior aesthetics.
Use Visx if you need low-level control and high performance.

TL;DR