Tooltip in chart with line- and scatter plot in highcharts 3.0.7

2
votes

In older versions of highcharts you could have a chart with both line and scatter plots and combine them both into the same tooltip like so:

enter image description here

In highchart 3.0.7 this no longer works. As can be seen in the tooltip below wind dir is not displayed. Win dir is a scatter plot, the others are areaspline:

enter image description here

The tooltip code:

tooltip: {
crosshairs: true,
shared: true,
   formatter: function() {
        var s = '<b>' + Highcharts.dateFormat('%H%M %p %a %b %e', this.x) + '</b>';
        $.each(this.points, function(i, point) {
             s += '<br/>' + point.series.name + ': ' + point.y + (this.series.name == 'Wind Dir' ? ' degrees' : ' mph');
        });
        return s;

   }
}

See complete example here.

How can the tooltip in 3.0.7 be made to behave like in 2.2?

2
highcharts
I opened your example jsfiddle.net/hphwu/5 and in tooltip I see all series, so what is wrong? - Sebastian Bochan
If you comment out ver 2.2 and uncomment ver 3.0.7 you'll see: jsfiddle.net/hphwu/6 - Rune
It's changed since ~2.3.5 version and isn't supported anymore, sorry. According do docs. - Paweł Fus

2 Answers

2
votes

A simple workaround is to change the scatter plot to a line plot and set linewidth = 0 and enable marker for the line plot. This way it will look like the scatter plot in the example, but support tooltip.shared.

Edit: note that the actual property is camelCase: lineWidth: 0

1
votes

In my case, I was looking for something like the error bar chart, but with a few changes:

  • Share the same yAxis (both column and error are about the same nature)
  • No errorbar margin for the columns (but need to keep them for the dots)
  • Use of scatter instead of spline (since the y's aren't connected through time)

So, from the Highcharts' error bar fiddle, I came up with the same broken tooltip fiddle for my case.

Digging at the problem, I found that as per Highcharts' shared tooltips documentation:

Tooltip texts for series types with ordered data (not pie, scatter, flags etc) will be shown in a single bubble.

So, it really don't make sense to expect a shared tooltip for the scatter option.

As a solution, I came up with the very same OP's solution.

Set the type as spline (even it doesn't make much sense at first) and remove the line by setting lineWidth: 0 to appear like a scatter plot, so it is simulated something like an ordered scatter plot chart, as shown in this working fiddle.