React JS Graph Library: What I'd Use
Search for a React JS graph library and you'll get chart tools mixed with network diagrams. Here's how I actually choose.
Type react js graph library into a search box and the results don't agree with each other. Half are chart tools. A few draw node-link diagrams. One is Chart.js, which isn't a React library until you wrap it.
I used to treat that as one shopping list. Then I burned two days on visx for a screen that needed a line, a bar, and a pie. visx is a good library. It was the wrong one for that job.
This is how I pick now: what the words actually mean, a default I'd ship, and the cases where I reach for something else.
Chart vs graph
People say "graph library" when they mean a line chart. They also say it when they mean a network: accounts as nodes, follows as edges. Those are not the same problem, and the libraries are not interchangeable.
- Charts — time series, categories, parts of a whole. Recharts, Nivo, Victory, Chart.js.
- Network graphs — nodes and links. Cytoscape.js, vis.js, Sigma.js.
If the mock looks like a dashboard, you want a charting library. If it looks like a map of relationships, you want a network library. Mixing them up is how you spend a week fighting the API.
The short version
If you want one React JS graph library and you don't want a debate: Recharts. It's the one I reach for in a normal React app. You nest components the same way you nest divs. There's a LineChart, you drop a Line in it, you're looking at a chart.
That's the default, not a religion. The table is the honest version.
What I look for in a React JS graph library
Landing pages all say "declarative" and "beautiful." A few things actually show up in the first week of using one:
- Does it speak React? Recharts and Nivo are components. Chart.js wants a canvas you keep alive in a ref. Both can work. Only one feels like React.
- SVG or canvas? SVG is easier to theme and inspect. Canvas holds up when you throw thousands of points at it.
- Who still ships updates? An abandoned chart library is a tax. You find out when React 20 lands.
- Can I theme it? If every color is a fight, the "pretty demo" was a lie.
- License. Highcharts is excellent and not free for most commercial apps. Read that before you prototype on it.
Recharts
Recharts is a charting library built as React components. No giant options object. A chart is a tree: the plot, the series, the tooltip, the legend. If you've written React at all, that model clicks.
I use it for product dashboards: traffic over time, revenue next to signups, a pie for mix. ResponsiveContainer saves you from hard-coding widths. The usual gotcha is treating category axes like numeric ones, or forgetting that parent nodes in a treemap need their own values.
I wrote up the charts I actually copy — Recharts examples with live previews — if you want LineChart through Treemap without hunting the docs. There's also a Recharts overview on this site.
Install
npm install rechartsNivo
Nivo sits on D3 but you don't have to think about D3. The defaults look like someone already passed through design. Motion is built in. The catalog is wider than Recharts: sankey, calendar, waffle, swarm, that kind of thing.
I reach for it when the chart is part of the UI, not just a widget in a grid. It can render SVG or canvas, and it's friendlier to server render than most of this list. The cost is weight and a props surface that can feel huge on a simple bar chart.
If Recharts looks a bit plain after you theme the rest of the app, Nivo is the next tab I open.
Victory
Victory is the one I consider when the same charts have to live on the web and in React Native. Composition is the whole idea: axes, bars, lines, tooltips as components you assemble.
On web-only work I still default to Recharts. Victory earns its keep when "we'll wrap the web library in a WebView" is the other plan. That's a worse plan.
visx
visx (Airbnb) is D3's math with React's rendering. Low level on purpose. You get scales, shapes, and tooltips, and you build the chart. That's the right trade when the visual doesn't exist as a named chart type.
It is a slow way to draw three bars. I don't start here unless I already know the off-the-shelf components will fight me.
Chart.js
Chart.js isn't a React JS graph library. It's a canvas library with a config object, and in React you typically use react-chartjs-2. I still put it on this list because a lot of teams already know it, and canvas is the right call when SVG starts wheezing.
The wrapper keeps the chart in sync with props so you aren't manually calling destroy() in useEffect. You give up some of that "it's just components" feeling. For dense time series, I'll take the trade.
Install
npm install chart.js react-chartjs-2When you mean an actual graph
If the keyword brought you here because you need nodes and edges, skip the chart libraries. Cytoscape.js is the one I take seriously for interactive networks. vis.js is fine for a quick network. Sigma.js is built for a lot of nodes on WebGL.
None of those replace Recharts. A force layout will not give you a monthly revenue line, and a LineChart will not give you a social graph.
How I actually decide
I ask three questions, in this order:
- Is this a chart or a network?
- Do I need a stock chart this week, or a custom visual?
- Does it have to run on React Native?
Chart, stock, web-only: Recharts. Chart that has to look expensive: Nivo. Custom: visx. Native too: Victory. Lots of points: Chart.js. Network: Cytoscape.js.
I don't start with D3.js unless I'm building a library, not a dashboard. And I don't start with ECharts unless I already know I need that catalog and I'm fine with a heavier, more imperative API inside React. If the chart is four bars and a line, skip the library and draw it. Everything else is on the full list.
Questions I get
What is the best React JS graph library?
There isn't one winner for every app. For a typical React dashboard I start with Recharts. If I want nicer defaults and a bigger chart catalog, I look at Nivo. If the 'graph' is nodes and edges, that's a different tool — Cytoscape.js or vis.js, not a chart library.
Is Chart.js a React JS graph library?
Chart.js is a JavaScript charting library. In React you usually wrap it with react-chartjs-2. It works well, especially on canvas, but it is not a React component library the way Recharts or Nivo are.
What's the difference between a React chart library and a graph library?
People often say graph when they mean a line or bar chart. In computer science a graph is nodes and links. Chart libraries draw dashboards. Network libraries draw relationships. Check the examples before you install anything.
