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.

Answer 1

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/