Search code examples
javascripthighchartsstacked-area-chart

Highchart stacked area series is not showing correctly

I am having a quite interesting situation which I think is quite usual when using stacked area charts.

Situation 1 - JSFIDDLE

The situation that I currently have: enter image description here

The series that I use are are the following:

series: [{
    name: 'test1',
    data: [113864, 113864, 113864, 0, null, null, null],
    color: '#4E80BC'
}, {
    name: 'test2',
    data: [null, null, null, 87905, 87905, 87905, 87905],
    color: '#E46C0A'
}, {
    name: 'test3',
    data: [null, null, null, 14211, 14211, 14211, 14211],
    color: '#B8B8B8'
}]

You see that test1 is dropping from 113864 to 0 but it does that from 2024 till 2028. That is not the desired behaviour

Situation 2 JSFIDDLE

What I would like to achieve is the following situation:

enter image description here

The problem with this is that I can only achieve this situation by using the following serie data:

{
      name: 'test1',
      data: [113864, 113864, 113864, 113864, null, null, null],
      color: '#4E80BC'
}

Therefore I had to add another 113864 to the serie. This is not possible because I do not have that option. I can not add the 113864 again. So my question is does anyone know how I could solve this without changing the series data?

PS. Also note that using a bar charts as a solution will mess up the tooltips because it will show for each bar a tooltip instead of the whole area

Solution

  • Since you're using an area chart with square shapes, you can achieve this behavior using the step attribute (http://api.highcharts.com/highcharts/plotOptions.area.step). This squares off the edges of your area chart to produce (as you would expect from its name) a "step" effect.

    I modified your fiddle with this simple change (see http://jsfiddle.net/brightmatrix/fnove341/5/).

        plotOptions: {
        series: {
            fillOpacity: 1,
            stacking: 'normal'                
        },
        column: {
            pointPadding: 0,
            groupPadding: 0,
            borderWidth: 0, // < set this option
            connectNulls: false
        },
        area: {
            step: 'left' /* added to prevent test1 series from dropping off before 2028 */
        }
    },

    Your chart will now appear as you expect without having to change your value of 0 to null. I hope this helps!