javascript - Highcharts: Placement of data labels in the middle of sections of Pie Chart -

i want data labels of pie chart displayed in middle of sections irrespective of:

1. whether section has been sliced or not
2. whether size attribute in plotoptions has been mentioned or not

solution 1

for this, tried using distance attribute of plotoptions. got radius series[0].points[0].shapeargs.r in load() event of chart. , use following:

series[0].update({     datalabels: {         distance: -(radius/2)     } }); 

http://jsfiddle.net/k94x958d/2/

but poses 2 problem: pie chart loading animation lost , if section sliced, data labels not placed correctly

http://jsfiddle.net/k94x958d/3/

solution 2

to resolve animation issue, tried using above logic distance , setting in series[0].options.datalabels in overridden drawdatalabels() method of highcharts library. did not work.

is there way can achieve placement of data labels in middle of pie sections irrespective of size, slicing etc?

we can use following code in load event:

 series[0].update({     animation: true,     datalabels: {         distance: -(series[0].points[0].shapeargs.r/2)      }  });   _.each( series[0].points, function( point ) {     var x = point.slicedtranslation.translatex + point.datalabel.translatex,         y = point.slicedtranslation.translatey + point.datalabel.translatey;      point.datalabel.attr( {         transform: 'translate(' + x + ',' + y + ')'     } );  }); 

the above code solves problem of slicing , sizing. seems calling attr() preserves animation. problem still remains animation lost due calling update().

[edit] way data labels have been translated because of slicing, there way translate them middle of sections using attr()?

[edit] solved.. put animation: true in update().