If you’re looking for an alternative to building your own custom charts using D3, there are a lot of great React charting libraries out there (like Victory by Formidable Labs, Recharts, and React Vis by Uber, to name a few).
I personally like Nivo because it has an interactive documentation site. You can adjust the chart properties using toggles in the UI to quickly visualize and iterate on your design.
There are also lots of examples (or “recipes”) and an active community on Discourse. The charts are responsive and some have an API, which can be useful if you want to render your charts server-side. Not to mention, the Nivo library is free, open source, and actively maintained.
Here’s a live example of a chart I built using Nivo that shows how many hours I coded during and outside of my normal work hours during a week in December.
If you’re interested in using Nivo for your own project, here’s a brief overview of how I built this chart.
First, I chose to build my project on StackBlitz. I like to use StackBlitz to quickly prototype my data visualizations and see what they look like with actual data. I also like CodePen, CodeSandbox, and JSFiddle, but my favorite thing about StackBlitz is that it’s powered by Visual Studio Code, which is my code editor of choice.
Next, I imported my dependencies. For this chart, I imported @nivo/bar and Material, since I also used a few Material UI components.
My data came from my Software.com plugin for VS Code (I’m on the team at Software - check us out!). I stored it as a constant in its own file (item.js) and imported it into my main file (workLifeBalance.js).
Since my data isn’t in the exact format that is required for the Nivo bar chart, I did some light array manipulation to map my data to the Nivo structure (see data.json for that structure), which is also clearly documented on the Nivo site.
The last step was to pass my data as a property into the custom bar chart component (BarChart.js) I created using Nivo. If you want to reuse your Nivo charts but with different stylistic elements, you can also make those properties customizable. For instance, I made another chart that uses “grouped” instead of “stacked” bars, so I made that a variable.
You can add some fit and finish by customizing the Nivo theme. If you’re looking to customize the theme more than I did, see this file in the Nivo GitHub repository.
That’s it! If you’re interested in building your own Nivo chart, you can fork this chart and plug in your data. And if you want to see what your work-life balance and the rest of your coding data looks like, check out Software.com!
What are your favorite chart libraries for React?
Top comments (8)
Great post! I've always tried to avoid D3 because of how complex and overdone is it. Besides that the only thing I've heard about is chart.js, but I'll admit that being enable to integrate this visualizations with React is quite new and interesting stuff! I'll definitely be looking into this more and hack away for using it in actual projects.
I think D3 is not so easy for sure but if you learn to use it, you can build something amazing and you can really understand how the others dataviz libraries works under the hood. So my tip is to give a chance to it and then you can move to something easier to use 😄
Thanks, Juan. Let me know if you stumble upon any other good libraries!
Thanks for the post and the info on Nivo. I've been working on a project recently that required data viz. We settled on Chart.js wrapped inside a React component in the end as we had specific use cases that made hacking against the libs counter-productive. But without that Nivo would have fit the bill nicely, definitely one to bookmark for the future. So thanks again for the info.
P.S React lib for Chart.js
Great point Cy. So important to nail down your specific use cases before investing too much time and energy in a new library...
I'd love to find a react viz library with out of the box support for network charts like this:
where nodes can have 0 to many links and they all display nice and neat linked together
I'm going to keep using D3 for ugly looking handmade charts until someone with better UX comes along and makes a library for it ^^;
Kayla - you might find this library interesting: software.es.net/react-network-diag...
Oh man, that is exactly what I needed in my life!
One comment and D3 is already dead to me :)