Draw multiple series upon mouse hover in Highstock

Question

Building upon my previous question here SO

I want to reach this desired affect on mouse hove. Draw multiple series like so

Could you please recommend highstock best practice for the same?

Thanks

Answer 1

You can add an additional series in the first mouseOver event and then update its data. For example:

series: [{
    data: [...],
    point: {
        events: {
            mouseOver: function() {
                var chart = this.series.chart;

                if (!chart.series[1]) {
                    chart.addSeries({
                        data: additionalData[this.index].slice()
                    });

                } else {
                    chart.series[1].setData(
                        additionalData[this.index].slice()
                    );
                }

            }
        }
    }
}]

---

Live demo: http://jsfiddle.net/BlackLabel/ufa2ygvm/

API Reference:

https://api.highcharts.com/class-reference/Highcharts.Chart#addSeries

https://api.highcharts.com/class-reference/Highcharts.Series#setData