CODEWITHSUNDEEP
javascripthighchartsreact-highcharts
Baruch Levin
Baruch Levin

Reputation: 372

Highcharts: How to make shared tooltip even when series doesn't have same X value?

In short: I want to make a shared tooltip for the column chart and scatter chart when the scatter chart doesn't have the same "x" values as the column chart.

This is a minimal reproducible example of my problem: enter image description here

https://jsfiddle.net/Baruch_Levin/wo50t4us/15/

Code:

Highcharts.chart('container', {
    chart: {
        type: 'column'
    },
    xAxis: {
        categories: ['USA', 'China'],
    },
    yAxis:[{}, {
    opposite: true
    }],
    tooltip: {
        shared: true
    },
    series: [
        {
            name: 'Corn',
            data: [406292, 260000],
            yAxis: 0
        },
        {
            name: 'Wheat',
            data: [51086, 136000],
            yAxis: 0
        },
        {
                name: 'Benchamrk prev year',
            type: "scatter",
            data: [[-.15,1],[.15,3],[.85,4],[1.15,1]],
            yAxis: 1,
        }
    ]
});

I use the scatter plot as a benchmark, to know what was the values in the previous year. Then I want a shared tooltip that will show me:

USA: {some_value}
USA prev year: {some_value}
China: {some_value}
China prev year: {some value}

Then I want that also in hover, the column chart AND the scatter plot will be selected.

How can I do that?

I saw this question: Highcharts : Shared Tooltip for non-matching x values

But it doesn't help me, because the jsfiddle there doesn't show how to select on hover both series points etc' And I am not sure "interpolation" is the right solution, and it was in 2017, maybe now there is another solution...

Thanks in advance!

Upvotes: 0

Views: 415

Answers (1)

magdalena
magdalena

Reputation: 3695

To accomplish this, apply the tooltip.formatter with the calculations as follows:

tooltip: {
    shared: true,
    formatter() {
      let category = this.key,
        tooltipText = '',
        a = [],
        b = [];

      this.series.chart.series.forEach(series => {
        let seriesName = series.name;
        series.points.forEach(point => {
          if (point.category === category || point.category < (this.point.x + 0.5) && point.category > (this.point.x - 0.5)) {

            if (typeof point.category !== 'number') {
              a.push(`<span>${point.category}: ${seriesName}: ${point.y}</span></br>`);
            }
            if (typeof point.category === 'number') {
              b.push(`<span>${point.series.name}: ${point.y}</span></br>`);
            }
          }
        })
      });

      for (let i = 0; i < a.length; i++) {
        tooltipText += `${a[i]} ${b[i]}`
      }
      return tooltipText;
        }
      },

Additionally, to remove opacity, it will be necessary to modify series.states

   plotOptions: {
    series: {
      states: {
        inactive: {
          opacity: 1
        },
        hover: {
          enabled: false
        }
      }
    }
  },

Demo: https://jsfiddle.net/BlackLabel/5vdnmrtw/

API References: https://api.highcharts.com/highcharts/tooltip.formatter https://api.highcharts.com/highcharts/plotOptions.series.states

Upvotes: 1

Related Questions