How do i reorder these HighCharts plots?

I'm trying to display a number of distributions using HighCharts in the same image. [1]: https://imgur.com/a/cwQsyW5

Here is the corresponding JSFiddle: https://jsfiddle.net/9ayr84f0/

     plotOptions: {
                areasplinerange: {
                    marker: '{enabled: false}',
                    states: '{hover: {enabled: false}}' 
                    
                    
                },
                dataSorting: {
                    enabled: true,
                    sortKey: 'zIndex'
                },

The problem i'm currently having is that the ordering/ allocation of plots on the y-axis seems predetermined by the HighCharts library, and not based on user input. I don't mean how and where the plots overlap (which is solvable by better utilizing the zIndex), but for example why the "orange" plot always gets allocated to the bottom slot/ y-axis=0, and "chocolate" always on top/ y-axis=8.

I'd like for the plots to follow the legend ordering.(from top to bottom: vanilla, coconut, strawberry, etc.)

I've tried using dataSorting with the zIndex as a key value, yet the ordering never changed. (The ordering of the legend did.) Does anyone see what i might be doing wrong or might have any tips?

Solution

The order depends on your data. The second and third value in the data array determines the position on the y-axis.

data: [
    // x, y-low, y-high
    [0, 0, 5],
    [1, 9, 1],
    [2, 5, 2]
]

Live demo: https://jsfiddle.net/BlackLabel/9kjr4vws/

API Reference: https://api.highcharts.com/highcharts/series.areasplinerange.data