Highcharts demo stacked column overlapping

by Kieran Dang

HTML

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

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

JavaScript

$(function() {
    Highcharts.setOptions({
        lang: {
            thousandsSep: ','
        }
    });

    $('#container').highcharts({
        chart: {
            type: 'column'
        },
        title: {
            text: 'User accounts'
        },
        xAxis: {
            categories: ['Registered accounts', '30-day active accounts']
        },
        yAxis: [{
            min: 0,
            title: {
                text: 'Accounts'
            }
        }],
        plotOptions: {
            column: {
                stacking: 'normal',
                grouping: false,
                shadow: false,
                borderWidth: 0,
            },
            scatter: {
                dataLabels: {
                    enabled: true,
                    formatter: function() {
                        return Highcharts.numberFormat(this.point.val, 0, '.', ',');
                    }
                },
                tooltip: {
                    pointFormat: '<b>{point.val:,.0f}</b>'
                }
            }
        },
        series: [{
                name: 'Total',
                data: [{
                    name: 'Registered accounts',
                    y: 212684,
                }],
                color: 'rgb(230, 205, 165, 0.6)',
                stack: 'total'
            },
            {
                name: 'On box',
                data: [{
                    name: 'Registered accounts',
                    y: 22202,
                }],
                pointPadding: 0.4,
                color: '#ffb51e',
                stack: 'ok'
            }, {
                name: 'On mobile',
                data: [{
                    name: 'Registered accounts',
                    y: 190482,
                }],
                pointPadding: 0.4,
                showInLegend: false,
                color: '#30CBFF',
                stack: 'ok'
            }, {
                name: 'Active',
                data: [{
                 ...