#StandWithUkraine - Stop the Russian invasion

Join us and donate. We are contributing all book royalties from 2022 to present to:
Save Life in Ukraine and Ukraine Humanitarian Appeal.

Line Chart with Chart.js

Line charts are often used to show temporal data, or change of values over time. The x-axis represents time intervals, and the y-axis represents observed values. Note that unlike column or bar charts, y-axes of line charts do not have to start at zero because we rely on the position and slope of the line to interpret its meaning. The line chart in Figure 11.3 shows the number of students in select school districts in Connecticut from 2012-2013 to 2018-19 academic years. Each line has a distinct color, and the legend helps establish the color-district relations.

Figure 11.3: Interactive line chart with Chart.js. Explore the interactive version.

To create your own line chart with Chart.js, with data loaded from a CSV file, you can:

  1. Go to our GitHub repo for the Chart.js template that contains the code of the line chart shown in Figure 11.3, log into your GitHub account, and click Use this template to create a copy that you can edit.

  2. Prepare your data in CSV format and upload into a data.csv file. Place labels that will appear along the axis in the first column, and each data series in its own column. Your CSV must contain at least two columns (labels and one data series).

Tip: You can add as many data series columns as you wish, but choose a reasonable number of lines, since humans can distinguish only a limited number of colors. If you need to display multiple lines, consider using only one color to highlight the most significant line in your data story, and color others in gray, as you will learn in the Draw Attention to Meaning section of Chapter 15.

| year    | Hartford | New Haven | Bridgeport | Stamford | Waterbury |
| 2013-14 | 21820    | 21420     | 20929      | 15927    | 18706     |
| 2014-15 | 21953    | 21711     | 21244      | 16085    | 18878     |
| 2015-16 | 21463    | 21725     | 21191      | 15946    | 18862     |
| 2016-17 | 20891    | 21981     | 21222      | 16100    | 19001     |
| 2017-18 | 20142    | 21518     | 20896      | 15931    | 19007     |
| 2018-19 | 19767    | 21264     | 20572      | 16053    | 18847     |
  1. In script.js, customize the values of variables shown in the code snippet below:
var TITLE = 'Hartford School District is No Longer Largest in Connecticut';

// x-axis label and label in tooltip
var X_AXIS = 'Academic Year';

// y-axis label and label in tooltip
var Y_AXIS = 'Number of Students';

// Should y-axis start from 0? `true` or `false`
var BEGIN_AT_ZERO = false;

// `true` to show the grid, `false` to hide
var SHOW_GRID = true;

 // `true` to show the legend, `false` to hide
var SHOW_LEGEND = true;

Note: To change a Chart.js line chart into a stacked area chart, see the Chart.js Stacked Area documentation. Make sure each dataset comes with a fill: true property, and also make sure that yAxes has its stacked property set to true.

Remember to look at the official Chart.js documentation if you want to add more features. If something isn’t working as desired, visit StackOverflow to see if anyone had already solved your problem.