Disable highcharts tooltip on certain lines, leave it enabled on others?

50
votes

I have a Highchart containing multiple lines. I want to disable the tooltip on certain lines, and leave it enabled for others. Is that possible? I see how to disable the tooltip globally, but not by series.

For instance, on the standard line chart example is it possible to disable the tooltip on the red and blue lines but leave it enabled on the other two?

3
highcharts

3 Answers

57
votes

UPDATE

use enableMouseTracking: Boolean

Notice enableMouseTracking: Boolean was introduced after this question was asked

Old Answer

I just Disabled the heights point in the Tokyo series

here is your code

         tooltip: {
                formatter: function() {
                    
                    if(this.series.name == 'Tokyo' && this.y == 26.5 ){
                      return false ;
                    // to disable the tooltip at a point return false 
                    }else {
                        return '<b>'+ this.series.name +'</b><br/>'+
                        this.x +': '+ this.y +'°C';
                }   
                }
            }

jsfiddle

52
votes

Use enableMouseTracking. It's the best way to do it.

Per Serie

series: [{
    name: 'Serie1',
    data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6],
    enableMouseTracking: false
}, {
    name: 'Serie2',
    data: [7.0, 6.9, 9.5, 15.5, 15.2, 15.5, 15.2, 15.5, 11.3, 17.3, 11.9, 9.6]
}]

Global

plotOptions: {
    series: {
        enableMouseTracking: false
    }
}

The code above will display tooltip for only the first serie.

Reference: enableMouseTracking

0
votes

For stock charts enableMouseTracking: false makes lines inactive on hover.

Here's better solution:

Highcharts.chart('container', {
  series: [{
    name: 'John',
    type: 'column',
    data: [5, 3, 4, 7, 2],
    tooltip: {
      pointFormatter: function() {
        return false
      }
    }
  }, {
    name: 'Jane',
    type: 'column',
    data: [2, 2, 3, 2, 1],
    tooltip: {
      pointFormatter: function() {
        return 'Second <strong>column</strong> series.'
      }
    }
  }, {
    name: 'Joe',
    type: 'line',
    data: [3, 4, 4, 2, 5],
    tooltip: {
      pointFormatter: function() {
        return false
      }
    }
  }]

});