Draw another chart/or series on mouse hover in HighStock - highcharts

Question

I have an indicator which is a function of x, y.
How can i draw this indicator on top of chart?
Lets say here https://jsfiddle.net/yv3pehj8/
plotOptions: {
series: {
point: {
events: {
mouseOver: function () {
var chart = this.series.chart;
if (!chart.lbl) {
chart.lbl = chart.renderer.label('')
.attr({
padding: 10,
r: 10,
fill: Highcharts.getOptions().colors[1]
})
.css({
color: '#FFFFFF'
})
.add();
}
chart.lbl
.show()
.attr({
text: 'x: ' + this.x + ', y: ' + this.y
});
}
}
}
Instead of printing x,y value on the corner, I wanted to draw a line at an angle of 45 degrees to the hover point ranging from [x-10, x+10]. How could I do it in the most performant way?
TIA
EDIT
Many thanks for the solution. To make it a bit more complicated. i want to reach the following effect as seen in this image []
i want to draw the blue/red curves as you see in the image on mouse hover.. Would you happen to have a solution for this #ppotaczek??

Answer 1

Instead of rendering the label, you can render a path:
plotOptions: {
series: {
point: {
events: {
mouseOver: function() {
var chart = this.series.chart,
path = [
'M',
chart.plotLeft + this.plotX - 10,
chart.plotTop + this.plotY - 10,
'L',
chart.plotLeft + this.plotX + 10,
chart.plotTop + this.plotY + 10
];
if (!chart.lbl) {
chart.lbl = chart.renderer.path(path)
.attr({
'stroke-width': 2,
stroke: 'red'
})
.add();
}
chart.lbl
.show()
.attr({
d: path
});
}
}
},
...
}
}
Live demo: https://jsfiddle.net/BlackLabel/zo46fuxb/
API Reference: https://api.highcharts.com/class-reference/Highcharts.SVGRenderer#path