Share tooltip between all series types

Question

Working with tooltips in Highcharts I can see that not all type of series are included in the same tooltip. In the definition of my Highcharts object the property of tooltip look like:

tooltip: {
    positioner : function (boxWidth, boxHeight, point) {
        return {
            x : point.plotX - 100,
            y : point.plotY
        };
    },
    shared : true
}

And how I am setting the tooltip property for each series is:

public getDefaultTooltip() {
    return {
        pointFormat : '<span style="font-weight: bold; color: {series.color}">{series.name}</span>: <b>{point.y} </b><br/>'
    };
}

After read the documentation of tooltip I can see that shared property is not valid for series of type 'scatter', what is exactly the type of series that is not working for me. So, is there some workaround in order to make available all the data in the same shared tooltip?

in the example bellow I want to show all the series data in the same tooltip but the scatter serie is using a different popover. http://jsfiddle.net/rolandomartinezg/a6c4c4tv/1/

I think you mean "function", not "public". JavaScript does not have visibility modifiers, unless this is some pseudo-Java code? — Mr. Polywhirl
@Rolando: could you please share your code on jsfiddle to better assess your issue? :) — mustapha mekhatria

Barbara Laird Barbara Laird · Accepted Answer · 2016-02-18T00:46:44

The ScatterSeries is defined in highcharts with noSharedTooltip = true. I think this is because the scatter series show both the x and y in their tooltips.

var ScatterSeries = extendClass(Series, {
    type: 'scatter',
    sorted: false,
    requireSorting: false,
    noSharedTooltip: true,
    trackerGroups: ['group', 'markerGroup', 'dataLabelsGroup'],
    takeOrdinalPosition: false, // #2342
    kdDimensions: 2,
    kdComparer: 'distR',
    drawGraph: function () {
        if (this.options.lineWidth) {
            Series.prototype.drawGraph.call(this);
        }
    }
});

To get around this, you can use a line series instead of the scatter series with the lineWidth = 0. You also need to turn off the hover state for the series to avoid the line showing up on hover.

  , {
        type: 'line',
        name: 'Average',
        lineWidth: 0,
        states: {
            hover: {
            enabled: false
          }
        },
        data: [3, 2.67, 3, 6.33, 3.33],
        marker: {
            lineWidth: 2,
            lineColor: Highcharts.getOptions().colors[3],
            fillColor: 'white'
        }
    }

http://jsfiddle.net/a6c4c4tv/2/

Share tooltip between all series types

1 Answers