onzinsky onzinsky - 1 year ago 93
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.



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,


Does anyone know what im doing wrong??

thanks in advance guys!!!



Answer Source

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


Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download