CODEWITHSUNDEEP
javascripthighchartsreact-highcharts
micronyks
micronyks

Reputation: 55443

Show tooltip for each line together - spline highchart

I have prepared this demo. Where there are two lines.

Now when I move mouse to 0 deg, as you can see for both lines, value is plotted but the problem is on hover, it will display only one line's tooltip.

I need a vertical line where tooltips are attached for all lines as shown in this example - Choose 7 days from dropdown

I tried with

tooltip: {
        useHTML: true,
        borderWidth: 1,
        distance: 0,
        pointFormat: `<div style="color:{series.color}"><b>{series.name} {series.unit}</b> : <b>{point.y} {series.userOptions.unit}</b></div>`,
        valueDecimals: 2,
        padding: 5,
        shared: true,
        split: false,
        enabled: true
    },

But unfortunately it is not working.

Upvotes: 0

Views: 962

Answers (1)

magdalena
magdalena

Reputation: 3695

Due to the split tooltip is not available for the inverted chart, I would suggest reverting the data and adjusting the tooltip and axis settings for your requirements.

Example data reversion:

let data1 = [
  [0, 1],
  [10, 2],
  [20, 3],
];

let temperature1 = [];

data1.forEach(data => {
  temperature1.push(data.reverse())
})

Example tooltip and axis's config based on your demo:

  yAxis: {
    lineWidth: 1,
    gridLineWidth: 0,
    title: {
      enabled: true,
      text: 'Altitude'
    },
    labels: {
      format: '{value} km'
    }
  },

  xAxis: {
    gridLineWidth: 1,
    crosshair: true,
    title: {
      text: 'Temperature'
    },
    labels: {
      format: '{value}°'
    },
  },

  tooltip: {
    shared: true,
    split: true,
    pointFormat: `<div style="color:{series.color}"><b>{series.name}</b> : <b>{point.y} km</b></div>`,
  },

Demo: https://jsfiddle.net/BlackLabel/41hvogue/

API References: https://api.highcharts.com/highcharts/yAxis.crosshair https://api.highcharts.com/highcharts/tooltip.formatter

Upvotes: 1

Related Questions