Chart.js + Next.js = Beautiful, Data-Driven Dashboards. How to create them fast and efficiently.

Today's challenge

Hello everyone 👋!

Recently I was in charge of creating a dashboard that looks like the upper one. I’m not gonna lie, my artistic side was delighted because I think it does look pretty neat. My developer side on the other hand was thrilled to recreate that in code since I wanted to try Chart.js for quite some time now. Today I want to save some of your time. Chart.js isn’t that complicated but when it comes to using it with Next.js there are some know-hows that will save you a lot of time, and save you from “It should work but for some reason, it doesn’t”.

Table of contents:

1. How to properly initialize and register ChartJS instance,
2. How to create a line chart,
3. How to create a bar chart,
4. How to create a doughnut chart

Feel free to just skip to the section of your interest and copy the code, or should I say “inspire” 😉.

How to properly initialize and register ChartJS instance

While working with Chart.js and Next.js we’re, de facto, working with two libraries. One of them is “chart.js” and the second one is “react-chartjs-2”. Go ahead and install them with the package manager of your choice. Since my choice is a yarn I would do it like that:

yarn add chart.js react-chartjs-2

The next thing we should focus on is properly registering it. Chart.js is tree-shakeable, and what that means is that it is necessary to import and register the controllers, elements, scales, and plugins you are going to use. In code, it translates to that:

Importing and registering needed controllers

First catch

The first thing you should check if some of the styling options don’t work is if you registered the needed controller. For example, let’s say that you want to fill the area under the graph line. You do everything exactly like on the documentation page and exactly like on the tutorials and it still doesn’t work. Don’t throw your computer out of your window. Just scan through available controllers and check if there’s any that you’re missing. The reason for the fill not working was that I didn’t register the Filler controller. Names for controllers are descriptive, so use your common sense, or even better, Stack Overflow.

Going back to the proper importing. After you registered needed controllers from chart.js, you can import chart types you want to use from react-chartjs-2.

Importing wanted Charts

That’s all when it comes to initialization.

How to create a line chart

That’s the look we’re aiming for

That’s how I’m looking at it from construction perspective

Before we jump into the code I just wanted to let you know how I think about creating charts of my desire. At the end of the day, chart.js is a big module, and instead of exploring all of the options, it is best to just focus on your end goal.

Default chart

Above you can see a default chart. If we want to create the desired chart we have to:

1. Get rid of x and y labels, as well as a grid
2. Get rid of Title, and datasets name
3. Get rid of points
4. Fill an area under the line

Now let’s just translate it to the javascript.

1. Create Line Element

Since we’re using a Line chart element we use exactly that.

2. Provide dataset

Exemplary dataset

As you can see data that we use here is pretty straightforward. Nothing spectacular. Later you’d probably want to fill it with actual data.

3. Define visual options

Referencing our visual roadmap from earlier we have:

1. xAxis and yAxis display set to false hides x and y labels as well as a grid for that,
2. legends display set to false hides legends and legend bars,
3. point radius and hit radius set to 0 turn off interaction mode and circle points,
4. line property allows us to fill an area under the Line. REMEMBER TO REGISTER A FILLER ELEMENT IN CHART JS

How to create a bar chart

On the left we can see the default one, on the right the desired one

The same story here. Let’s list all of the things we have to change in order to get from the left chart to the right one:

1. Get rid of x Axis,
2. Position them next to each other instead of stacking,
3. Change legend labels to dots instead of rectangles, and place them on the left side,
4. Create a gap between bars and make them circular.

1. Create Bar element

Bar element with data and options parameter included

2. Dataset creation

As you can see in this dataset in addition to the data we’ve also included some of the customization settings like border radius which is responsible for the bar to be rounded on the top, backgroundColor, or bar thickness. We do it here and not in the options object because options are general for both datasets, and we want some values to be unique for the given bar.

3. Style bars in order to match the one we want to create

Option object

1. xAxis display set to false hides the xAxis, yAxis max set to 1 is widening our Y values. Otherwise, bars would be as high as the chart itself. It just looks nicer when you have some of the white space above,
2. In order to position them next to each other, you have to add both objects to the datasets array,
3. If you want to have dots instead of rectangles as a legend label bar, you have to add labels object with usePointStyle set to true and pointStyle set to “circle”,
4. Last but not least, the gap between two bars can be created by setting barPercentage to 0.3 and categoryPercentage to 1. They’re in correlation to each other. If you want a wider explanation you can find it here.

How to create a doughnut chart

The doughnut chart is actually the easiest one to create, from all of the charts we’ve already covered, so let me just paste all of the code at once:

Do you see? Nothing crazy here. The biggest revelation is maybe that we define 4 background colors since we have 4 parts of the doughnut chart. BorderWidth and weight are the values responsible for overall thickness and you just have to try a few of the values and pick the one which suits you the most, and the cutout value is simply the cutout from the middle of the “doughnut”. It alters how big the hole inside a doughnut is.

Summary

Creating beautiful charts with chart.js library after a while becomes pretty intuitive. The most important thing to remember is that when using it with React / Next.js, you have to remember to register all of the needed controllers. If you do that the rest should be smooth.

Happy coding amigos 🥳!

Feel free to reach out to me in case of any questions:
Twitter
Discord: Szymon From Poland#6093