📈 Charting libraries for React
Note: Sorted by number of downloads. For lower level things use visx or D3.
Also keep an eye on vega + react-vega.
Click on the badge to try them.
Recharts


<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


Wrapper for Chart.js
<Line data={data} options={options} />
Nivo


<ResponsiveLine data={data} curve="natural" useMesh={true} />
Victory
<VictoryChart>
<VictoryAxis />
<VictoryAxis dependentAxis />
<VictoryLine data={data} interpolation="natural" y="votes" />
</VictoryChart>
react-vis
<XYPlot height={300} width={400}>
<HorizontalGridLines />
<XAxis title="X" />
<YAxis />
<LineMarkSeries data={data} curve="curveMonotoneX" />
</XYPlot>
echarts-for-react

Wrapper for echarts.
<ReactEcharts
option={{
xAxis: {
type: "category",
data: months,
},
yAxis: {
type: "value",
},
series: [
{
data: data,
type: "line",
},
],
}}
/>
react-plotly.js

Wrapper for plotly
<Plot
data={[
{
x: [1, 2, 3],
y: [2, 6, 3],
type: "scatter",
mode: "lines+markers",
marker: { color: "red" },
},
{ type: "bar", x: [1, 2, 3], y: [2, 5, 3] },
]}
layout={{ width: 320, height: 240, title: "A Fancy Plot" }}
/>
BizCharts


<Chart data={data}>
<Line position="x*votes" shape="smooth" />
<Point position="x*votes" />
<Tooltip showCrosshairs lock />
</Chart>
Most of the documentation is in Chinese.
Comments