Highcharts. Pie chart. DataLabels formatter

Question

I have a pie chart. And I need to format DataLabels in someway. So I use:

    dataLabels: {
                 useHTML : true,
                 formatter: function () {
                     if(this.point.id == 'razr') {                                       
                     return '<div><b>' + this.point.y + '</b></div><div style="left: -140px; text-align: center; position: absolute"><b>sum is:<br/>' + this.point.summ + ' </b></div>';
                } else return '<b>' + this.point.y + '<b>';
             }
}

And what I got:

pie

My problem is here style="left: -140px;. The position is static. I can't find any way to position my sum label at the center of a green point of a chart. I've been searching the properties of a point (like plotX, graphic attr), nothing helps. If I remove style="left: -140px; datalabel will moves to the right. How can I get coordinates of my green point?

@PandiyanCool Thank you, but my project is difficult. Chart div located at header.php, chart data sends from request.php to functions.js via jsonPost... So I guess it's not a good idea. — Daria

Paweł Fus Paweł Fus · Accepted Answer · 2015-05-07T11:53:09

To be honest, it's not easy. I see two possible solutions:

1) Easy (but dirty workaround): create second pie chart under the first one with the same values, but render just one label. Then the second pie chart can have dataLabel inside the slice.

2) Hard (more generic solution): calculate required top/left offsets. It's hard because you don't know bounding box of the label. I suggest to set fixed width+height for that part of the label - so you can find center of that label's part. Then calculate position using series.center and point.labelPos arrays. These are inner options and can change between versions, so keep an eye on these options before upgrading. Example: http://jsfiddle.net/zwb5toe9/2/

            dataLabels: {
                useHTML: true,
                formatter: function () {
                    var point = this.point,
                        width = 50,
                        height = 50,
                        series = point.series,
                        center = series.center,               //center of the pie
                        startX = point.labelPos[4],           //connector X starts here
                        endX = point.labelPos[0] + 5,         //connector X ends here
                        left =  -(endX - startX + width / 2), //center label over right edge
                        startY = point.labelPos[5],           //connector Y starts here
                        endY = point.labelPos[1] - 5,         //connector Y ends here
                        top =  -(endY - startY + height / 2); //center label over right edge


                    // now move inside the slice:
                    left += (center[0] - startX)/2;
                    top += (center[1] - startY)/2;

                    if (point.id == 'razr') {
                        console.log(this);
                        return '<div><b>' + point.y + '</b></div><div style="width: ' + width + 'px; left:' + left + 'px;top:' + top + 'px; text-align: center; position: absolute"><b>sum is:<br/>' + point.summ + ' </b></div>';
                    } else return '<b>' + point.y + '<b>';
                }
            }

Highcharts. Pie chart. DataLabels formatter

1 Answers