I'm building a highchart that can have up to 5 different types of data series. I am putting similar series together so there would be 3 different y-axis for the different series.
The problem I'm having is that I cant alter a tooltip for one of the series to say On
or Off
if the value is 100
or 0
.
Currently I am using shared tooltips, but each data series has its own tooltip. 4 of the 5 only use prefix/suffix on the tooltip, ex %
,amps
,psig
, etc.
Unfortunately I cannot make it work by changing the tooltip to say On or Off. This is what ive tried.
dataSeries.push({
name: currData['name'],
type: 'line', // Type of visual display
width: 0.4,
yAxis: currData['yAxis'],
data: currData['series'],
tooltip: {
pointFormat: '{series.marker} {series.name}: ' + ('{value}' == 100 ? '<b>On</b><br />' : '<b>Off</b><br />')
//valueSuffix: '{value}' === 100 ? 'On' : 'Off'
formatter: function () {
// Cant get any of these to work
return '{value}' == 100 ? 'On' : 'Off';
return this.y == 100 ? 'On' : 'Off';
return this.point.y == 100 ? 'On' : 'Off';
}
}
//zones: currData['seriesZones'],
}
I would like to not use a global tooltip formatter as I've built the tooltip formats into each different type which gets associated on a switch statement when passing the multiple data series.
Using this code
pointFormatter: function () {
var point = this;
return point.series.name + ': ' + (point.y > 0 ? 'On' : 'Off') + '<br/>'
}
it doesnt show the marker on the tooltip.
Expanding on Grzegorz's solution to include showing the marker:
tooltip: {
pointFormatter: function() {
var point = this;
return '<span style="color:' + point.color + '">\u25CF</span> ' + point.series.name + ': <b>' + (point.y > 0 ? 'On' : 'off') + '</b><br/>';
}
}
http://jsfiddle.net/0u915g9b/1/
Note that the default html is shown in the docs: http://api.highcharts.com/highcharts/series%3Cline%3E.tooltip.pointFormatter
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