Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Highcharts stacked bar chart hide data labels not to overlap

Tags:

highcharts

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 '';
}
like image 691
Irakli Avatar asked Jul 03 '13 22:07

Irakli


People also ask

How do you hide data labels?

Click the chart from which you want to remove data labels. This displays the Chart Tools, adding the Design, Layout, and Format tabs. Do one of the following: On the Layout tab, in the Labels group, click Data Labels, and then click None.

How do you move data labels to outside end position?

Click any data label once to select all of them, or double-click a specific data label you want to move. > Data Labels arrow, and select the placement option you want.

How do I reduce the space between two bars in Highcharts?

Re: Reducing the space between the bars (column range) You can for example lower the max property value (or change extremes with Axis. setExtremes()) to reduce the visible range and this way you can retain fixed pointWidth and increase space between tick at the same time.

How do you change the data labels to display only the percentage and a label position of center?

To format data labels, select your chart, and then in the Chart Design tab, click Add Chart Element > Data Labels > More Data Label Options. Click Label Options and under Label Contains, pick the options you want.


1 Answers

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();
        });
    });
like image 197
Sebastian Bochan Avatar answered Jan 03 '23 14:01

Sebastian Bochan