I want to customize the tooltip of the last point in a specific series, leave other points in this series, and other series, with default tooltip format. Basically, I am looking for something similar to this config. Thanks in advance for your help!
series: [{
tooltip: { // ?? tooltip does not work inside series
formatter: function() {
if (lastPoint in the series) { // ?? how to determine if lastPoint
return '<b>Final result is </b> ' + this.y;
}
// ?? return default format if it is not the last point in the series
}
},
data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6]
}, {
data: [194.1, 95.6, 54.4, 29.9, 71.5, 106.4, 129.2]
}]
The formatter function doesn't seem to work when it's defined for a series. You can check which series you are in by using this.series.name and then you can check if you are on the final point using this.series.xData.length - 1 == this.point.x. But, it would be easier to name the point that you want to target and check for that in the formatter function. http://jsfiddle.net/Swsbb/. To see all the formatter data, check here http://api.highcharts.com/highcharts#tooltip.formatter.
$('#container').highcharts({
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul']
},
tooltip : {
formatter: function() {
var tooltip;
if (this.key == 'last') {
tooltip = '<b>Final result is </b> ' + this.y;
}
else {
tooltip = '<span style="color:' + this.series.color + '">' + this.series.name + '</span>: <b>' + this.y + '</b><br/>';
}
return tooltip;
}
},
series: [{
data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, {y:135.6, name: 'last'}]
},
{
data: [194.1, 95.6, 54.4, 29.9, 71.5, 106.4, 129.2]
}]
});
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With