Getting Started With Chart.js: Line and Bar Charts

In the first introductory Chart.js tutorial of the series, you learned how to install and use Chart.js in a project. You also learned about some global configuration options that can be used to change the fonts and tooltips of different charts. In this tutorial, you will learn how to create line and bar charts in Chart.js.

Creating Line Charts

Line charts are useful when you want to show the changes in value of a given variable with respect to the changes in some other variable. The other variable is usually time. For example, line charts can be used to show the speed of a vehicle during specific time intervals.

Chart.js allows you to create line charts by setting the type key to line. Here is an example:

var lineChart = new Chart(speedCanvas, {
    type: 'line',
    data: speedData,
    options: chartOptions
});

We will now be providing the data as well as the configuration options that we need to plot the line chart.

var speedData = {
  labels: ["0s", "10s", "20s", "30s", "40s", "50s", "60s"],
  datasets: [{
    label: "Car Speed",
    data: [0, 59, 75, 20, 20, 55, 40],
  }]
};

var chartOptions = {
  legend: {
    display: true,
    position: 'top',
    labels: {
      boxWidth: 80,
      fontColor: 'black'
    }
  }
};

Since we have not provided any color for the line chart, the default color rgba(0,0,0,0.1) will be used. We have not made any changes to the tooltip or the legend. You can read more about changing the crate size, the tooltip or the legend in the first part of the series. 

In this part, we will be focusing on different options specifically available for modifying line charts. All the options and data that we provided above will create the following chart.

The color of the area under the curve is determined by the backgroundColor key. All the line charts drawn using this method will be filled with the given color. You can set the value of the fill key to false if you only want to draw a line and not fill it with any color.

One more thing that you might have noticed is that we are using discrete data points to plot the chart. The library automatically interpolates the values of all other points by using built-in algorithms. 

By default, the points are plotted using a custom weighted cubic interpolation. However, you can also set the value of the cubicInterpolationMode key to monotone to plot points more accurately when the chart you are plotting is defined by the equation y = f(x). The tension of the plotted Bezier curve is determined by the lineTension key. You can set its value to zero to draw straight lines. Please note that this key is ignored when the value of cubicInterpolationMode has already been specified.

You can also set the value of the border color and its width using the borderColor and borderWidth keys. If you want to plot the chart using a dashed line instead of a solid line, you can use the borderDash key. It accepts an array as its value whose elements determine the length and spacing of the dashes respectively.

The appearance of the plotted points can be controlled using the pointBorderColor, pointBackgroundColor, pointBorderWidth, pointRadius, and pointHoverRadius properties. There is also a pointHitRadius key, which determines the distance at which the plotted points will start interacting with the mouse.

var speedData = {
  labels: ["0s", "10s", "20s", "30s", "40s", "50s", "60s"],
  datasets: [{
    label: "Car Speed",
    data: [0, 59, 75, 20, 20, 55, 40],
    lineTension: 0,
    fill: false,
    borderColor: 'orange',
    backgroundColor: 'transparent',
    borderDash: [5, 5],
    pointBorderColor: 'orange',
    pointBackgroundColor: 'rgba(255,150,0,0.5)',
    pointRadius: 5,
    pointHoverRadius: 10,
    pointHitRadius: 30,
    pointBorderWidth: 2,
    pointStyle: 'rectRounded'
  }]
};

The above speedData object plots the same data points as the previous chart but with custom values set for all of the properties.

You can also plot multiple lines on a single chart and provide different options to draw each of them like this:

var dataFirst = {
  label: "Car A - Speed (mph)",
  data: [0, 59, 75, 20, 20, 55, 40],
  lineTension: 0.3,
  // Set More Options
};
  
var dataSecond = {
  label: "Car B - Speed (mph)",
  data: [20, 15, 60, 60, 65, 30, 70],
  // Set More Options
};
  
var speedData = {
  labels: ["0s", "10s", "20s", "30s", "40s", "50s", "60s"],
  datasets: [dataFirst, dataSecond]
};


var lineChart = new Chart(speedCanvas, {
  type: 'line',
  data: speedData
});

Creating Bar Charts

Bar charts are useful when you want to compare a single metric for different entities—for example, the number of cars sold by different companies or the number of people in certain age groups in a town. You can create bar charts in Chart.js by setting the type key to bar. By default, this will create charts with vertical bars. If you want to create charts with horizontal bars, you will have to set the type to horizontalBar. 

var barChart = new Chart(densityCanvas, {
    type: 'bar',
    data: densityData,
    options: chartOptions
});

Let's create a bar chart which plots the density of all the planets in our solar system. The density data has been taken from the Planetary Fact Sheet provided by NASA. 

var densityData = {
  label: 'Density of Planets (kg/m3)',
  data: [5427, 5243, 5514, 3933, 1326, 687, 1271, 1638]
};

var barChart = new Chart(densityCanvas, {
  type: 'bar',
  data: {
    labels: ["Mercury", "Venus", "Earth", "Mars", "Jupiter", "Saturn", "Uranus", "Neptune"],
    datasets: [densityData]
  }
});

The parameters provided above will create the following chart:

Just like the line chart, the bars are filled with a light gray color this time as well. You can change the color of the bars using the backgroundColor key. Similarly, the color and width of the borders of different bars can be specified using the borderColor and borderWidth keys. 

