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:

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

We will now be providing the data that we need to plot the line chart.

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

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 above code is the absolute minimum that you need to provide in order to create a line chart. It will create the chart shown below.

The color of the area under the curve is determined by the backgroundColor key and it is set to rgba(0, 0, 0, 0.1) by default. All the line charts drawn using this method will be filled with the given color. However, you will also need to make sure that the value of fill key is set to true for the background color to be visible. It is set to false by default.

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 with linear interpolation of values. This means that the different segments of our line chart will always be a straight line. Passing a non-zero value for the tension key will result in a custom weighted cubic interpolation to determine the trajectory of the line chart in-between our plot points.

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 value of tension key is ignored in monotone mode and the library makes sure that the points you are plotting are extremum values in their vicinity. For example, the line will never go above the highest plotted point or below the lowest plotted point.

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.

let speedData = {
  labels: ["0s", "10s", "20s", "30s", "40s", "50s", "60s"],
  datasets: [{
    label: "Car Speed (mph)",
    data: [0, 59, 75, 20, 20, 55, 40],
    cubicInterpolationMode: 'monotone',
    fill: false,
    borderColor: '#E64A19',
    backgroundColor: 'transparent',
    borderDash: [20, 10, 60, 10],
    pointBorderColor: '#E64A19',
    pointBackgroundColor: '#FFA726',
    pointRadius: 5,
    pointHoverRadius: 10,
    pointHitRadius: 30,
    pointBorderWidth: 4,
    pointStyle: 'rectRounded'
  }]
};

The above speedData object plots the same data points as the previous chart but with custom values set for a lot of the properties. Please note that the value of tension key specified in the CodePen demo is irrelevant because cubicInterpolationMode is set to monotone. I have included it here so that you could experiment with different values after changing the interpolation mode to default.

Chart.js also gives you the option to avoid any kind of interpolation between different points and just abruptly change values in steps. The plot will consist of just horizontal and vertical lines in this case. You have to simply set the value of stepped key to true to achieve this effect. There are also some other possible values like middle which will result in creation of the step in the middle of two plotted points.

The segments between different points of the same dataset can have their own unique styling applied to them. Segment styling currently works for all border* properties as well as backgroundColor property. The segment key accepts an object which can contain callback functions to determine the value of different properties like borderColor. I will show you how to do that in the following example where we plot the speed of two different cars on the graph.

const checkSpeed = (ctx, color_a, color_b) => ctx.p0.parsed.y > ctx.p1.parsed.y ? color_a : color_b;

let dataFirst = {
  label: "Car A - Speed (mph)",
  data: [0, 59, 75, 20, 20, 55, 40],
  borderColor: "black",
  backgroundColor: "transparent",
  borderDash: [3, 3],
  stepped: "middle"
};

let dataSecond = {
  label: "Car B - Speed (mph)",
  data: [20, 15, 60, 60, 65, 30, 70],
  borderColor: "blue",
  backgroundColor: "transparent",
  segment: {
        borderColor: ctx => checkSpeed(ctx, 'orangered', 'yellowgreen'),
  },
};

let speedData = {
  labels: ["0s", "10s", "20s", "30s", "40s", "50s", "60s"],
  datasets: [dataFirst, dataSecond]
};

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

We have defined two functions which compare the value of the current and next plot point. If the current speed is higher, this means the car is slowing down and we set the borderColor to orangered. Otherwise, the color stays yellowgreen.

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.

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

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.

let densityData = {
  label: 'Density of Planets (kg/m3)',
  data: [5427, 5243, 5514, 3933, 1326, 687, 1271, 1638]
};
let 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.

You can also create horizontal bar charts with Chart.js. Since they look very similar to regular vertical bar charts, all you need to do is set the value of indexAxis key to y.

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

let densityData = {
  label: "Density of Planets (kg/m3)",
  data: [5427, 5243, 5514, 3933, 1326, 687, 1271, 1638],
  backgroundColor: "pink",
  borderColor: "red",
  borderWidth: 2,
  hoverBorderWidth: 5,
  hoverBackgroundColor: "darkgray",
  hoverBorderColor: "black",
  indexAxis: "y",
  barPercentage: 1.1
};

let 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 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.

let gravityBars = '#F06292';
let densityBars = '#4DB6AC';

let densityData = {
  label: "Density of Planet (kg/m3)",
  data: [5427, 5243, 5514, 3933, 1326, 687, 1271, 1638],
  backgroundColor: densityBars,
  yAxisID: "y-axis-density"
};

let 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: gravityBars,
  yAxisID: "y-axis-gravity"
};
let planetData = {
  labels: [ "Mercury", "Venus", "Earth", "Mars", "Jupiter", "Saturn", "Uranus", "Neptune"],
  datasets: [densityData, gravityData]
};

let chartOptions = {
  barPercentage: 1,
  categoryPercentage: 0.8,
  scales: {
    "y-axis-density": {
      grid: {
        color: densityBars,
        tickColor: densityBars,
        borderColor: densityBars
      },
      ticks: {
        color: densityBars
      },
      position: "left"
    },
    "y-axis-gravity": {
      grid: {
        color: gravityBars,
        tickColor: gravityBars,
        borderColor: gravityBars
      },
      ticks: {
        color: gravityBars
      },
      position: "right"
    }
  }
};

let 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. We use these unique ids inside the chartOptions object to specify different grid, tick and border color values for the axes.This makes our charts much more legible.

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 major 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.