Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Highcharts - labels inside and outside a pie chart

Tags:

highcharts

I know it's possible to put pie chart labels either inside or outside the pie by changing plotOptions.pie.dataLabels.distance. I am trying to figure out whether it's possible to change that on a point by point basis:

if slice is smaller than 15%, place labels inside the slice

else place the label outside the slice

Is this possible in Highcharts? Below is one of my attempts, which doesn't work; the plain jsfiddle is here: http://jsfiddle.net/supertrue/q6bQP/

plotOptions: {
    pie: {
        dataLabels: {
            distance: -30,
            color: 'white',
            formatter: function() {
                if (this.y < 15 ) {
                    this.point.dataLabels.color = 'red';
                    this.point.dataLabels.distance = 20;
                    return this.point.name;
                } else {
                    return this.point.name;
                }

        }
  },
like image 713
supertrue Avatar asked Mar 05 '12 20:03

supertrue


People also ask

How do you display inside end data labels on a pie chart?

Click the chart, and then click the Chart Design tab. Click Add Chart Element and select Data Labels, and then select a location for the data label option. Note: The options will differ depending on your chart type. If you want to show your data label inside a text bubble shape, click Data Callout.

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. Different options are available for different chart types.

How do you add lines to a data label?

To add a leader line to your chart, click the label and drag it after you see the four headed arrow. If you move the data label, the leader line automatically adjusts and follows it. In earlier versions, only pie charts had this functionality—now all chart types with data labels have this.


1 Answers

This post can helps you to acomplish your work :

Is it possible to position Highcharts dataLabels depending on the value?

$.each(chart.series[0].data, function(i, point) {
    // using the value or calculating the percent        
    if(point.percentage < 30) {
        point.dataLabel.attr({y:20});
    }
});
like image 74
rolivares Avatar answered Oct 03 '22 10:10

rolivares