People normally don't want to go through a large amount of data presented to them in the 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:

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 with the help of the following commands:

npm install chart.js --save

Chart.js provided a bundled version in the past which came with the Moment.js library already included in the package. Now, there is no such separate bundle, and the library no longer lists Moment as a dependency. However, you will have to include one of the adapters and the corresponding library if you plan on creating time and timescale charts.

The date-fns adapter works well for simple use cases and doesn't come with the additional load of third-party libraries. We will use that along with native Date object methods in JavaScript.

Once you've decided on the library version and adapters that you want to use, you can include them 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. We'll use the y-axis to plot the population and the x-axis 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: [
        'rgb(255, 99, 132)',
        'rgb(54, 162, 235)',
        'rgb(255, 206, 86)',
        'rgb(75, 192, 192)',
        'rgb(153, 102, 255)',
        'rgb(255, 159, 64)',
        'rgb(255, 99, 132)',
        'rgb(54, 162, 235)',
        'rgb(255, 206, 86)',
        'rgb(75, 192, 192)',
        'rgb(153, 102, 255)'
      ]
    }]
  }
});

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 you can use to change all the fonts in a chart. These keys are font.family, font.size, font.style, and color. The font size is specified in pixels and does not apply to radialLinear scale point labels. Similarly, font.style does not apply to the tooltip title or footer.

Chart.defaults.font.family = "Lato";
Chart.defaults.font.size = 18;
Chart.defaults.color = "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.plugins.legend namespace. You can also specify the legend options globally for all charts using Chart.defaults.plugins.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 within legend using the label key. You can specify the width of the color box 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 with a font key that accepts an object with size, style, family, and weight as its keys.

var barChart = new Chart(popCanvas, {
    type: 'bar',
    data: data,
    options: {
        plugins: {
          legend: {
            display: true,
            position: "bottom",
            labels: {
              boxWidth: 50,
              color: "black",
              font: {
                size: 24,
                weight: "bold"
              }
            }
          }
        }
    }
  }
);

You can control the way tooltips are locally drawn for a chart using the options.plugins.tooltip namespace. Similarly, you can use Chart.defaults.plugins.tooltip 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 by passing a font object with family, size, style, and weight as keys. The title and footer of the tooltip also have additional properties called titleMarginBottom and footerMarginTop. You can use them to add some extra space between them and the body of the tooltip. Similarly, you can add extra padding to the sides of the tooltip using the padding key.

You can control the size of the tooltip arrow using the caretSize key or change the background of the tooltips using the backgroundColor key.

options: {
    plugins: {
      legend: {
        display: true,
        position: "bottom",
        labels: {
          boxWidth: 50,
          color: "black",
          font: {
            size: 24,
            weight: "bold"
          }
        }
      },
      tooltip: {
        cornerRadius: 0,
        caretSize: 0,
        padding: 10,
        backgroundColor: 'black',
        borderColor: "gray",
        borderWidth: 5,
        titleMarginBottom: 4,
        titleFont: {
          "weight": "bold",
          "size": 22
        }
      }
    }
}

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 to the Chart.js library and showed you how to use it to create bar charts. You also learned about the different configuration options that you can use 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.

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