Charting libraries for React

less than 1 minute read

img

Note: Sorted by number of downloads. For lower level things use visx or D3.

Recharts

Downloads GitHub stars GitHub last commit Example

<LineChart width={500} height={300} data={data}>
  <XAxis dataKey="name" />
  <YAxis />
  <CartesianGrid stroke="#eee" strokeDasharray="5 5" />
  <Line type="monotone" dataKey="uv" stroke="#8884d8" />
  <Line type="monotone" dataKey="pv" stroke="#82ca9d" />
</LineChart>

react-chartjs-2

Downloads GitHub stars GitHub last commit Example

<Line data={data} options={options} />

Nivo

Downloads GitHub stars GitHub last commit Example

<ResponsiveLine data={data} curve="natural" useMesh={true} />

Victory

Downloads GitHub stars GitHub last commit Example

<VictoryChart>
  <VictoryAxis />
  <VictoryAxis dependentAxis />
  <VictoryLine data={data} interpolation="natural" y="votes" />
</VictoryChart>

react-vis

Downloads GitHub stars GitHub last commit Example

<XYPlot height={300} width={400}>
  <HorizontalGridLines />
  <XAxis title="X" />
  <YAxis />
  <LineMarkSeries data={data} curve="curveMonotoneX" />
</XYPlot>

BizCharts

Downloads GitHub stars GitHub last commit Example

<Chart data={data}>
  <Line position="x*votes" shape="smooth" />
  <Point position="x*votes" />
  <Tooltip showCrosshairs lock />
</Chart>

Comments