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