Bar with negative stack

author(s): Torstein Hønsi

by jeffgw

HTML

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<script src="https://code.highcharts.com/modules/accessibility.js"></script>

<figure class="highcharts-figure">
    <div id="container"></div>
</figure>

JavaScript

var data = {'categories': ['Jul 02, 2020', 'Jun 24, 2020', 'Jun 23, 2020', 'Jun 19, 2020', 'Jun 17, 2020', 'Jun 16, 2020', 'Jun 11, 2020', 'Feb 26, 2020', 'Dec 12, 2019', 'Dec 11, 2019', 'Dec 10, 2019', 'Dec 09, 2019', 'Dec 06, 2019', 'Dec 05, 2019', 'Dec 02, 2019', 'Nov 26, 2019', 'Nov 25, 2019', 'Nov 20, 2019', 'Nov 19, 2019', 'Nov 18, 2019'], 'series': [[22.0, 1.0, 10.0, 15.0, 1.0, 21.0, 0.0, 36.0, 35.0, 7.0, 6.0, 7.0, 11.0, 0.0, 0.0, 4.0, 12.0, 3.0, 0.0, 0.0], [0.0, -33.0, -5.0, -2.0, -24.0, 0.0, -25.0, 0.0, -3.0, -2.0, -9.0, -1.0, 0.0, -15.0, -27.0, -4.0, 0.0, -3.0, -9.0, -6.0]]}



Highcharts.chart('container', {
    chart: {
        type: 'bar'
    },
    title: {
        text: 'Opening Range Analysis'
    },
    subtitle: {
        text: 'Source: <a href="http://populationpyramid.net/germany/2018/">Population Pyramids of the World from 1950 to 2100</a>'
    },
    accessibility: {
        point: {
            valueDescriptionFormat: '{index}. Age {xDescription}, {value}%.'
        }
    },
    xAxis: [{
        categories: data.categories,
        reversed: false,
        labels: {
            step: 1
        }
    }, { // mirror axis on right side
        opposite: true,
        reversed: false,
        categories: data.categories,
        linkedTo: 0,
        labels: {
            step: 1
        }
    }],
    yAxis: {
        title: {
            text: 'Points'
        }
    },

    plotOptions: {
        series: {
            stacking: 'normal'
        }
    },
		credits:{
    	text:'pivotzones.com'
    },
    series: [{
        name: 'Below Open',
        color:'#ff4c4c',
        data: data.series[1]
    }, {
        name: 'Above Open',
        color:'#40d067',
        data: data.series[0]
    }]
});