Highlight tooltip shared item depending on hovered serie in Highcharts

Question

I have the following chart : http://jsfiddle.net/5oso60oq/

JS :

$(function () {
    $('#container').highcharts({
        chart: {
            type: 'bar'
        },
        title: {
            text: 'Stacked bar chart'
        },
        xAxis: {
            categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas']
        },
        yAxis: {
            min: 0,
            title: {
                text: 'Total fruit consumption'
            }
        },
        legend: {
            reversed: true
        },
        tooltip: {
         shared: true
        },
        plotOptions: {
            series: {
                stacking: 'normal'
            }
        },
        series: [{
            name: 'John',
            data: [5, 3, 4, 7, 2]
        }, {
            name: 'Jane',
            data: [2, 2, 3, 2, 1]
        }, {
            name: 'Joe',
            data: [3, 4, 4, 2, 5]
        }]
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>

<div id="container" style="min-width: 310px; max-width: 800px; height: 400px; margin: 0 auto"></div>

What I would like to do is to highlight (or change the style of) the tooltip's series element depending the hovered series on the chart.

For example if i'm hovering the green area on 'Apples' chart series, I would like to highlight 'Joe' in the tooltip, and so on...

I found some tips with hover events in series, but it doesn't render well.

score 1 · Accepted Answer · answered Apr 14 '16 at 10:09

You should disable shared parameter and use the formatter, which allows to iterate on all series and points. Add the condition which checks current x value and print points.

tooltip: {
  shared: false,
  formatter: function() {
    var series = this.series.chart.series,
      each = Highcharts.each,
      x = this.point.x,
      txt = '<span style="font-size: 10px">' + this.key + '</span><br/>';


            each(series, function(serie,i) {
        each(serie.data, function(data, j){
        if(data.x === x) {
            txt += '<span style="color:' + data.color + '">\u25CF</span> ' + serie.name + ': <b>' + data.y + '</b><br/>';
        }
      });
    });

    return txt;

  }
},

Example: - http://jsfiddle.net/fsfyq89p/

score 0 · Answer 2 · answered Apr 13 '16 at 14:28

0

link

      tooltip: {
        pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
      }

try this one

answered Apr 13 '16 at 14:28

Zubair sadiq

500
6
23

This is not the result i'm looking for, I want to keep the 'shared': true in the tooltip object. – Maxime Lafarie Apr 13 '16 at 15:06

score 0 · Answer 3 · answered Apr 06 '20 at 15:02

I was looking for the same thing and found better solution I think

formatter(tooltip) {
  // sort the values
  // eslint-disable-next-line no-nested-ternary
  this.points.sort((a, b) => ((a.y < b.y) ? -1 : (a.y > b.y) ? 1 : 0))
    .reverse()
  tooltip.chart.series.forEach((item) => {
    if (!item.state) item.setState('inactive')
  })
  return tooltip.defaultFormatter.call(this, tooltip)
},

https://jsfiddle.net/h3ar4yen/

Highlight tooltip shared item depending on hovered serie in Highcharts

3 Answers3