9 min read

(For more resources related to this topic, see here.)

Introducing line charts

First let’s start with a single series line chart. We will use one of the many data provided by The World Bank organization at www.worldbank.org. The following is the code snippet to create a simple line chart which shows the percentage of population ages, 65 and above, in Japan for the past three decades:

var chart = new Highcharts.Chart({
chart: {
renderTo: 'container'
},
title: {
text: 'Population ages 65 and over (% of total)',
},
credits: {
position: {
align: 'left',
x: 20
},
text: 'Data from The World Bank'
},
yAxis: {
title: {
text: 'Percentage %'
}
},
xAxis: {
categories: ['1980', '1981',
'1982', ... ],
labels: {
step: 5
}
},
series: [{
name: 'Japan - 65 and over',
data: [ 9, 9, 9, 10, 10, 10, 10 ... ]
}]
});

The following is the display of the simple chart:

Instead of specifying the year number manually as strings in categories, we can use the pointStart option in the series config to initiate the x-axis value for the first point. So we have an empty xAxis config and series config, as follows:

xAxis: {
},
series: [{
pointStart: 1980,
name: 'Japan - 65 and over',
data: [ 9, 9, 9, 10, 10, 10, 10 ... ]
}]

Although this simplifies the example, the x-axis labels are automatically formatted by Highcharts utility method, numberFormat, which adds a comma after every three digits. The following is the outcome on the x axis:

To resolve the x-axis label, we overwrite the label’s formatter option by simply returning the value to bypass the numberFormat method being called. Also we need to set the allowDecimals option to false. The reason for that is when the chart is resized to elongate the x axis, decimal values are shown. The following is the final change to use pointStart for the year values:

xAxis: {
labels:{
formatter: function() {
// 'this' keyword is the label object
return this.value;
}
},
allowDecimals: false
},
series: [{
pointStart: 1980,
name: 'Japan - 65 and over',
data: [ 9, 9, 9, 10, 10, 10, 10 ... ]
}]

Extending to multiple series line charts

We can include several more line series and set the Japan series by increasing the line width to be 6 pixels wide, as follows:

series: [{
lineWidth: 6,
name: 'Japan',
data: [ 9, 9, 9, 10, 10, 10, 10 ... ]
}, {
Name: 'Singapore',
data: [ 5, 5, 5, 5, ... ]
}, {
...
}]

The line series for Japanese population becomes the focus in the chart, as shown in the following screenshot:

Let’s move on to a more complicated line graph. For the sake of demonstrating inverted line graphs, we use the chart.inverted option to flip the y and x axes to opposite orientations. Then we change the line colors of the axes to match the same series colors. We also disable data point markers for all the series and finally align the second series to the second entry in the y-axis array, as follows:

chart: {
renderTo: 'container',
inverted: true,
},
yAxis: [{
title: {
text: 'Percentage %'
},
lineWidth: 2,
lineColor: '#4572A7'
}, {
title: {
text: 'Age'
},
opposite: true,
lineWidth: 2,
lineColor: '#AA4643'
}],
plotOptions: {
series: {
marker: {
enabled: false
}
}
},
series: [{
name: 'Japan - 65 and over',
type: 'spline',
data: [ 9, 9, 9, ... ]
}, {
name: 'Japan - Life Expectancy',
yAxis: 1,
data: [ 76, 76, 77, ... ]
}]

The following is the inverted graph with double y axes:

The data representation of the chart may look slightly odd as the usual time labels are swapped to the y axis and the data trend is awkward to comprehend. The inverted option is normally used for showing data in a noncontinuous form and in bar format. If we interpret the data from the graph, 12 percent of the population is 65 and over, and the life expectancy is 79 in 1990.

By setting plotOptions.series.marker.enabled to false it switches off all the data point markers. If we want to display a point marker for a particular series, we can either switch off the marker globally and then set the marker on an individual series, or the other way round.

