How can you start creating data visualizations with Chart.js? You’ll learn how in this article.
Let’s get started.
What Is Chart.js?
Chart.js is an open-source data visualization JavaScript library used to plot HTML-renderable charts. It currently supports eight different interactive charts types that you can also animate. To make an HTML-based graph with chart.js, you need an HTML canvas to hold it.
The library accepts a set of datasets and other customization parameters such as the background color, border color, and more. One of the datasets is the label, which represents the values on the X-axis. The other is a set of numerical values, which typically lie on the Y-axis.
You also need to specify the graph type within the chart object so the library knows which graph to plot.
How to Create Charts With Chart.js
As we mentioned previously, you can create various types of charts with chart.js. For this tutorial, you’ll start with line and bar graphs. Once you grasp the concept behind these, you’ll have all the tools and confidence you need to plot the other available charts.
To start using chart.js, create the necessary files. For this tutorial, the file names are chart.html, plot.js, and index.css. You can use any naming convention for your files.
Now, paste the following in the head section of your HTML file to link to the Chart.js content delivery network (CDN).
In chart.html:
Next, create an HTML canvas to hold your chart and give it an ID. Also, connect to the CSS (index.css) file in the head section and point to your JavaScript (plot.js) file in the body section.
The structure of the HTML file looks like this:
And in your CSS:
The CSS styling above isn’t a set convention. So you can style yours as you like depending on your DOM structure. Once your HTML and CSS files are ready, it’s time to plot your charts with JavaScript.
The Line Chart
To make a line chart with chart.js, you’ll set the chart type to line. This tells the library to draw a line chart.
To demonstrate this, in your JavaScript file:
Output:
Feel free to change the fill value to true, use more data, or tweak the colors to see what happens.
As you can also see, there’s a little legend box at the top of the chart. You can remove that inside an optional options parameter.
The options parameter also helps with other customizations besides removing or including the legend. For example, you can use it to force an axis to start at zero.
To declare an options parameter, here’s how the chart section looks in your JavaScript file:
Output:
You can also use different background colors for each dot. Varying the background colors this way is usually more helpful with bar graphs, though.
Making Bar Graphs With Chart.js
Here, you only need to change the chart type to bar. You don’t need to set the fill option because the bars inherit the background color automatically:
Output:
Feel free to force the Y-axis to start from zero or any value as you did for the line chart.
To use different colors for each bar, pass an array of colors that match the number of items in your data into the backgroundColor parameter:
Output:
Making a Pie Chart With Chart.js
To draw a pie chart, change the chart type to pie. You might also want to set the legend’s display to true to see what each segment of the pie represents:
Output:
As you did in the examples above, you can try out other charts by changing the type.
Nonetheless, here’s a list of supported chart.js chart types you can try out using the above coding conventions:
bar line scatter doughnut pie radar polarArea bubble
Play Around With Chart.js
Although you’ve only gotten your hands around line, pie, and bar graphs in this tutorial, the code pattern for plotting other charts with chart.js follows the same convention. So feel free to play around with the others, too.
With that said, if you want more than what chart.js offers, you might want to take a look at some other JavaScript chart libraries as well.
