Centering a data label in Highcharts Bar Chart

2
votes

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.

3
javascripthighcharts

3 Answers

4
votes

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

2
votes

I took a quick look at the docs and your example and came up with brute force solution using a dataLabel on your series. Apparently aligning to center will center on the y (e.g. of 3 above). So, I just shifted it over using the x offset on the datalabel. Not really a proper solution but may get you thinking in the right direction:

series: [{
    min: 0,
    max: versions.length + 1,
    data: [ { low: 1, y: 3 }, { low: 2, y: 4 }, { low: 3, y: 5 }, { low: 3, y: 5 } ],
    dataLabels: {
        enabled: true,
        color: '#FFFFFF',
        align: 'right',
        x: -130,
        y: 10,
        formatter: function() {
            return  versions[this.y - 1];
        },
        style: {
            fontSize: '13px',
            fontFamily: 'Verdana, sans-serif'
        }
    }                                    
}]

Wayback Machine Archived Version - Not functional, but the code is there

0
votes

Try this:

plotOptions: {
       series: {
       dataLabels: {                    
            enabled: true,
            color: '#000000',
            useHTML:true,
            style: {
                    fontSize: '13px',
                    fontFamily: 'Verdana, sans-serif'
                    },
            formatter:function(){
               return '<div align="center"><b><span>' + this.point.options.name + '</b><br />'+this.x+' '+this.y+'</span></div>';
 },