CODEWITHSUNDEEP
highchartstooltipline
Roman Ivanov
Roman Ivanov

Reputation: 2537

Show tooltips on all points of vertical line

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 ?

Upvotes: 1

Views: 878

Answers (2)

Roman Ivanov
Roman Ivanov

Reputation: 2537

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: vertical line with tooltips

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
  }]
});

Upvotes: 0

Wojciech Chmiel
Wojciech Chmiel

Reputation: 7372

You can easily achieve it following one of these approaches:

  1. Use plotLine to show the line and scatter series to plot each point separately:

Code:

Highcharts.chart('container', {
  xAxis: {
    type: 'datetime',
    plotLines: [{
        color: '#FF0000',
        value: Date.UTC(2010, 0, 1),
      width: 1
    }]
  },
  series: [{
    type: 'scatter',
    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]
    ]
  }]
});

Demo:

API:

  1. Create two series with the same data points, line and scatter:

Code:

const 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]
];

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

Demo:

Upvotes: 1

Related Questions