Highcharts shared tooltip between charts with mult

Question

I'm trying to set shared tooltip between charts. It works nice only if tooltip doesn't have shared: true, if I set shared: true I get error:

TypeError: 'undefined' is not an object (evaluating 'a[0].category') highcharts.js:3259

I prepared example: http://jsfiddle.net/CAKQH/24408/

If you move cursor on first chart - it works nice, also if you comment shared: true it works, but if you move cursor on second chart you'll get an error.

Did someone faced this error? Help me to solve it, please.

Answer 1

The problem occurs because you have shared: true on one chart, while having it default (false) on the other. This is a problem because the tooltip.refresh method will take different paths and use the input differently based the chart having shared set to true or false.

You can find this branching in the source code on line 8806, for the tooltip.refresh method:

// shared tooltip, array is sent over
if (shared && !(point.series && point.series.noSharedTooltip)) {
    ....
}
// single point tooltip
else {
    ....
}

You can handle this by doing a branching inside your syncTooltip method to handle the different cases like this (example JFiddle):

function syncTooltip(container, p) {
    var i = 0;
    for (; i < charts.length; i++) {
        if (container.id != charts[i].container.id) {
            if(charts[i].tooltip.shared) {
                charts[i].tooltip.refresh([charts[i].series[0].data[p]]);
            }
            else {
                charts[i].tooltip.refresh(charts[i].series[0].data[p]);
            }
        }
    }
}

This way you can freely set shared to true or false on both charts.

Unfortunately your plotOptions.series.point.events.mouseOver-event doesn't capture points that are "selected" through the shared: true functionality, so you will have to find an alternate event to properly capture this situation.