Custom bar chart text with Highcharts

Question

Im creating a stacked Highcharts bar chart. Within each bar, I want to have custom text. However, highcharts is only displaying the data number.

The fiddle is here.

My code is:

$(function () {
    $('#container').highcharts({
        chart: {
            type: 'bar'
        },
        title: {
            text: 'Stacked bar chart'
        },
        xAxis: {
            categories: ['Apples', 'Oranges']
        },
        yAxis: {
            min: 0,
            title: {
                text: 'Total fruit consumption'
            }
        },
        legend: {
            reversed: true
        },
        plotOptions: {
            series: {
                stacking: 'normal'
            },
            bar: {
                dataLabels: {
                enabled: true
              }
            }
        },
        series: [{
            name: 'John',
            data: [['test 1', 5], ['test 2', 3]]
        }, {
            name: 'Jane',
            data: [['test 3', 2], ['test 4', 2]]
        }]
    });
});

I want 'test 1', 'test 2' etc is appear within the bar chart (they do appear on the popover). But instead, the data numbers, i.e. 5, 3, 2, ans 2, appears there. Can this be done?

Answer 1

See working fiddle with your data here

Use formatter function :

 bar: {
            dataLabels: {            
        formatter: function(){
        return this.point.name
        },
            enabled: true
          }
        }