Search code examples
javascripthighchartsstacked-area-chart

Highcharts stacking misfunctioning


I'm having trouble that i think relates to the "stacking" property of highcharts' area chart.

The thing is my values only go up to 120 max, but the Y column legend marks higher. Since i'm not being able to explain myself quite correctly i'll post the jsfiddle.

stacking:'normal',

http://jsfiddle.net/RFPUH/141/

As you can see there, the highest value i have is 120, but the Y column goes up until 210.. this is confusing and isn't good enough.

When i remove the "staking" property from the chart, the Y column problem disappears, but it doesn't work as desired either. I wanted to post a pic but i've no rep :(

stacking: null,

http://jsfiddle.net/RFPUH/142/

Does anyone know what im doing wrong??

thanks in advance guys!!!

Solution
http://jsfiddle.net/kfujdhou/3


Solution

  • stacking gives you the sum of all series of the type "area" on the Y axis. so the stacking behaves as it should (yMax=Min+Max ~200 in your example, JP is a line and not counted towards the stacking).

    Could you describe the desired output?

    I suppose you would like something like this:

    series: [{
            name: 'JP',
            data: averages,
            zIndex: 1,
            marker: {
                fillColor: 'white',
                lineWidth: 2,
                lineColor: Highcharts.getOptions().colors[0]
            }
        }, {
            name: 'Range',
            data: ranges,
            type: 'arearange',
            lineWidth: 0,
            linkedTo: ':previous',
            color: Highcharts.getOptions().colors[0],
            fillOpacity: 0.3,
            zIndex: 0
        }]
    

    http://jsfiddle.net/kfujdhou/