Charting

Charting

A chart library turns numbers into coordinates and coordinates into marks. Recharts 126 does both with React 7,897 components: declare <XAxis>, <CartesianGrid> and <Line> inside a chart and it renders SVG you can style.

A two-series line chart with a tooltip and legendJavaScript

import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, Legend,
  ResponsiveContainer } from 'recharts';
const data = [{ month: 'Jan', orders: 120, returns: 9 },
  { month: 'Feb', orders: 145, returns: 12 }, { month: 'Mar', orders: 131, returns: 7 },
  { month: 'Apr', orders: 188, returns: 14 }];
// the body of an OrdersChart component:
<ResponsiveContainer width="100%" height={280}>
  <LineChart data={data} margin={{ top: 8, right: 16, left: 0, bottom: 4 }}>
    <CartesianGrid stroke="#eceff1" /><XAxis dataKey="month" /><YAxis /><Tooltip /><Legend />
    <Line type="monotone" dataKey="orders" stroke="#1565c0" strokeWidth={2} />
    <Line type="monotone" dataKey="returns" stroke="#ef6c00" strokeWidth={2} />
  </LineChart>
</ResponsiveContainer>

dataKey is the whole data binding: each axis and series names a property of the row objects, so reshaping the API response into flat objects is most of the work. <ResponsiveContainer> watches its parent with a ResizeObserver, which is why the chart takes no width of its own.

React charting libraries, all MIT, npm 2,036 figures from 17 September 2026
Library	Version	Renders	Weekly downloads
Recharts	3.10.1	SVG, React components	40.5 M
Chart.js 38,651 with react-chartjs-2	4.5.1 / 5.3.1	Canvas, config object	9.2 M
Nivo	0.99.0	SVG and canvas, pre-1.0	1.2 M
Victory	37.3.6	SVG, also React Native 36,878	0.3 M

Pick on rendering mode before features. SVG gives one DOM node per point — easy to style, slow past a few thousand marks. Canvas draws pixels: Chart.js handles tens of thousands of points and gives you nothing to select.

MENU