If you want the library to skip drawing the border for a particular edge, you can specify that edge as a value of the borderSkipped key. You can set its value to top, left, bottom, or right.  You can also change the border and background color of different bars when they are hovered using the hoverBorderColor and hoverBackgroundColor key. 

The bars in the bar chart above were sized automatically. However, you can control the width of individual bars using the barThickness and barPercentage properties. The barThickness key is used to set the thickness of bars in pixels, and barPercentage is used to set the thickness as a percentage of the available category width. 

You can also show or hide a particular axis using its display key. Setting the value of display to false will hide that particular axis. You can read more about all these options on the documentation page.

Let's make the density chart more interesting by overriding the default values for bar charts using the following code.

var densityData = {
  label: 'Density of Planets (kg/m3)',
  data: [5427, 5243, 5514, 3933, 1326, 687, 1271, 1638],
  backgroundColor: [
    'rgba(0, 99, 132, 0.6)',
    'rgba(30, 99, 132, 0.6)',
    'rgba(60, 99, 132, 0.6)',
    'rgba(90, 99, 132, 0.6)',
    'rgba(120, 99, 132, 0.6)',
    'rgba(150, 99, 132, 0.6)',
    'rgba(180, 99, 132, 0.6)',
    'rgba(210, 99, 132, 0.6)',
    'rgba(240, 99, 132, 0.6)'
  ],
  borderColor: [
    'rgba(0, 99, 132, 1)',
    'rgba(30, 99, 132, 1)',
    'rgba(60, 99, 132, 1)',
    'rgba(90, 99, 132, 1)',
    'rgba(120, 99, 132, 1)',
    'rgba(150, 99, 132, 1)',
    'rgba(180, 99, 132, 1)',
    'rgba(210, 99, 132, 1)',
    'rgba(240, 99, 132, 1)'
  ],
  borderWidth: 2,
  hoverBorderWidth: 0
};

var chartOptions = {
  scales: {
    yAxes: [{
      barPercentage: 0.5
    }]
  },
  elements: {
    rectangle: {
      borderSkipped: 'left',
    }
  }
};

var barChart = new Chart(densityCanvas, {
  type: 'horizontalBar',
  data: {
    labels: ["Mercury", "Venus", "Earth", "Mars", "Jupiter", "Saturn", "Uranus", "Neptune"],
    datasets: [densityData],
  },
  options: chartOptions
});

The densityData object is used to set the border and background color of the bars. There are two things worth noticing in the above code. First, the values of the barPercentage and borderSkipped properties have been set inside the chartOptions object instead of the dataDensity object. 

Second, the chart type has been set to horizontalBar this time. This also means that you will have to change the value of barThickness and barPercentage for the y-axis instead of the x-axis for them to have any effect on the bars.

The parameters provided above will create the following bar chart.

You can also plot multiple datasets on the same chart by assigning an id of the corresponding axis to a particular dataset. The xAxisID key is used to assign the id of any x-axis to your dataset. Similarly, the yAxisID key is used to assign the id of any y-axis to your dataset. Both the axes also have an id key that you can use to assign unique ids to them.

If the last paragraph was a bit confusing, the following example will help clear things up.

var densityData = {
  label: 'Density of Planet (kg/m3)',
  data: [5427, 5243, 5514, 3933, 1326, 687, 1271, 1638],
  backgroundColor: 'rgba(0, 99, 132, 0.6)',
  borderColor: 'rgba(0, 99, 132, 1)',
  yAxisID: "y-axis-density"
};

var gravityData = {
  label: 'Gravity of Planet (m/s2)',
  data: [3.7, 8.9, 9.8, 3.7, 23.1, 9.0, 8.7, 11.0],
  backgroundColor: 'rgba(99, 132, 0, 0.6)',
  borderColor: 'rgba(99, 132, 0, 1)',
  yAxisID: "y-axis-gravity"
};

var planetData = {
  labels: ["Mercury", "Venus", "Earth", "Mars", "Jupiter", "Saturn", "Uranus", "Neptune"],
  datasets: [densityData, gravityData]
};

var chartOptions = {
  scales: {
    xAxes: [{
      barPercentage: 1,
      categoryPercentage: 0.6
    }],
    yAxes: [{
      id: "y-axis-density"
    }, {
      id: "y-axis-gravity"
    }]
  }
};

var barChart = new Chart(densityCanvas, {
  type: 'bar',
  data: planetData,
  options: chartOptions
});

Here, we have created two y-axes with unique ids, and they have been assigned to individual datasets using the yAxisID key. The barPercentage and categoryPercentage keys have been used here to group the bars for individual planets together. Setting categoryPercentage to a lower value increases the space between the bars of different planets. Similarly, setting barPercentage to a higher value reduces the space between bars of the same planet.

Final Thoughts

In this tutorial, we have covered all the aspects of line charts and bar charts in Chart.js. You should now be able to create basic charts, modify their appearance, and plot multiple datasets on the same chart without any issues. In the next part of the series, you will learn about the radar and polar area charts in Chart.js.

I hope you liked this tutorial. If you have any questions, please let me know in the comments.

by Monty Shokeen via Envato Tuts+ Code