Stacked highcharts on the same graph, with a new y axis each time?

Question

I'm not sure if this is possible, but I have separate, stacked highcharts. I'd like to keep them on the same graph, but stacked on top of each other, resetting the y axis to 0 each time. Here is a Fiddle of them all separate:

I've also attached an example graph of what I am imagining. The blue horizontal lines represent each new chart series's 0 point.

Sample graph example

//random line so it will let me post the fiddle. Ignore this

Answer 1

You are making highchart for each series in the array seriesAll by looping through it and that is causing it to create seperate charts for each series. If you just create 1 highchart and give it the series array, it will plot all the series on the same chart. Here is a modified version of your code to give you what your looking for.

https://codepen.io/Nasir_T/pen/zdzdrW

Also please check out the docs of highcharts and it will give you all the information you need. Eg here is the combined charts link:

https://www.highcharts.com/docs/chart-and-series-types/combining-chart-types

[Edit for stacking option]

You can also stack them on top of each other by setting the plotOption > series > stacking properties. eg

plotOptions: {
    series: {
        stacking: 'normal'
    }
}

Learn more on stacking in the following doc link.

http://api.highcharts.com/highcharts/plotOptions.area.stacking

Hope this helps.

Answer 2

You can also achieve a similar effect using different height of multiple yAxis.

Example:
http://jsfiddle.net/6b9prwjc/