CODEWITHSUNDEEP
javascriptjqueryhtmlhighcharts
Kumaran
Kumaran

Reputation: 309

Highcharts shared tooltip for line series and scatter plot not working

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 ?

Upvotes: 4

Views: 5527

Answers (4)

Young Scooter
Young Scooter

Reputation: 504

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.

Upvotes: 3

user2622184
user2622184

Reputation: 51

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]
        }]
    });
});

Upvotes: 5

Harshit Jain
Harshit Jain

Reputation: 492

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

Upvotes: 2

Pandiyan Cool
Pandiyan Cool

Reputation: 6565

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).

Upvotes: 2

Related Questions