CEO column chart - dual colour

easyJet bar

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: 1110px; height: 400px; margin: 0 auto"></div>

JavaScript

$(function () {
    $('#container').highcharts({
        legend: {
        itemStyle: {
                color: '#333',
                fontSize: '14px',
                fontFamily: 'Open Sans',
                fontWeight: 'normal'
        }
        },
        chart: {
            type: 'column',
        height: 400,
        width: 1300
        },
        title: {
            text: ' '
        },
        xAxis: {
        categories: ['Country 1', 'Country 2', 'Country 3', 'Country 4', 'Country 5', 'Country 6', 'Country 7', 'Country 8', 'Country 9', 'Country 10', 'Country 11', 'Country 12', 'Country 13', 'Country 14', 'Country 15', 'Country 16', 'Country 17', 'Country 18', 'Country 19', 'Country 20', 'Country 21', 'Country 22', 'Country 23', 'Country 24', 'Country 25', 'Country 26', 'Country 27', 'Country 28', 'Country 29', 'Country 30'],
                labels: {
                style: {
                color: '#333',
                fontSize: '15px',
                fontFamily: 'Open Sans'
                }
            },
                    tickLength: 0,
        },
        yAxis: {
        labels: {
                style: {
                color: '#333',
                fontSize: '15px',
                fontFamily: 'Open Sans'
                }
            },
                    tickLength: 0,
            min: 0,
                    gridLineColor: '#aec4db',
            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: {
                series: {
            groupPadding: 0.11
        },
        
            column: {
      ...