Tooltip for whole stack in grouped stacked Highcharts diagram

Question

I used a grouped and stacked diagram of the highcharts library as you can see here: http://jsfiddle.net/152h9qrv/

Now I want to add a tooltip for each stack. When you hover a stack (not a whole group) you should receive all the entry names and data for the stack. I tried to used the shared:true option but then I receive all the values for the complete group (6 values in my example). Without this option I can only access the hovered element/value.

In my example (http://jsfiddle.net/152h9qrv/): I want to access the names and the values for the three elements of each hovered stack.

Could anybody give me a hint?

Answer 1

You can use tooltip formatter and then find points.

tooltip: {
        formatter: function () {
            var indexS = this.series.index,
                indexP = this.point.x,
                series = this.series.chart.series,
                out = 'y1:' + this.y + '<br/>';

            switch (indexS) {
                case 0:
                    out += 'y2: ' + series[1].data[indexP].y;
                    break;
                case 1:
                     out += 'y2: ' +series[0].data[indexP].y;
                    break;
                case 2:
                     out += 'y2: ' +series[3].data[indexP].y;
                    break;
                case 3:
                     out += 'y2: ' + series[2].data[indexP].y;
                    break;
            }

            return out;
        }
   },

http://jsfiddle.net/3Utat/10/