Draw another chart/or series on mouse hover in Hig

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