Highcharts: Shared tooltip formatter this.points [i]

Question

How can I display the tooltip shown in the image below as general?

Maybe you should take a look at the Highcharts API link (especially the general option information): http://api.highcharts.com/highcharts#tooltip.formatter

Here's jsfiddle: http://jsfiddle.net/iginisruber/Ltqnab9x/1/

for full screen mode: http://jsfiddle.net/iginisruber/Ltqnab9x/1/embedded/result/

I tried this, but this did not 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:

Answer 1

If you want to display individual data points for stacked charts using a common tooltip, you need to scroll through the individual points and create a 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 is a working example: http://jsbin.com/qatufetiva/1/edit?js,output