Eric G Eric G - 3 months ago 130
jQuery Question

Highcharts Custom tooltips for multiple series

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.

Missing colored markers when using point formatter

Answer

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