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:

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?

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:

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?

• javascript
• jquery
• charts
• highcharts

Share Improve this question Follow asked May 6, 2015 at 11:20 DariaDaria 8611313 silver badges3232 bronze badges 2

• if possible share us fiddle link – Pandiyan Cool Commented May 6, 2015 at 14:09
• @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 Commented May 6, 2015 at 14:54

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 3

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/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>';
                }
            }