CEO column chart - dual colour

by Danielle Parkinson

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>

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

JavaScript

$(function () {
    $('#container').highcharts({
        legend: {
        itemStyle: {
        fontFamily: 'Arial',
        fontSize: '12px',
        fontWeight: 'regular'
        }
        },
        chart: {
            type: 'column',
            width: 1000,
            height: 400
        },
        title: {
            text: ' '
        },
        xAxis: {
        labels: {
                style: {
                    fontFamily: 'Arial',
                    fontSize: '12px',
                    color: '#333333',
                }
            },
            categories: [
            '10% or higher',
            '5 to 9.99%',
            '2 to 4.99%',
            '0.01 to 1.99%',
            '0%',
            'Negative 0.01 to 1.99%',
            'Negative 2 to 4.99%',
            'Negative 5 to 9.99%',
            'Negative 10% or lower',
            ]
        },
        yAxis: {
        labels: {
                style: {
                    fontFamily: 'Arial',
                    fontSize: '12px',
                    color: '#333333',
                }
            },
            min: 0,
            title: {
                text: ' '
            },
            stackLabels: {
                enabled: false,
                style: {
                    fontWeight: 'bold',
                    color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray'
                }
            }
        },
       
        tooltip: {
            headerFormat: '<b>{point.x}</b><br/>',
            pointFormat: '{series.name}: {point.y}<br/>Total: {point.stackTotal}'
        },
        plotOptions: {
        
            column: {
                stacking: 'normal',
                dataLabels: {
                    enabled: false,
                    color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white',
                    style: {
                       textShadow: '0 0 3px black'
                    }
                }
            }
        },
   ...