javascript - Highcharts shared tooltip between charts with multiple series and shared tooltip - Stack Overflow

admin管理员组

文章数量:1414605

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: /

If you move cursor on first chart - it works nice, also if you ment 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.

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/CAKQH/24408/

If you move cursor on first chart - it works nice, also if you ment 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.

• javascript
• highcharts

Share Improve this question Follow asked Jul 8, 2014 at 15:18 Aleksandr K.Aleksandr K. 1,4251616 silver badges2424 bronze badges 0

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 6

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.

本文标签： javascriptHighcharts shared tooltip between charts with multiple series and shared tooltipStack Overflow