Chart Making with Chart.js

4 min readJun 22, 2021

Chart.js is an open-source chart creation library that developers and designers can use for quick and flexible chart creation in their projects. They currently offer bar, line, bubble, scatter, doughnut, pie, polar area, radar, scale, and many more chart options. You can customize charts using different colors, labels, scaling, tooltips, and other provided options. We’ll go over a few in more detail below.

Installation

Typically, users should install Chart.js into their root project directory with npm. Or if you prefer, there are a few alternative methods listed on their installation page (CDNJS, jsDelivr, or downloading the repo on Github — not recommended).

npm install chart.js

After installation, include it on your page with the following script tag:

<script src="https://cdn.jsdelivr.net.npm/chart.js"></chart>

Chart Creation

To create a chart, you’ll first need to include canvas. For the sake of responsiveness, they recommend you wrap the chart in its own container.

<div>
  <canvas id="sleepChart"></canvas>
</div>

Once you’ve created the canvas, you can include a script to set up and configure your chart. A label array is used to label the index axis (defaults to x, but can be set as the y axis).

const labels = [
  'Monday',
  'Tuesday',
  'Wednesday',
  'Thursday',
  'Friday',
  'Saturday',
  'Sunday'
];

And a data object is used to hold the rest of the setup information.

const data = {
  labels: labels,
  datasets: [{
    label: 'Hours of Sleep This Week',
    backgroundColor: ['red', 'orange', 'yellow', 'green', 'blue',    'indigo', 'violet'],
    borderColor: 'black',
    borderWidth: 1,
    data: [6, 8, 5, 7.5, 6, 5.5, 9, 8.5],
  }]
};

The data object contains the labels, set to the labels array from above, and a datasets array which holds an object setting some general information about the desired chart. In this case, we’ve set the label (chart title) to ‘Hours of Sleep This Week’, an array of backgroundColor (you can just specify one instead of an array), a chart border color, border width, and also set some data to include in our chart.

You will also need to include a configuration object.

const configuration = {
  type: 'bar',
  data: data,
  options: {
    scales: {
      y: {
        beginAtZero: true
      }
    }
  }
};

This configuration sets the type of graph, I’ve specified a bar graph, data, which specifies the data object from above, and options. This options object includes a scales object which specifies that the y axis labeling should begin at zero.

After setting all of your preferences you can declare a new chart using the proper id and configuration in order to append it to the document.

const sleepChart = new Chart(
  document.getElementById('sleepChart'),
  configuration
);

In the end, I’ve made a chart only I could love (and even that is questionable) just to demonstrate some of the basic options you can play around with.

Line Graph

Here’s the setup for a basic line graph.

const labels = [
  'A',
  'B',
  'C',
  'D'
];const data = {
  labels: labels,
  datasets: [{
    label: 'Beginner\'s Line Graph',
    backgroundColor: '#FFF',
    borderColor: '#000',
    data: [1, 3, 4, 2]
  }]
};const config = {
  type: 'line',
  data: data,
  options: {}
};const myChart = new Chart(
  document.getElementById('beginnerChart'),
  config
);

And the output:

You can see that this chart did not specify the y-axis starting at 0 so it simply includes values given in the data set.

Other Charts

Here are some examples of other chart options from the Chart.js documentation.

Radar Chart

Doughnut Chart

Pie Chart

Scatter Chart

As you can see, there are a variety of options and customizations available to create quick and easy charts for your application. Compared to other charting libraries, this one is very easy to integrate into your app in a flexible and responsive way. Have fun charting!

Check out the Chart.js documentation at chartjs.org.