📈 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.