Highcharts datalabel for each stacked column

Question

I've produced the following chart using HighCharts:

Where the red numbers above each column are pulled from the series data for each quarter. I've used dataLabels with custom data to achieve this:

var options = {
    chart: {
        type: 'column'
    },
    credits: {
        enabled: false
    },
    title: {
        text: null
    },
    xAxis: {
        categories: [
            'Q1',
            'Q2',
            'Q3',
            'Q4'
        ],
        title: {
            text: 'Year Quarter',
            margin: 20,
            style: {
                fontFamily: 'Roboto',
                fontSize: '14px',
                fontWeight: '600'
            }
        },
        labels: {
            style: {
                fontFamily: 'Roboto',
                fontSize: '12px'
            }
        }
    },
    yAxis: [{
        min: 0,
        allowDecimals: false,
        title: {
            text: 'No. Incidents',
            margin: 20,
            style: {
                fontFamily: 'Roboto',
                fontSize: '14px',
                fontWeight: '600'
            }
        },
        labels: {
            style: {
                fontFamily: 'Roboto',
                fontSize: '12px'
            }
        }
    }],
    legend: {
        layout: 'vertical',
        align: 'right',
        verticalAlign: 'middle',
        borderWidth: 0
    },
    plotOptions: {
        column: {
            stacking: 'normal',
            dataLabels: {
                enabled: true,
                align: 'left',
                crop: false,
                style: {
                    color: '#ff0000',
                    fontWeight: 'bold'
                },
                formatter: function() {
                    return this.series.options.cost
                },
                y: -20,
                x: 0,
                verticalAlign: 'top'
            }
        }
    },
    series: [{
        "name": "Plant",
        "data": [11,34,24,11],
        "cost": 23
    },
    {
        "name": "Ship",
        "data": [23,13,15,24],
        "cost": 34,
        "dataLabels": {
            enabled: false
        }
    },
    {
        "name": "Equipment",
        "data": [23,16,24,42],
        "cost": 33,
        "dataLabels": {
            enabled: false
        }
    },
    {
        "name": "Cargo",
        "data": [23,34,33,24],
        "cost": 24,
        "dataLabels": {
            enabled: false
        }
    }]
}

However as you can see it shows 23 for all columns instead of the cost for each individual series. I've also disabled the datalabels for the other 3 series as otherwise it puts the datalabels on each stack rather than each column.

How can I show the correct cost for each column as per my screenshot?

The reason of that is you disable datalabels for other series, so each time iterate on each point from first serie, value is returned. Better is using stacklabels formatter. — Sebastian Bochan

Kacper Madej Kacper Madej · Accepted Answer · 2015-11-23T12:48:40

Labels for stacks can be set through yAxis and are called stackLabels.

    ...
    yAxis: [{
        stackLabels: {
            enabled: true,
            align: 'right',
            style: {
                color: '#ff0000',
                fontWeight: 'bold'
            },
            x: -5,
            verticalAlign: 'top'
        }
    ...

JSFiddle: http://jsfiddle.net/8e08b387/1/

Highcharts datalabel for each stacked column

1 Answers