High Chart Data label Formatter not working properly

Question

I am developing chart with the help of Highchart but data label is not showing correct. On each bar I want to write "hello, hello1, hello2 etc." on the bars but currently it's showing Y axis value.

Check on js fiddle http://jsfiddle.net/NM2Cp/251/

js code is

var count = 0;
var options = {
    exporting: {
        url: 'http://export.highcharts.com/'
    },
    chart: {
        type: 'column'
    },
    title: {
        text: 'Monthly Average Rainfall'
    },
    legend:{
        enabled:false
    },
    subtitle: {
        text: 'Source: WorldClimate.com'
    },
    xAxis: {
        categories: [
            'Attitude',
            'Identity',
            'Role',
            'Agility',
            'Fairness',
            'Conflict'
        ],
        crosshair: true
    },
    yAxis: {
        min: 0,
        max:100,
        tickInterval:10,
        title: {
            text: 'Rainfall (mm)'
        }
    },
    tooltip: {
        headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
        pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
            '<td style="padding:0"><b>{point.y:.1f} mm</b></td></tr>',
        footerFormat: '</table>',
        shared: true,
        useHTML: true
    },
    plotOptions: {
        column: {
            pointPadding: 0.2,
            borderWidth: 0
        },
        series: {
            dataLabels: {
                overflow: 'none',
                crop: false,
                align:'left',
                enabled: true,
                color: '#000',
                style: {fontWeight: 'bolder'},
                formatter: function() {
                    return "hello";
                },  
                inside: true,
                rotation: 270
            },
            pointPadding: 0.1,
            groupPadding: 0.1
        }
    },
    series: [{
        //name: 'Subcategory1',
        data: [{ y: 19.9, color: '#BF0B23'}, { y: 59.9, color: '#01DFD7'}, { y: 49.9, color: '#8258FA'}, { y: 59.9, color: '#04B404'}, { y: 36.9, color: '#B404AE'}, { y: 32.9, color: '#F6CECE'}]
    }, {
        // name: 'Subcategory2',
        data: [{ y: 83.9, color: '#BF0B23'}, { y: 49.9, color: '#01DFD7'}, { y: 29.9, color: '#8258FA'}, { y: 89.9, color: '#04B404'}, { y: 49.9, color: '#B404AE'}, { y: 89.9, color: '#F6CECE'}]
    }, {
        //name: 'Subcategory3',
        data: [{ y: 95.9, color: '#BF0B23'}, { y: 49.9, color: '#01DFD7'}, { y: 15.9, color: '#8258FA'}, { y: 79.9, color: '#04B404'}, { y: 76.9, color: '#B404AE'},{ y: 75.9, color: '#F6CECE'}]
    }]
};
var obj = {},
    exportUrl = options.exporting.url;
obj.options = JSON.stringify(options);
obj.type = 'image/png';
obj.async = true;

$.ajax({
    type: 'post',
    url: exportUrl,
    data: obj,
    success: function (data) {
        var imgContainer = $("#imgContainer");
        $('<img>').attr('src', exportUrl + data).attr('width', '250px').appendTo(imgContainer);
        $('<a>or Download Here</a>').attr('href', exportUrl + data).appendTo(imgContainer);
    }
});

Image on high chart is

Hello 1/2/3 should be extraced from param or incremented per each category or globally ? — Sebastian Bochan

allu allu · Accepted Answer · 2016-01-08T11:43:50

Instead of using (in plotOptions -> series -> dataLabels):

formatter: function() ...

Use this:

format: "Hello",

Please refer to: http://api.highcharts.com/highcharts#plotOptions.bar.dataLabels

High Chart Data label Formatter not working properly

1 Answers