Как добавить вертикальную линию графика в несколько рядов линий и показать всплывающую подсказку на линии графика в старшей диаграмме

Question

Я пытаюсь добавить сюжетную линию по щелчку в линейной диаграмме нескольких серий в reactjs. Я использую биржевую диаграмму верхнего графика. Пожалуйста, дайте мне знать, как добавить сюжетную линию с всплывающей подсказкой. Пример скриншота:

Answer 1

Я подготовил демонстрацию, в которой показано, как динамически добавлять plotLine с помощью настраиваемой подсказки.

Демонстрация: https://jsfiddle.net/BlackLabel/Lyr82a5x/

btn.addEventListener('click', function() {
  chart.xAxis[0].addPlotLine({
    value: 5.5,
    color: 'red',
    width: 2,
    id: 'plot-line-1',
    events: {
      mouseover() {
        let lineBBox = this.svgElem.getBBox();

        tooltip.style.display = 'block';
        tooltip.style.left = lineBBox.x + 'px';
      },
      mouseout() {
        tooltip.style.display = 'none'
      }
    }
  })
})

Если что-то неясно - не стесняйтесь спрашивать.

API: https://api.highcharts.com/highcharts/xAxis.plotLines.events.mouseout

API: https://api.highcharts.com/class-reference/Highcharts.Axis#addPlotLine