Annotated Line Chart with Highcharts
Although annotations are common elements of various type charts, they are especially important in line charts. Annotations help give historic context to the lines, explain sudden dips or raises in values. Figure 12.4 shows change in air passenger traffic for Australia and Canada between 1970 and 2018 (according to the World Bank). You can notice that both countries experienced a dip in 2009, the year after the 2008 financial crisis as suggested by the annotation.
Unfortunately, Chart.js is not great at showing annotations. This is why we are switching to Highcharts for this particular example. But don’t worry – you will see that the process is hardly different from the previous Chart.js examples.
To create your own annotated line chart with Highcharts, with data loaded from a CSV file, do the following:
Prepare your data in CSV format and upload into a
data.csvfile. 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 three columns (labels, one data series, and notes). You can add as many data series columns as you wish, but you can only have one annotation (final column) per row.
| Year | Canada | Australia | Note | | 1980 | 22453000 | 13648800 | | | 1981 | 22097100 | 13219500 | | | 1982 | 19653800 | 13187900 | Early 1980s recession |
script.js, customize the values of variables shown in the code snippet below:
var TITLE = 'Air Transport, Passengers Carried (1970–2018)'; // Caption underneath the chart var CAPTION = 'Source: The World Bank'; // x-axis label and label in tooltip var X_AXIS = 'Year'; // y-axis label and label in tooltip var Y_AXIS = 'Passengers'; // Should y-axis start from 0? `true` or `false` var BEGIN_AT_ZERO = true; // `true` to show the legend, `false` to hide var SHOW_LEGEND = true;
If you wish to further customize your chart, use the Highcharts API reference that lists all available features.