Highcharts: how display tooltip, when point = null? - highcharts

Question

When we hover on may In example, we don't see tooltip for this month, because data is null. Can I set the settings to see the tooltip when data is null?

Answer 1

Well as far as I know there is no generic option for that since highcharts ignores null values from showing.
On the other hand, we can replace the null points with "fake" ones, that have an average value between the 2 closest points (this will cause the chart flow remain the same), and with a custom property isNull which can be used as a flag later.
After doing that, we can use a formatter function for the tooltip, and manipulate the tooltip the way we want, for example displaying only the series name when a point isNull.
$(function () {
$('#container').highcharts({
title: {
text: 'The line is connected from April to Juni, despite the null value in May'
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
plotOptions: {
series: {
connectNulls: true
}
},
tooltip: {
formatter: function(){
if(this.point.isNull == undefined)
return this.series.name+"<br>"+"<b>value:</b>"+this.y;
return this.series.name;
}
},
series: [{
data: [null, 71.5, 106.4, 129.2, null, 176.0, 135.6, null, 216.4, 194.1, 95.6, 54.4]
}]
}, function(chart){
var series = chart.series[0];
var data = series.data;
$.each(data,function(i){
var point = data[i];
var prevPoint = data[i-1] != undefined ? data[i-1].y : 0;
var nextPoint = data[i+1] != undefined ? data[i+1].y : 0;
if(point.y == null){
series.addPoint({x:point.x,y:(prevPoint+nextPoint)/2, isNull:true});
}
});
});
});
http://jsfiddle.net/zb5ksxtc/1/
I hope this is what you meant.
UPDATE
We can also do something not less hacky... (I guess a little hacking could work fine in this unusuall case)
What I did here was creating a "fake" scatter series, with points located where null values from the real series (used same average logic).
The series has hidden markers, and has a unique name.
After that, I used a shared tooltip and a formatter to display the right tooltip.
I used the name attribute to determine what series is focused:
$(function () {
$('#container').highcharts({
title: {
text: 'The line is connected from April to Juni, despite the null value in May'
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
plotOptions: {
series: {
connectNulls: true,
},
},
tooltip: {
shared:true,
formatter: function(){
var points = this.points;
var seriesName = points[0].series.name;
if(seriesName == 'fake')
return "Null tooltip";
return seriesName+"<br>value: <b>"+this.y+"</b>";
}
},
series: [{
type:'areaspline',
data: [null, 71.5, 106.4, 129.2, null, 176.0, 135.6, null, 216.4, 194.1, 95.6, 54.4]
},
{
type:'spline',
lineWidth:0,
name:'fake',
showInLegend:false,
marker:{
symbol:'circle',
radius:0,
}
}
]
}, function(chart){
var series = chart.series[0];
var fake_series = chart.series[1];
$.each(series.data, function(i){
var point = this;
var nextPoint = series.data[i+1] != undefined ? series.data[i+1].y : 0;
var prevPoint = series.data[i-1] != undefined ? series.data[i-1].y : 0;
if(series.data[i].y == null)
fake_series.addPoint([series.data[i].x, (nextPoint+prevPoint)/2]);
});
});
});
and the fiddle ofcourse: http://jsfiddle.net/zb5ksxtc/8/