Highcharts shared tooltip for line series and scatter plot not working

4
votes

I have a highchart with a couple of line series and a scatter plot and I have set the shared tooltip property to true as in this fiddle http://jsfiddle.net/tpo4caoz/. I see that the line series are having a shared tool tip but the scatter plot is having a separate tooltip for itself. 

$(function () {
    $('#container').highcharts({

        xAxis: {
            categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul',
                                     'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
        },

        tooltip: {
            shared: true
        },

        series: [{
            data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4],
            type: 'scatter'

        }, {
            data: [216.4, 194.1, 95.6, 54.4, 29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5]
        },{
            data: [210.4, 190.1, 90.6, 50.4, 20.9, 70.5, 105.4, 120.2, 140.0, 170.0, 130.6, 140.5]
        }]
    });
});

Am I missing something here ?

4
javascriptjqueryhtmlhighchartshighstock

4 Answers

3
votes

you could try this http://jsfiddle.net/8qt0d4h0/

The new highcharts can not shared tooltip in pie/scatter/flag, so you could handle the scatter as spline , and set the lineWidth equal and set states hover equal 0 too.

$(function () {
    $('#container').highcharts({

        xAxis: {
            categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul',
                                     'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
        },

        tooltip: {
            shared: true
        },

        series: [{
            data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4],
            type: 'spline',
            "lineWidth": 0,
                        "marker": {
              "enabled": "true",
              "states": {
                "hover": {
                  "enabled": "true"
                }
              },
              "radius": 5
            },
          "states": {
            "hover": {
              "lineWidthPlus": 0
            }
          },
        }, {
            data: [216.4, 194.1, 95.6, 54.4, 29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5]
        },{
            data: [210.4, 190.1, 90.6, 50.4, 20.9, 70.5, 105.4, 120.2, 140.0, 170.0, 130.6, 140.5]
        }]
    });
});
2
votes

This is the existing issue in Highcharts issue tracker

Part of the issue is that shared tooltip shouldn't work on scatter series at all, because they are not sorted and laid out in increasing X order. This should be noted in the docs(link).

2
votes

According highcharts api http://api.highcharts.com/highcharts#tooltip.shared tooltip shared works only for ordered data and not for pie, scatter, flags etc.

1
votes

Add this line of code:

Highcharts.seriesTypes.scatter.prototype.noSharedTooltip = false;

It disables Hicharts default setting which disables scatter plots from being included in shared/split tooltips. This way you do not have to use spline like others suggest, which cant lead to problems such as tooltip following the spline line.