Disable highcharts tooltip on certain lines, leave it enabled on others?
HighchartsHighcharts Problem Overview
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][1] is it possible to disable the tooltip on the red and blue lines but leave it enabled on the other two?
[1]: http://jsfiddle.net/gh/get/jquery/1.7.2/highslide-software/highcharts.com/tree/master/samples/highcharts/demo/line-basic/ "this example"
Highcharts Solutions
Solution 1 - Highcharts
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';
}
}
}
Solution 2 - Highcharts
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
Solution 3 - Highcharts
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
}
}
}]
});