Getting Started With Chart.js: Introduction

Getting Started With Chart.js: Introduction

People normally don't want to go through a large amount of data presented to them in form of text or tables. Mostly that's because it is boring, but more importantly, it's a little harder to process raw numbers. 

For example, here is a table of the ten most populous countries in the world:

Name of the Country	Population
China	1,379,302,771
India	1,281,935,911
United States	326,625,791
Indonesia	260,580,739
Brazil	207,353,391
Pakistan	204,924,861
Nigeria	190,632,261
Bangladesh	157,826,578
Russia	142,257,519
Japan	126,451,398

With only ten countries in this table, there is still a very good chance that you and other readers will skip over the table entirely. Normally, people only look at one or two countries that interest them. If the same data had been presented in the form of a bar chart, it would have taken very little time for someone to get a rough idea of the population in these countries. 

Moreover, it will be a lot easier to figure out trends or facts—for example, the United States is twice as populated as Bangladesh, and China has about ten times more people than Russia—just by looking at the length of bars in the chart.

A popular library that you can use to create different kinds of charts is Chart.js. In this series, you will be learning about all the important aspects of this library. It can be used to create fancy, responsive charts on HTML5 Canvas. 

The library allows you to mix different chart types and plot data on date time, logarithmic, or custom scales with ease. The library also sports out-of-the-box animations that can be applied when changing data or updating colors. 

Let's get started with the installation, and then we'll move on to configuration options and other aspects.

Installation and Usage

You can either download the latest version of Chart.js from GitHub or use the CDN link to include it in your projects. You can also install the library using npm or bower with the help of the following commands:

npm install chart.js --save
bower install chart.js --save

The library has two different versions. The normal version, called Chart.js and Chart.min.js, comes with the Chart.js library and a color parser. If you want to use this version of the library and decide to use the time axis in your charts, you will have to separately include the Moment.js library before using Chart.js. 

The bundled version, which is identified as Chart.bundle.js  or Chart.bundle.min.js, already includes Moment.js. This way, you will not need to include two separate files. One thing that you need to keep in mind is not to use this version if you have already included Moment.js in your project. This can result in version issues.

Once you have figured out the library version that you want to use, you can include it in your projects and start creating awesome charts.

<script src="path/to/Chart.min.js"></script>

<script>
    var barChart = new Chart({...})
</script>

Creating a Chart

Let's represent the population table presented in the introduction as a bar chart. The y-axis will be used to plot the population, and the x-axis will be used to plot the countries. We begin by creating a canvas with id popChart.

<canvas id="popChart" width="600" height="400"></canvas>

The width and height are used to determine the dimensions of the chart. When creating responsive charts, the aspect ratio of the chart is determined by the width and height of the canvas.

Next, you need to instantiate the Chart class. This can be done by passing the node, the jQuery instance, or the 2d context of the canvas on which you want to draw the chart.

var popCanvas = $("#popChart");
var popCanvas = document.getElementById("popChart");
var popCanvas = document.getElementById("popChart").getContext("2d");

The only thing that you have to do now is pass all the parameters to the constructor:

var barChart = new Chart(popCanvas, {
  type: 'bar',
  data: {
    labels: ["China", "India", "United States", "Indonesia", "Brazil", "Pakistan", "Nigeria", "Bangladesh", "Russia", "Japan"],
    datasets: [{
      label: 'Population',
      data: [1379302771, 1281935911, 326625791, 260580739, 207353391, 204924861, 190632261, 157826578, 142257519, 126451398],
      backgroundColor: [
        'rgba(255, 99, 132, 0.6)',
        'rgba(54, 162, 235, 0.6)',
        'rgba(255, 206, 86, 0.6)',
        'rgba(75, 192, 192, 0.6)',
        'rgba(153, 102, 255, 0.6)',
        'rgba(255, 159, 64, 0.6)',
        'rgba(255, 99, 132, 0.6)',
        'rgba(54, 162, 235, 0.6)',
        'rgba(255, 206, 86, 0.6)',
        'rgba(75, 192, 192, 0.6)',
        'rgba(153, 102, 255, 0.6)'
      ]
    }]
  }
});

The object passed in the second parameter contains all the information that Chart.js needs to draw your chart. The type key is used to specify the type of chart that you want to draw. It can have any of the following values: line, bar, radar, polarArea, pie, doughnut, and bubble. You will be learning about all these chart types in this series.

The data key contains the actual data that you want to plot. The backgroundColor key is used to specify the color of different bars in the chart. When the background color is not specified, the default value 'rgba(0,0,0,0.1)' is used. 

Each of the charts also has its own specific keys that you can use to control its appearance. Here is the chart created by the code above:

In the above demo, you can hover over the bars to see the exact population in different countries. One more thing worth noticing is that the size of the chart is not equal to the dimensions we specified, but it still has the same aspect ratio. 

If you want the charts to have the same sizes on all devices, you will have to set the value of the responsive key to false.

Configuration Options

The Chart.js library gives you the option to customize all the aspects of the charts you create. For example, you can change the color and width of the borders of the bars in the above chart. You can also modify the tooltips and the legend by changing their font size and color. In this section, you will learn about different keys that are used to style these elements.

The library has four special global keys that can be used to change all the fonts in a chart. These keys are defaultFontFamily, defaultFontSize, defaultFontStyle, and defaultFontColor. The font size is specified in pixels and does not apply to radialLinear scale point labels. Similarly, defaultFontStyle does not apply to the tooltip title or footer.

Chart.defaults.global.defaultFontFamily = "Lato";
Chart.defaults.global.defaultFontSize = 18;
Chart.defaults.global.defaultFontColor = 'blue';

The following chart uses the above global font settings. Changing the appearance this way can help you create charts that match your website in style.

You can also modify the legend that appears in a chart. The configuration options will need to be passed into the options.legend namespace. You can also specify the legend options globally for all charts using Chart.defaults.global.legend. The position of the legend is controlled using the position key, which can accept one of the following four values: top, left, bottom, and right. You can also show or hide the legend by using the display key.

Besides the legend, you can also control the appearance of the legend's label. Its configuration options are set below the legend configuration using the label key. The width of the color box can be specified using the boxWidth key. When no value is specified, the default value 40 is used. 

The font family, font size, font color and font style values are inherited from the global configuration by default. However, you can specify your own values for them using fontSize, fontStyle, fontFamily, and fontColor.

var barChart = new Chart(popCanvas, {
    type: 'bar',
    data: data,
      options: {
        legend: {
          display: true,
          position: 'bottom',
          labels: {
            boxWidth: 80,
            fontColor: 'rgb(60, 180, 100)'
          }
        }
    }
});

You can control the way tooltips are locally drawn for a chart using the options.tooltips namespace. Similarly, Chart.defaults.global.tooltips can be used to set the appearance of tooltips globally. To specify whether tooltips should be presented to the user, you can use the enabled key. Setting it to false will disable the tooltips. The default value of this key is true. 

You can also control the show/hide behavior of tooltips using the intersect key. When set to true, which is also the default value of this key, the tooltips are shown only when the mouse pointer actually interacts with the bars. When set to false, the tooltips are shown based on the behavior specified by the mode key. 

The mode key is used to determine which element is shown in the tooltip. Its default value is nearest. This means that when you set intersect to false, the tooltip will be shown for the bar which is nearest to the mouse pointer.

Just like the legend, you can also control the value of different font-based properties for tooltips. The only difference is that this time the values will have to be set individually for the title, body and footer elements of the tooltip. 

For example, you can change the font properties of the body of the tooltip using bodyFontFamily, bodyFontSize, bodyFontStyle, and bodyFontColor. The title and footer of the tooltip also have additional properties called titleMarginBottom and footerMarginTop. They can be used to add some extra space between them and the body of the tooltip. 

Similarly, you can add extra padding to the left/right and top/bottom sides of the tooltip using the xPadding and yPadding properties.

You can control the size of the tooltip arrow using the caretSize key. The background of the tooltips can be changed using the backgroundColor key.

var barChart = new Chart(popCanvas, {
    type: 'bar',
    data: data,
      options: {
        tooltips: {
          cornerRadius: 0,
          caretSize: 0,
          xPadding: 16,
          yPadding: 10,
          backgroundColor: 'rgba(0, 150, 100, 0.9)',
          titleFontStyle: 'normal',
          titleMarginBottom: 15
        }
    }
});

The above options will hide the caret as caretSize is set to 0. Here is a working demo which shows the options in action. Try hovering over the bars to see the customized tooltip.

Final Thoughts

This tutorial provided a basic introduction of the Chart.js library and showed you how to use it to create bar charts. You also learned about different configuration options that can be used to control the appearance of different charts. 

Although we only used bar charts in the tutorial, the configuration options could be applied to all chart types. In the next tutorial, you will learn about line charts and bar charts in greater detail.

JavaScript has become one of the de facto languages of working on the web. It’s not without its learning curves, and there are plenty of frameworks and libraries to keep you busy, as well. If you’re looking for additional resources to study or to use in your work, check out what we have available in the Envato marketplace.

If you have any questions about this tutorial, let me know in the comments.

Note that the population data was retrieved from this census information.