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 a single winner — it really depends on the job. For a typical React dashboard I default to Recharts; it fits the React mental model well and you can get a working chart fast. If you need a bigger chart catalog or nicer visual defaults out of the box, Nivo is worth a look. And if what you're actually building involves nodes and edges — a network, a dependency graph — you want a completely different category of tool, like Cytoscape.js or vis.js. Chart libraries won't help you there.
Is Chart.js a React JS graph library?
Not exactly. Chart.js is a vanilla JavaScript charting library that works against a canvas element. In React you typically use it through the react-chartjs-2 wrapper, which manages the canvas lifecycle so you're not manually calling destroy() in useEffect. It works well, especially when you need canvas performance, but it doesn't feel like a native React library the way Recharts or Nivo do.
What's the difference between a React chart library and a graph library?
The word 'graph' is doing too much work. When most people say 'React graph library' they mean they want a line chart or a bar chart on a dashboard. In CS, a graph is specifically nodes and edges — a data structure for relationships. Those are genuinely different problems with different libraries. Chart libraries (Recharts, Nivo) won't draw a force-directed network. Network libraries (Cytoscape.js, vis.js) won't give you a revenue trend line. Worth figuring out which one you actually need before you start.
