Общая синхронизированная подсказка для синхронизированных HighCharts

Question

У меня есть случай использования, когда мне нужно иметь общую подсказку для всех графиков в синхронизированных HighCharts. Эта единственная подсказка должна содержать точки данных из всех графиков.

Это то, чего я достиг до сих пор - https://jsfiddle.net/wgupnvqm/.

Все диаграммы показывают отдельные подсказки, и эти подсказки синхронизированы. Есть ли способ объединить все данные в одной подсказке и показать только эту подсказку для синхронизированных диаграмм?

Вот как я реализовал HighCharts

/**
 * In order to synchronize tooltips and crosshairs, override the
 * built-in events with handlers defined on the parent element.
 */
$('#container').bind('mousemove touchmove touchstart', function (e) {
    var chart,
        point,
        i,
        event;

    for (i = 0; i < Highcharts.charts.length; i = i + 1) {
        chart = Highcharts.charts[i];
        // Find coordinates within the chart
        event = chart.pointer.normalize(e.originalEvent);
        // Get the hovered point
        point = chart.series[0].searchPoint(event, true);

        if (point) {
            point.highlight(e);
        }
    }
});
/**
 * Override the reset function, we don't need to hide the tooltips and
 * crosshairs.
 */
Highcharts.Pointer.prototype.reset = function () {
    return undefined;
};

/**
 * Highlight a point by showing tooltip, setting hover state and draw crosshair
 */
Highcharts.Point.prototype.highlight = function (event) {
    event = this.series.chart.pointer.normalize(event);
    this.onMouseOver(); // Show the hover marker
};


// Get the data. The contents of the data file can be viewed at
$.getJSON(
    'https://api.myjson.com/bins/ehhwv',
    function (activity) {
        $.each(activity.datasets, function (i, dataset) {

            $('<div class="chart">')
                .appendTo('#container')
                .highcharts({
                    chart: {
                        marginLeft: 200, // Keep all charts left aligned
                        spacingTop: 20,
                        spacingBottom: 20
                    },
                        plotOptions: {
                          series: {
                              marker: {
                                  enabled: false
                              }
                          }
                                     },
                    title: {
                        text: 'Series ' + i,
                        align: 'left',
                        margin: 0,
                        x: 0,
                        y: 60,
                        style: {
                            fontSize: "12px",
                        }
                    },
                    tooltip: {
                        shared: true,
                    },
                    credits: {
                        enabled: false
                    },
                    legend: {
                        enabled: false
                    },
                    xAxis: {
                        crosshair: true,
                                        visible: false,

                    },
                    yAxis: {
                        title: {
                            text: null
                        },
                        tickInterval: 50,
                        lineWidth: 1,
                        min: 0,
                        max: 100
                    },
                    series: [{
                        data: dataset.data,
                        name: 'Series ' + i,
                        type: dataset.type,
                    }]
                });
        });
    }
);