Highcharts stacked bar chart hide data labels not to overlap

Question

Please check out this: http://jsfiddle.net/HA5xE/

So, I have stacked bar chart and I want to hide data labels when they don't fit in the area. for Example in Category 8, not to have data label "4" at all.

I saw: http://api.highcharts.com/highcharts#plotOptions.bar.dataLabels.crop and as I understand it should be done automatically, but for some reason doesn't work.

I tried to calculate series are width (or height) in pixels to control show/hide by formatter function, but I was unable to get bar series width.

formatter: function() {
if(this.percentage.toFixed(0)>0)
    return this.percentage.toFixed(0);
else 
    return '';
}

Thanks for your help in advance.

FIXED:

formatter: function() {
if(this.point.yBottom - this.point.plotY>13)
    return this.percentage.toFixed(0);
else 
    return '';
}

Sebastian Bochan Sebastian Bochan · Accepted Answer · 2013-07-04T09:40:47

You can iterate in each point in each serie, then check width of bar and destroy label if widht is smaller than ie.15px .

http://jsfiddle.net/HA5xE/1/

 $.each(chart.series,function(i,serie){
        $.each(serie.data,function(j,data){
            if(data.yBottom - data.plotY < 15)
                data.dataLabel.destroy();
        });
    });

Highcharts stacked bar chart hide data labels not to overlap

1 Answers