HighchartsReact adding line between 2 dots while hovering using Stacked area

Question

I want to add a line that connects between the 2 dots on the graph while hovering. currently it looks like this:

and I want it to look like this:

my current connfig:

        plotOptions: {
            series: {
                marker: {
                    enabled: false,
                    symbol: "circle",
                    radius: 2,
                    states: {
                        hover: {
                            enabled: true,
                        }
                    }
                }
            },
            area: {
                stacking: 'normal', //Stacked area
                lineColor: '#666666',
                lineWidth: 1,
                marker: {
                    lineWidth: 1,
                    lineColor: '#666666'
                }
            }
        },

Answer 1

You can achieve that by adding xAxis.crosshair:

Example config:

  xAxis: {
    crosshair: {
      width: 3,
      color: 'grey'
    }
  },

Demo: https://jsfiddle.net/BlackLabel/abspu5e1/

API Reference: https://api.highcharts.com/highcharts/xAxis.crosshair