Easy doughnut and bar charts with react-chartjs-2 in Next.js

In this tutorial, we are going to plot doughnut and bar chart using react-chartjs-2 in Next.js project

What is react-chartjs-2

react-chartjs-2 is a library for React components using Chart.js.

It does support both versions 2 and 3 of chart.js

Plot Bar chart

To start you need to have an existing Next.js project.

If you have not already create it, you can check my article on how to set up a nextjs project, or on nextjs official documentation

Next, Create a bar.js file under pages folder and copy the following content:

pages/bar.js

import {Bar} from 'react-chartjs-2';

import {Chart, CategoryScale, LinearScale, BarElement} from 'chart.js';
import homeStyle from '../styles/Home.module.css';

Chart.register(CategoryScale, LinearScale, BarElement);
const labels = ['1', '2', '3', '4', '5', '6'];
const data = {
	labels: labels,
	datasets: [
		{
			label: 'dataset',

			data: [65, 59, 83, 89, 76, 55, 40],
			backgroundColor: [
				'rgba(255, 99, 132, 0.2)',
				'rgba(255, 159, 64, 0.2)',
				'rgba(255, 205, 86, 0.2)',
				'rgba(75, 192, 192, 0.2)',
				'rgba(54, 162, 235, 0.2)',
				'rgba(153, 102, 255, 0.2)',
				'rgba(201, 203, 207, 0.2)'
			],
			borderColor: [
				'rgb(255, 99, 132)',
				'rgb(255, 159, 64)',
				'rgb(255, 205, 86)',
				'rgb(75, 192, 192)',
				'rgb(54, 162, 235)',
				'rgb(153, 102, 255)',
				'rgb(201, 203, 207)'
			],
			borderWidth: 1
		}
	]
};

export default () => ({
	displayName: 'Bar Sample with Next.js',
	render() {
		return (
			<div className={homeStyle.main}>
				<h2>Bar Sample with Next.js</h2>
				<Bar
					data={data}
					options={{
						maintainAspectRatio: false
					}}
				/>
			</div>
		);
	}
});

under styles folder, create a Home.module.css file to apply styles to the bar

styles/Home.module.css

.main {
	max-height: 80vh;
	margin: 2rem;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

Fix the max-height of the chart using css property max-height, otherwise the bar chart will be growing in height indefinitely

When you hit http://localhost:3000/bar, The bar chart will pop up and look like

Plot Doghnut char

To plot the doughnut, we are going to use the Doughnut component and register the ArcElement

Create doughnut.js file under pages

pages/doughnut.js

import {Doughnut} from 'react-chartjs-2';
import {Chart, ArcElement} from 'chart.js';
import homeStyle from '../styles/Home.module.css';

Chart.register(ArcElement);
const labels = [
	'section 1',
	'section 2',
	'section 3',
	'section 4',
	'section 5',
	'section 6'
];
const data = {
	labels: labels,
	datasets: [
		{
			label: 'Doughnut chart',
			data: [65, 59, 83, 89, 76, 55, 40],
			backgroundColor: [
				'rgba(255, 99, 132, 0.2)',
				'rgba(255, 159, 64, 0.2)',
				'rgba(255, 205, 86, 0.2)',
				'rgba(75, 192, 192, 0.2)',
				'rgba(54, 162, 235, 0.2)',
				'rgba(153, 102, 255, 0.2)',
				'rgba(201, 203, 207, 0.2)'
			],
			borderColor: [
				'rgb(255, 99, 132)',
				'rgb(255, 159, 64)',
				'rgb(255, 205, 86)',
				'rgb(75, 192, 192)',
				'rgb(54, 162, 235)',
				'rgb(153, 102, 255)',
				'rgb(201, 203, 207)'
			],
			borderWidth: 1,
			hoverBorderWidth: 8,
			hoverBorderColor: [
				'rgb(255, 99, 132)',
				'rgb(255, 159, 64)',
				'rgb(255, 205, 86)',
				'rgb(75, 192, 192)',
				'rgb(54, 162, 235)',
				'rgb(153, 102, 255)',
				'rgb(201, 203, 207)'
			]
		}
	]
};

export default () => ({
	displayName: 'Doughnut Sample with Next.js',
	render() {
		return (
			<div className={homeStyle.main}>
				<h2>Doughnut Sample with Next.js</h2>
				<Doughnut
					data={data}
					options={{
						maintainAspectRatio: false
					}}
				/>
			</div>
		);
	}
});

For the CSS use the same class described above.

And the result will look like when you hit http://localhost:3000/doughnut

Conclusion

We have seen how to plot doughnut and bar charts using the famous library of chart.js

If you are more interested on charts, you can also check out nivo charts, which is a lovely library for charts based on D3.js and React. you will find on this link my full tutorial on how to use it with Next.js