Show tooltips on all points of vertical line

Question

I need to draw kind of plotLine with tooltip over it. Tooltips for plotlines are not possible by api. I can draw a line, vertical line, and make tooltip for it, so for some reason only one tooltip point is shown, even I have several dots in line, so I would like to be able to have several different tooltips when user move mouse over it.

Here is code to see that only one dot/marker is show - https://jsfiddle.net/Lftwjymc/

Copy of code:

Highcharts.chart('container', {
    xAxis: {
        type: 'datetime'
    },

    series: [{
        data: [
            [Date.UTC(2010, 0, 1), 29.9],
            [Date.UTC(2010, 0, 1), 71.5],
            [Date.UTC(2010, 0, 1), 75.5],
            [Date.UTC(2010, 0, 1), 80.5],
            [Date.UTC(2010, 0, 1), 106.4]
        ]
    }]
});

My code is tiny modification(just made line vertical) of example from api - https://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/series/data-array-of-arrays-datetime/

How it possible to show all points(from series) in chart with tooltips? it works for non vertical series, but ones series become vertical only one point is shown.

Or alternatively, how to make tooltip over plotline ?

Answer 1

Based on answer from Wojciech Chmiel - https://stackoverflow.com/a/56124122/1015848

I was able to make vertical line with tooltips: Here is example - https://jsfiddle.net/05bwkzma/

It looks like:

Critical items: use scatter plot; use line plot that is linkedTo scatter plot; Scatter plot should have marker.enabled=false and status.hover.enabled=false [example].

Code:

const data = [
  [Date.UTC(2010, 0, 1), 29],
  [Date.UTC(2010, 0, 1), 30],
  [Date.UTC(2010, 0, 1), 31],
  [Date.UTC(2010, 0, 1), 32],
  [Date.UTC(2010, 0, 1), 33]
];

Highcharts.chart('container', {
  xAxis: {
    type: 'datetime'
  },
  series: [{
    linkedTo: 'main',
    data: data
  }, {
    type: 'scatter',
    id: 'main',
    name: 'Series',
    marker: {
      enabled: false,
      states: {
        hover: {
          enabled: false
        }
      }
    },
    data: data
  }]
});