dataLabel text align in highchart

2
votes

I want to dynamically align the dataLabel in center of two bars.

The data which is visible dynamically appears either for green or the blue bar by using :

dataLabels: {
                enabled: true,
                formatter: function() {
                    return this.point.avg;
                }
            }

I dont want to use x and y attributes, as data can appear for any of the bar. Hope below mentioned image gives you a clear picture.

enter image description here

Note: The value of avg_fare does not represent the bar's value.

Can anyone help me to achieve this usecase?

Thanks

2
highchartsbar-chart

2 Answers

3
votes

You can use the dataLabels.y parameter to offset the label into the position you desire.

      series: [{
            data: series1,
            dataLabels: {
                enabled: true,                    
                y: -14 // move this down
            }
        }, {
            data: series2,
            dataLabels: {
                enabled: true,                    
                y: 14 // move this one up
            }
        }]

Here's a fiddle.

enter image description here

1
votes

enable datalables only for one. and disable for all the remaining ones. position that single label as you want by seetting x and y Values

            dataLabels: {
                align:'left',
                enabled: true,                    
                x: 20,
                y: -10
            },

you can refer this as example : http://jsfiddle.net/fMdk3/

Hope this will help you