onzinsky onzinsky - 6 months ago 19
Javascript Question

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

Answer

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/