CODEWITHSUNDEEP
javascripthighcharts
Jamiec
Jamiec

Reputation: 136104

Using datetime axes, but with changing scales

I am trying to display some data using highcharts which consists of multiple series, however all series share the same sort of data. The xAxis is date-based, and the yAxis is a percentage.

The problem I am having is that the series have a different scale for the xAxis

I would like to show this data on one chart, but with roughly the same amount of space for the historical and future data, which means that the historical is compressed in relation to the future.

I have tried to achieve this using 2 different xAxes, and each series relating back to an xAxis with different pointStart settings. 

...
series: [{
            name: 'Past',
            color: 'Green',
            pointStart: Date.UTC(2014,6,1),
            pointInterval: 24 * 3600 * 1000, // one day
            data: [...]
     },
     {
            name: 'Future',
            color:'blue',
            pointStart: Date.UTC(2014,7,31),
            pointInterval: 24 * 3600 * 1000 * 365, // one year
            xAxis:1,
            data:[...]

     }
     ...

This ends up looking like this:

not what I want jsFiddle: http://jsfiddle.net/dq4d0w2o/

I have roughly mocked up what I would like this to look like:

enter image description here

As you can see the I would like the xAxis to be contiguous, historical data is daily but at the point where we get to the present, the scale changes to be annual.

Upvotes: 1

Views: 51

Answers (1)

Sebastian Bochan
Sebastian Bochan

Reputation: 37578

You need to combine a width / left parameter on xAxis.

See the example: http://jsfiddle.net/sbochan/dq4d0w2o/1

Upvotes: 2

Related Questions