Getting Started with Chart.js

We can make creating charts on a web page easy with Chart.js. In this article, we’ll look at how to create charts with Chart.js.

Installation

We can add the Chart.js library from CDN.

In HTML

<script src='https://cdn.jsdelivr.net/npm/chart.js@2.9.3/dist/Chart.min.js'></script>

Also, we can install the NPM package version by running:

npm install chart.js --save

The Bower package can be installed by running:

bower install chart.js --save

Creating a Chart

We can then create a chart by creating our canvas element:

<canvas id="myChart" width="400" height="400"></canvas>

And then we can add our JavaScript code for the graph:

var ctx = document.getElementById('myChart').getContext('2d');
var myChart = new Chart(ctx, {
  type: 'bar',
  data: {
    labels: ['Red', 'Blue', 'Yellow'],
    datasets: [{
      label: '# of Votes',
      data: [12, 19, 3],
      backgroundColor: [
        'rgba(255, 99, 132, 0.2)',
        'rgba(54, 162, 235, 0.2)',
        'rgba(255, 206, 86, 0.2)',
      ],
      borderColor: [
        'rgba(255, 99, 132, 1)',
        'rgba(54, 162, 235, 1)',
        'rgba(255, 206, 86, 1)',
      ],
      borderWidth: 1
    }]
  },
  options: {
    scales: {
      yAxes: [{
        ticks: {
          beginAtZero: true
        }
      }]
    }
  }
});

We get the canvas element’s context.

Then we use the Chart constructor to create our chart.

type has the chart type.

label has the legend label.

The labels property has the x-axis labels.

datasets has the data for the chart.

data has the y-axis cooredinates.

backgroundColor has the background color for the bars.

borderColor has the border color for the bars.

borderWidth has the border width.

options has some options for the graph.

scales has the graph scales.

We have the beginAtZero option set to true so that the y-axis starts at 0.

Accessible Charts

We can make our charts accessible with the aria-label and role attributes.

For example, we can write:

<canvas id="myChart" width="400" height="400" aria-label="bar chart" role="img"></canvas>

We can add fallback content with:

<canvas id="myChart" width="400" height="400" aria-label="bar chart" role="img">
  <p>fallback</p>
</canvas>

Responsive Charts

Charts can be made responsive with a wrapper element.

We style that remove the height and width from the canvas and put that in the wrapper element.

For instance, we can write:

<div class="chart-container" style="position: relative; height:40vh; width:80vw">
  <canvas id="myChart"></canvas>
</div>

We put the styles in the div instead of the canvas.

Now the chart should resize when we resize the screen.

The chart can also be programmatically resized:

var ctx = document.getElementById('myChart').getContext('2d');
var myChart = new Chart(ctx, {
  type: 'bar',
  data: {
    labels: ['Red', 'Blue', 'Yellow'],
    datasets: [{
      label: '# of Votes',
      data: [12, 19, 3],
      backgroundColor: [
        'rgba(255, 99, 132, 0.2)',
        'rgba(54, 162, 235, 0.2)',
        'rgba(255, 206, 86, 0.2)',
      ],
      borderColor: [
        'rgba(255, 99, 132, 1)',
        'rgba(54, 162, 235, 1)',
        'rgba(255, 206, 86, 1)',
      ],
      borderWidth: 1
    }]
  },
  options: {
    scales: {
      yAxes: [{
        ticks: {
          beginAtZero: true
        }
      }]
    }
  }
});

myChart.canvas.parentNode.style.height = '428px';
myChart.canvas.parentNode.style.width = '428px';

We changed the canvas’ parent node’s height and width.