Create a SVG object with a arrow line Highcharts - svg

Question

I need to draw a arrow line pointing to a particular point in my highcharts.
I was able to get the line drawn but not sure how to have a arrow before that being displayed.
Here is my fiddle and code.
http://jsfiddle.net/48kyq3wq/1/
$.getJSON('https://www.highcharts.com/samples/data/jsonp.php?filename=usdeur.json&callback=?', function(data) {
var callout = function(chart) {
$('.cO').remove();
var xAxis = chart.xAxis[0],
yAxis = chart.yAxis[0],
point = chart.series[0].data[100],
lineXLength = 100,
lineYLength = -50;
chart.renderer.path(['M', xAxis.toPixels(point.x), yAxis.toPixels(point.y), 'L', xAxis.toPixels(point.x) + lineXLength, yAxis.toPixels(point.y) + lineYLength,]).attr({
'stroke-width': 5,
stroke: 'red',
zIndex: 0
}).addClass('C0').add();
chart.renderer.label('Custom label', xAxis.toPixels(point.x) + lineXLength, yAxis.toPixels(point.y) + lineYLength - 22, 'rect')
.css({
color: '#FFFFFF'
})
.attr({
fill: 'rgba(0, 0, 0, 0.75)',
padding: 8,
r: 5,
width: 100,
height: 30,
zIndex: 6
}).addClass('cO')
.add();
};
Highcharts.chart('container', {
chart: {
events: {
load: function() {
callout(this);
},
redraw: function() {
callout(this);
}
}
},
xAxis: {
type: 'datetime'
},
legend: {
enabled: false
},
series: [{
data: data
}]
});
});

Answer 1

You need to create an arrow and rotate it depending on the position of point and the label.
Create a path which connects the label and the point
const x0 = label.x;
const y0 = label.y + label.height / 2;
const x1 = x;
const y1 = y;
const path = chart.renderer.path([
'M', label.x, label.y + label.height / 2,
'L', x, y,
]).attr({
'stroke-width': 1,
stroke: 'black',
zIndex: 6
}).add()
Create a method for rotating points. It will rotate the point around the top point of the arrow
function rotatePoint(c, angle, p) {
const sin = Math.sin(angle);
const cos = Math.cos(angle);
const x = p[0] - c[0];
const y = p[1] - c[1];
const nx = x * cos - y * sin;
const ny = x * sin + y * cos;
return [nx + c[0], ny + c[1]];
}
Create an arrow, find the angle between the label and the point and rotate the arrow according to the angle.
const array = [[x1 - 5, y1 - 15], [x1 + 5, y1 - 15], [x1, y1], [x1 - 5, y1- 15]]
const angle = Math.atan2(y0 - y1, x0 - x1) + 90 * Math.PI / 180;
const ma = array.map(point => rotatePoint(array[2], angle, point));
Render the arrow
const arrow = chart.renderer.path({
fill: 'black',
zIndex: 6,
d: ['M', ma[0].join(' '), 'L', ma[1].join(' '), ma[2].join(' '), ma[3].join(' ')].join(' ')
}).add()
You should also consider cases when the point is on the right of the label and the top of the label - rotation and calculation of the angle stay the same but connecting the point with the label needs to be adjusted.
Live example and output
http://jsfiddle.net/savpscya/