Highcharts Custom tooltips for multiple series

Question

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.

You can use pointFormatter and pointFormat inside your specific series: jsfiddle.net/0u915g9b Is this example ok for you? — Grzegorz Blachliński
@GrzegorzBlachliński That does help, but it removes the marker from the tooltip. (added a picture to the main post). I just want to keep the formatting consistent — Eric G

Barbara Laird Barbara Laird · Accepted Answer · 2016-08-29T18:47:17

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

Highcharts Custom tooltips for multiple series

1 Answers