Question

22

Highcharts: Shared tooltip formatter this.points[i]

rated 0 times [ 24] [ 2] / answers: 1 / hits: 20054 / 10 Years ago, sat, november 29, 2014, 12:00:00

How can I get the tooltip seen in the image below to be displayed as shared?

You might want to take a look at the Highcharts API Reference (especially the info about the shared option): http://api.highcharts.com/highcharts#tooltip.formatter

Here's the jsfiddle: https://jsfiddle.net/9bw1qLj4/

for fullscreen: https://jsfiddle.net/9bw1qLj4/embedded/result/

I tried this, but it didn't work:

tooltip: {

			shared: true,

			formatter: function () {

				var y_value_kwh = (this.points[i].y/1000).toFixed(2);

                return '<span style=font-size: 10px>' + this.key + '</span><br/>' + '<span style=color:' + this.points[i].series.color + '>u25CF</span> ' + this.points[i].series.name + ': <b>' + y_value_kwh  + ' kWh</b><br/>';

            },

        },

Current code:

tooltip: {

			//shared: true,

			formatter: function () {

				var y_value_kwh = (this.y/1000).toFixed(2);

                return '<span style=font-size: 10px>' + this.key + '</span><br/>' + '<span style=color:' + this.series.color + '>u25CF</span> ' + this.series.name + ': <b>' + y_value_kwh  + ' kWh</b><br/>';

            },

        },

Current output:

enter

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

billier

Add To Favorites

Follow

Total Points: 153

Total Questions: 85

Total Answers: 91

Location: Monaco

Member since Sun, Jan 16, 2022

2 Years ago

answered 10 Years ago nestorjarettg · Accepted Answer

When you want to display the individual data points for stacked graphs with a shared tooltip, you have to loop through the individual points and build up the tooltip markup.

    tooltip: {

        shared: true,

        formatter: function () {

            var points = this.points;

            var pointsLength = points.length;

            var tooltipMarkup = pointsLength ? '<span style=font-size: 10px>' + points[0].key + '</span><br/>' : '';

            var index;

            var y_value_kwh;



            for(index = 0; index < pointsLength; index += 1) {

              y_value_kwh = (points[index].y/1000).toFixed(2);



              tooltipMarkup += '<span style=color:' + points[index].series.color + '>u25CF</span> ' + points[index].series.name + ': <b>' + y_value_kwh  + ' kWh</b><br/>';

            }



            return tooltipMarkup;

        }

    }

Here's a working example: http://jsbin.com/qatufetiva/1/edit?js,output