Highcharts Stacked Range z-Index

Question

Looking at this script: (JsFiddle isn't displaying the graphs for me, for some reason, but it works as html)

I have two overlapping ranges but I'm unable to have one pair bring blue to the front, the other black. Click on 'Task 2' to see that the above blue range is hidden.

I've tried using the z-index option but I can only set it by series not by pair.

Full code:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/highcharts-more.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<div id="container1" style="min-width: 400px; height: 200px; margin: 0 auto"></div>

<div id="container2" style="min-width: 400px; height: 200px; margin: 0 auto"></div>

<script>
$(function () {

    window.chart1 = new Highcharts.Chart({

        chart: {
            renderTo: 'container1',
            type: 'columnrange',
            inverted: true
        },

        title: {
            text: "Top Chart"
        },

        xAxis: {
            categories: ['Customer A', 'Customer B']
        },

        yAxis: {
            labels: {
                formatter: function () {
                    return Math.abs(this.value);
                }
            }
        },
         tooltip: {
            formatter: function () {
                return '<b>' + this.series.name + ', age ' + this.point.category + '</b><br/>' +
                    'Population: ' + Highcharts.numberFormat(Math.abs(this.point.y), 0);
            }
        },

        legend: {
            enabled: true
        },

        plotOptions: {
            columnrange: {
                grouping: false
            }
        },

        series: [{
            name: 'Task 1',
            stack: 'Tasks',
            data: [{
                x: 0,
                low: -5,
                high: 5
            }, {
                x: 1,
                low: -15,
                high: 15
            }]
        }, {
            name: 'Task 2',
            stack: 'Tasks',
            data: [{
                x: 0,
                low: -10,
                high: 10
            }, {
                x: 1,
                low: -3,
                high: 3
            }]
        }]

    });


});
</script>

Answer 1

One of the way for achieving this is to provide pointPadding to specific series in charts. This option allows both bars to be visible even it is overlapping each other.

plunker demo

   series: [{
        name: 'Task 1',
        stack: 'Tasks',
        data: [{
            x: 0,
            low: -5,
            high: 5
        }, {
            x: 1,
            low: -15,
            high: 15
        }]
    }, {
        name: 'Task 2',
        stack: 'Tasks',
        pointPadding: 0.3, /*pointPadding to specific series*/
        data: [{
            x: 0,
            low: -10,
            high: 10
        }, {
            x: 1,
            low: -3,
            high: 3
        }]
    }]