Nivo — a GREAT alternative to d3 in react

All the power of d3 in react components. Create a chart component in 4 easy steps.

Ok maybe not all the power of d3 but if you have ever tried to integrate d3 into a react project you know it’s not easy. Nivo makes it easy and comes with great documentation that makes creating data visualizations a lot more fun.

Here is a brief description from nivo’s about page.

nivo provides supercharged React components to easily build dataviz apps, it’s built on top of d3.

Several libraries already exist for React d3 integration, but just a few provide server side rendering ability and fully declarative charts.

Now that we know a little more about nivo let’s get to the code.

First we will cover how easy it is to render a nivo chart using create-react-app. Then, we will implement a server side rendered version of the app using nextjs. Lets begin.

1. Run create-react-app <appName>
2. Run yarn add @nivo/bar
3. Create the chart component

4. Add the css and chart config file from the repo.

Done! We have a beautifully rendered chart 😎.

In Part 2 we will look at an example of server side rendered charts using nivo and nextjs.

Thanks for reading!