I have a highcharts table with two data series that use named values. In my tooltips for one series, I want to reference a data point from the series. So the solution in this answer: How to use a different formatter on Highcharts in each curve of the same graphic? doesn't help me. I need more than just tooltipText, I need a formatter:
For one:
formatter: function() {
return this.x + ': ' + this.series.name +
'<br> $' + Highcharts.numberFormat(this.y, 0);
}
And for the other:
formatter: function() {
return 'In ' + this.x + ' the median value was' + this.median +
'and the total $' + Highcharts.numberFormat(this.y, 0);
}
The tooltip appears when hovering over a point in a series. By default the tooltip shows the values of the point and the name of the series. For the full set of options available for the tooltip, see the API reference.
A callback function for formatting the HTML output for a single point in the tooltip. Like the pointFormat string, but with more flexibility. Defaults to undefined . Context: Highcharts. Point.
Inside formatter this
reffers to the focused serie, you can add an if/else
inside the formatter and return a string for each one, like the following.
tooltip: {
shared: false,
formatter: function() {
var text = '';
if(this.series.name == 'MSFT') {
text = this.x + ': ' + this.series.name +
'<br> $' + Highcharts.numberFormat(this.y, 0);
} else {
text = 'In ' + this.x + ' the median value was' + this.median +
'and the total $' + Highcharts.numberFormat(this.y, 0);
}
return text;
}
}
demo
You can easily define a toolip formatter for each series - see here: http://api.highcharts.com/highcharts/plotOptions.series.tooltip
{
tooltip: {
shared: true
},
series: {
name: 'some series name',
data: mydata,
tooltip: {
valueSuffix: ' bar'
}
}
}
Example: http://jsfiddle.net/28qzg5gq/
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