How to use nivo charts with Next.js

In this tutorial, we will show how to use nivo with Next.js to draw charts like pie charts and line charts, also how to fix the frequent problem of no rendering in the page, and finally use SSR in nivo with Next.js.

What is nivo

nivo provides a rich set of components to visualize charts in browsers. The product is based on D3.js library and React which helps reuse components.

Configure nivo with Next.js

To configure nivo charts in Next.js:

1. Create your Next.js app using:

npx create-next-app myapp

cd myApp

2. Install nivo and other nivo charts to use, for example we are using line, pie and cors charts.

npm i @nivo/core @nivo/pie @nivo/line

Update:

Please note that due to some updates on nivo, npm i nivo is not working anymore, you need to install each chart separately.

## Charts with nivo in Next.js

Pie chart

To draw a pie chart with nivo in a Next.js project, you need to:

• Create file components/pie.js and copy the following:

import {ResponsivePie} from '@nivo/pie';

export const data = [
	{
		id: 'c',
		label: 'c',
		value: 80,
		color: 'hsl(8, 70%, 50%)'
	},
	{
		id: 'lisp',
		label: 'lisp',
		value: 188,
		color: 'hsl(122, 70%, 50%)'
	},

	{
		id: 'go',
		label: 'go',
		value: 161,
		color: 'hsl(111, 70%, 50%)'
	}
];
const MyResponsivePie = ({data}) => (
	<ResponsivePie
		data={data}
		margin={{top: 40, right: 80, bottom: 80, left: 80}}
		innerRadius={0.5}
		padAngle={0.7}
		cornerRadius={3}
		activeOuterRadiusOffset={8}
		borderWidth={1}
		borderColor={{from: 'color', modifiers: [['darker', 0.2]]}}
		arcLinkLabelsSkipAngle={10}
		arcLinkLabelsTextColor="#333333"
		arcLinkLabelsThickness={2}
		arcLinkLabelsColor={{from: 'color'}}
		arcLabelsSkipAngle={10}
		arcLabelsTextColor={{from: 'color', modifiers: [['darker', 2]]}}
		defs={[
			{
				id: 'dots',
				type: 'patternDots',
				background: 'inherit',
				color: 'rgba(255, 255, 255, 0.3)',
				size: 4,
				padding: 1,
				stagger: true
			},
			{
				id: 'lines',
				type: 'patternLines',
				background: 'inherit',
				color: 'rgba(255, 255, 255, 0.3)',
				rotation: -45,
				lineWidth: 6,
				spacing: 10
			}
		]}
	/>
);

export default MyResponsivePie;

• Create pages/chart.js and copy inside the below

import {data} from '../components/pie';

import dynamic from 'next/dynamic';

import homeStyles from '../styles/Home.module.css';

const MyResponsivePie = dynamic(() => import('../components/pie'), {
	ssr: false
});

const Chart = () => {
	return (
		<div className={homeStyles.divchart}>
			<MyResponsivePie data={data} />
		</div>
	);
};
export default Chart;

- You need to import dynamically the MyResponsivePie and set the server side renderering _ssr_ to false, otherwise you might run into the error _**ReferenceError: ResizeObserver is not defined**_

• ResizeObserver is only available on client side, so if the page was rendered on the server, it will not work, so for now, keep in mind to disable server side rendering, more details could be found on my link

• Add the following CSS to your HOME.module.css

.divchart {
	height: 100vh;
	margin: 4rem;
}

• Test nivo pie chart on the browser

Now go to your browser and type in:

http://localhost:3000/chart

You should be able to see a picture like this ![pie chart with nivo][4]

Line chart with nivo in Next.js

To draw line chart with nivo:

• Create a file components/line.js and copy the code in the nivo line chart documentation, make sure you copy the data from the data tab as well and put it in the same file.
• Replace MyResponsivePie by MyResponsiveLine in pages/chart.js.
• Test on the browser with the same URL.

## Why nivo components are not rendering

If you happen to encounter the problem of nothing is rendered on the browser, make sure you have applied the CSS to your nivo components. nivo requires to have a defined height in order for their components to render.

Here is the necessary CSS to apply if nivo components are not rendering:

Using CSS

Apply this CSS to your nivo component:

.myComponent {
	height: 100vh;
	margin: 4rem;
}

Using tailwindcss

Apply the CSS with tailwindcss

<div className="h-screen m-4">
	<MyResponsivePie data={data} />
</div>

If you still have trouble you can clone my project in GitHub and use it. It is already configured and has everything in place.

git clone https://github.com/abengit/nivonextjs.git

Use nivo with server side rendering (SSR)

nivo is fully compliant with server side rendering (SSR).

To use it with SSR only SVG or HTML implementations are available, you can either

• Build your own API and render it in the server using getServerSideProps in Next.js for example
• Use nivo own API which is built under Heroku free hosting, so expect some delays when interacting with the API.

If you are more interested in charts, you can check also my tutorial about the famous library react-chartjs-2 and how to use it in this link

Conclusion

We have seen how to build line and pie charts with nivo, and how to troubleshoot in case there is no rendering on the browser. nivo is a good choice for using charts without bothering a lot about understanding the DOM and D3.js which requires more work to do.