Stacked Column Chart

Showing fruit consumption

by maritavindedal

HTML

<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>
    <p>The stacked column chart is displaying fictional fruit consumption data per person.</p>
</figure>

JavaScript

Highcharts.chart('container', {
    chart: {
        type: 'column'
    },
    title: {
        text: 'Total fruit consumption'
    },
    xAxis: {
        categories: ['Ted', 'Øystein', 'Marita'],
        accessibility: {
            description: 'Persons'
        }
    },
    yAxis: {
        title: {
            text: 'Fruits Eaten'
        },
        stackLabels: {
            enabled: true

        }
    },
    plotOptions: {
        column: {
            stacking: 'normal'
        },
        dataLabels: {
            enabled: true
        }

    },
    series: [{
        name: 'Watermelon',
        data: [3, 2, 4]
    }, {
        name: 'Blackberries',
        data: [2, 3, 1]
    }, {
        name: 'Mango',
        data: [1, 4, 2]
    }, {
        name: 'Blueberries',
        data: [4, 1, 3]
    }, {
        name: 'Kiwi',
        data: [2, 3, 1]
    }]
});