Skip to content

June 19, 2012


How to make a projection chart in Highcharts

by Joe Kuan

Suppose we have a time series which contains current and future data, we can plot a projection chart like the following screenshot:

The way to do that is to separate the time series data into two parts to simulate a single series: current and future. Then we plot the future data in the second series with different line style. However, we should keep the line color same as the first series to show the continuity. There are two ways to align the second series along with the first series in the x-axis.

  1. Insert null values in the 2nd series data array for padding along the x-axis.
  2. Simply specify the 2nd series data array in the form of tuple – x and y values
Note that in order to make both series appeared continuous in the chart, I make both series share a common point. In this example, it is the value 78.6 with the year value 2011 in the end and the start of current and future series respectively. The following shows the code in later approach
            series: [{
                name: 'Current',
                type: 'areaspline',
                color: '#4572A7',
                data: [ 76.9, 77.2, 77.4, 77.6, 78.1, 78.5, 78.6 ]
            }, {
                name: 'Future',
                dashStyle: 'dot',
                color: '#4572A7',
                data: [ [ 2011, 78.6 ], [ 2012, 78.9 ], [ 2013, 79.2 ], [ 2014, 79.4 ], [ 2015, 79.7 ] ]

You can play with this chart configuration in jsFiddle. Enjoy

1 Comment Post a comment
  1. Feb 16 2016

    Great! Thank you!


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Note: HTML is allowed. Your email address will never be published.

Subscribe to comments

%d bloggers like this: