Javascript – Centering a data label in Highcharts Bar Chart

highchartsjavascript

I'm trying to center a label within a bar chart in Highcharts. In my case within an inverted waterfall chart which you can see here:

http://jsfiddle.net/mUD9a/3/

I'm trying to horizontally center a data label within each bar, such that if a data point in the series has a low of 1, and y of 3, the point would sit at 2. I tried the workaround suggested in the high charts docs here:

http://jsfiddle.net/gh/get/jquery/1.7.1/highslide-software/highcharts.com/tree/master/samples/highcharts/plotoptions/series-datalabels-y/

With the latest version, it doesn't seem to affect the rendering by changing the options in the formatter callback.

Any help is appreciated.

Best Answer

I know this is old, but I just needed this, so here's how I did it. The solution I settled on is a combo of How to position datalabel at the base of bar series and alba lions example, using stackLabels instead of of dataLabels. 

yAxis:{
    stackLabels: {
        style: {
            color: 'white'       // Make the labels white
        },
        enabled: true,           // Enable stack labels
        verticalAlign: 'middle', // Position them vertically in the middle
        align: 'center',            // Align them to the left edge of the bar
        formatter: function() {
            return categories[this.x];
        }
    }
}

See jsfiddle

Related Topic