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): .formatter

Here's the jsfiddle: /

for fullscreen: /

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/>';
            },
        },

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:

• javascript
• jquery
• highcharts
• formatting

• Set up a sample chart on jsbin.com or jsfiddle.com – Alfredo Delgado Commented Nov 30, 2014 at 4:09
• 1 @AlfredoDelgado thanks for mentioning. i added the jsfiddle. – samuelpullely Commented Nov 30, 2014 at 17:24

1 Answer 1

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