YBS - Stacked Bar

author(s): Torstein Hønsi

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="max-width: 850px; height: 280px; margin: 0 auto"></div>

JavaScript

Highcharts.chart('container', {
    chart: {
        type: 'column',
        backgroundColor: '#f3f3f3',
    },
    title: {
        text: '  '
    },
    xAxis: {
        categories: ['Oct 16', 'Nov 16', 'Dec 16', 'Jan 17', 'Feb 17', 'Mar 17', 'Apr 17', 'May 17', 'Jun 17', 'Jul 17', 'Aug 17', 'Sep 17', 'Oct 17'],
        
                 labels: {
                style: {
                    fontFamily: 'Arial',
                    fontSize: '14px',
                    color: '#333333',
                },
                },
    },
    yAxis: {
        min: 0,
        max: 100,
        title: {
            text: ' '
        },
         labels: {
                style: {
                    fontFamily: 'Arial',
                    fontSize: '14px',
                    color: '#333333',
                },
                },
        stackLabels: {
            enabled: false,
            style: {
                fontWeight: 'normal',
                fontcolor: '#333',
            }
        }
    },
    legend: {
        layout: 'vertical',
                align: 'right',
        verticalAlign: 'middle',
        itemStyle: {
                color: '#333',
                fontSize: '14px',
                fontWeight: 'normal',
                fontFamily: 'Arial',
            }
    },
    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'
            },
            
            pointPadding: 0.2,
            groupPadding: 0.03,
            borderWidth: 0,
        }
    },
    
    series: [{
        name: 'Detractors',
        data: [24,27,24,23,23,22,27,31,31,31,30,26,25],
        color: '#b7dbc7',
    }, {
        name: 'Passives',
        data:...