plotOptions: {
series: {
marker: {
enabled: false
}
}
},
series: [{
marker: {
enabled: true
},
name: 'Japan - 65 and over',
type: 'spline',
data: [ 9, 9, 9, ... ]
}, {

The following graph demonstrates that only the 65 and over series has point markers:

Sketching an area chart

In this section, we are going to use our very first example and turn it into a more stylish graph (based on the design of wind energy poster by Kristin Clute), which is an area spline chart. An area spline chart is generated using the combined properties of area and spline charts. The main data line is plotted as a spline curve and the region underneath the line is filled in a similar color with a gradient and an opaque style.

Firstly, we want to make the graph easier for viewers to look up the values for the current trend, so we move the y axis next to the latest year, that is, to the opposite side of the chart:

yAxis: { ....
opposite:true
}

The next thing is to remove the interval lines and have a thin axis line along the y axis:

yAxis: { ....
gridLineWidth: 0,
lineWidth: 1,
}

Then we simplify the y-axis title with a percentage sign and align it to the top of the axis:

yAxis: { ....
title: {
text: '(%)',
rotation: 0,
x: 10,
y: 5,
align: 'high'
},
}

As for the x axis, we thicken the axis line with a red color and remove the interval ticks:

xAxis: { ....
lineColor: '#CC2929',
lineWidth: 4,
tickWidth: 0,
offset: 2
}

For the chart title, we move the title to the right of the chart, increase the margin between the chart and the title, and then adopt a different font for the title:

title: {
text: 'Population ages 65 and over (% of total) -
Japan ',
margin: 40,
align: 'right',
style: {
fontFamily: 'palatino'
}
}

After that we are going to modify the whole series presentation, we first set the chart.type property from ‘line‘ to ‘areaspline‘. Notice that setting the properties inside this series object will overwrite the same properties defined in plotOptions.areaspline and so on in plotOptions.series.

Since so far there is only one series in the graph, there is no need to display the legend box. We can disable it with the showInLegend property. We then smarten the area part with gradient color and the spline with a darker color:

series: [{
showInLegend: false,
lineColor: '#145252',
fillColor: {
linearGradient: {
x1: 0, y1: 0,
x2: 0, y2: 1
},
stops:[ [ 0.0, '#248F8F' ] ,
[ 0.7, '#70DBDB' ],
[ 1.0, '#EBFAFA' ] ]
},
data: [ ... ]
}]

After that, we introduce a couple of data labels along the line to indicate that the ranking of old age population has increased over time. We use the values in the series data array corresponding to the year 1995 and 2010, and then convert the numerical value entries into data point objects. Since we only want to show point markers for these two years, we turn off markers globally in plotOptions.series. marker.enabled and set the marker on, individually inside the point objects accompanied with style settings:

plotOptions: {
series: {
marker: {
enabled: false
}
}
},
series: [{ ...,
data:[ 9, 9, 9, ...,
{ marker: {
radius: 2,
lineColor: '#CC2929',
lineWidth: 2,
fillColor: '#CC2929',
enabled: true
},
y: 14
}, 15, 15, 16, ... ]
}]

We then set a bounding box around the data labels with round corners (borderRadius) in the same border color (borderColor) as the x axis. The data label positions are then finely adjusted with the x and y options. Finally, we change the default implementation of the data label formatter. Instead of returning the point value, we print the country ranking.

series: [{ ...,
data:[ 9, 9, 9, ...,
{ marker: {
...
},
dataLabels: {
enabled: true,
borderRadius: 3,
borderColor: '#CC2929',
borderWidth: 1,
y: -23,
formatter: function() {
return "Rank: 15th";
}
},
y: 14
}, 15, 15, 16, ... ]
}]

The final touch is to apply a gray background to the chart and add extra space into spacingBottom. The extra space for spacingBottom is to avoid the credit label and x-axis label getting too close together, because we have disabled the legend box.

chart: {
renderTo: 'container',
spacingBottom: 30,
backgroundColor: '#EAEAEA'
},

When all these configurations are put together, it produces the exact chart, as shown in the screenshot at the start of this section.

Mixing line and area series

In this section we are going to explore different plots including line and area series together, as follows:

  • Projection chart, where a single trend line is joined with two series in different line styles

  • Plotting an area spline chart with another step line series

  • Exploring a stacked area spline chart, where two area spline series are stacked on top of each other

Simulating a projection chart

The projection chart has spline area with the section of real data and continues in a dashed line with projection data. To do that we separate the data into two series, one for real data and the other for projection data. The following is the series configuration code for the future data up to 2024. This data is based on the National Institute of Population and Social Security Research report (http://www.ipss.go.jp/pp-newest/e/ppfj02/ppfj02.pdf).

series: [{
name: 'project data',
type: 'spline',
showInLegend: false,
lineColor: '#145252',
dashStyle: 'Dash',
data: [ [ 2010, 23 ], [ 2011, 22.8 ],
... [ 2024, 28.5 ] ]
}]

The future series is configured as a spline in a dashed line style and the legend box is disabled, because we want to show both series as being from the same series. Then we set the future (second) series color the same as the first series. The final part is to construct the series data. As we specify the x-axis time data with the pointStart property, we need to align the projection data after 2010. There are two approaches that we can use to specify the time data in a continuous form, as follows:

  • Insert null values into the second series data array for padding to align with the real data series

  • Specify the second series data in tuples, which is an array with both time and projection data

Next we are going to use the second approach because the series presentation is simpler. The following is the screenshot only for the future data series:

The real data series is exactly the same as the graph in the screenshot at the start of the Sketching an area chart section, except without the point markers and data label decorations. The next step is to join both series together, as follows:

series: [{
name: 'real data',
type: 'areaspline',
....
}, {
name: 'project data',
type: 'spline',
....
}]

Since there is no overlap between both series data, they produce a smooth projection graph:

Contrasting spline with step line

In this section we are going to plot an area spline series with another line series but in a step presentation. The step line transverses vertically and horizontally only according to the changes in series data. It is generally used for presenting discrete data, that is, data without continuous/gradual movement.

For the purpose of showing a step line, we will continue from the first area spline example. First of all, we need to enable the legend by removing the disabled showInLegend setting and also remove dataLabels in the series data.

Next is to include a new series, Ages 0 to 14, in the chart with a default line type. Then we will change the line style slightly differently into steps. The following is the configuration for both series:

series: [{
name: 'Ages 65 and over',
type: 'areaspline',
lineColor: '#145252',
pointStart: 1980,
fillColor: {
....
},
data: [ 9, 9, 9, 10, ...., 23 ]
}, {
name: 'Ages 0 to 14',
// default type is line series
step: true,
pointStart: 1980,
data: [ 24, 23, 23, 23, 22, 22, 21,
20, 20, 19, 18, 18, 17, 17, 16, 16, 16,
15, 15, 15, 15, 14, 14, 14, 14, 14, 14,
14, 14, 13, 13 ]
}]

The following screenshot shows the second series in the stepped line style:

LEAVE A REPLY

Please enter your comment!
Please enter your name here