How to draw arrows on a pie-chart with Highcharts? - highcharts

Question

I am using a pie-chart of highchart and some settings are:-
pie: {
borderColor: '#000000',
innerSize: '60%'
},
series: [{
data: [
['projected Income', 44.2],
['Discount', 26.6],
['Annual Loss', 20]
]}]
}
Now my requirement is to show the arrow on the Annual loss graph as shown in picture of blue colour. Is it
possible to implement this in pie chart of Highcharts?
I have seen many
examples but those are explained for Line-Charts.

Answer 1

For line/scatter/bars you could use annotations but they are not available for pie/donut charts.
So using SVGRenderer you can add extra SVG elements to your pie/donut chart.
In my example below I draw a line using an SVG marker as arrow:
Highcharts.chart('container', {
chart: {
type: 'pie'
},
title: {
text: "My Title"
},
tooltip: {
pointFormat: '{series.name}: <b>{point.y:.1f}</b>'
},
plotOptions: {
pie: {
borderColor: '#000000',
innerSize: '60%',
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: false,
format: '<b>{point.name}</b>: {point.y:.1f}',
}
}
},
series: [{
data: [
['projected Income', 44.2],
['Discount', 26.6],
['Annual Loss', 20]
]
}]
}, function(chart) {
var point = chart.series[0].data[2];
var dx = chart.plotBox.x,
dy = chart.plotBox.y;
var radius = point.shapeArgs.r;
var angle = (point.shapeArgs.start + point.shapeArgs.end) / 2,
x = (radius * .9 * Math.cos(angle)) + point.shapeArgs.x,
y = (radius * .9 * Math.sin(angle)) + point.shapeArgs.y;
var x2 = (radius * 1.5 * Math.cos(angle)) + point.shapeArgs.x,
y2 = (radius * 1.5 * Math.sin(angle)) + point.shapeArgs.y;
var text = chart.renderer.text(
'Annual Loss',
x2 + dx, y2 + dy
).attr({
zIndex: 5
}).add(),
box = text.getBBox();
text.attr({
dx: -box.width / 2
});
chart.renderer.rect(box.x - 5 - box.width / 2, box.y - 5, box.width + 10, box.height + 10, 5).attr({
fill: '#FFFFEF',
'stroke': 'red',
'stroke-width': 1,
zIndex: 4
}).add();
console.log(point, chart);
chart.renderer.path({
'stroke': '#ff0000',
'stroke-width': 3,
'marker-end': "url(#markerArrow2)",
zIndex: 3,
'd': ['M', x2 + dx, y2 + dy, 'L', x + dx, y + dy]
}).add();
});
<script src="https://code.highcharts.com/highcharts.js"></script>
<div id="container" style="min-width: 310px; height: 400px; max-width: 600px; margin: 0 auto"></div>
<svg style="height: 0">
<defs>
<marker id="markerArrow" markerWidth="13" markerHeight="13" refX="2" refY="6"
orient="auto">
<path d="M2,2 L2,11 L10,6 L2,2 Z" style="fill: red;" />
</marker>
<marker id="markerArrow2" markerWidth="10" markerHeight="10" refX="6" refY="6"
orient="auto">
<path d="M2,2 L10,6 L2,10 L6,6 L2,2 Z" style="fill: red;" />
</marker>
</defs>
</svg>
Here is the link to a jsFiddle: https://jsfiddle.net/beaver71/k091v22e/