I am using highcharts (StockChart) to draw a timeline of events (X axis therefore represents a datetime) and my JS knowledge is extremely basic. Each event (represented as a bar/column) has some data attached which I show in a tooltip. My timeline has multiple types of event (= series) and it can happen that there is 2 or more events of different types that happen at the exact same time. So in other words, 2 points in the plot series share the same X axis value.

My issueis that in these cases I end up with a timeline that has 2 columns but only 1 tooltip containing a merge of the 2 piece of data.

Here is how it looks like right now: hover any column

• 1.7xxxx represents the first column value
• 3.xxx represents the second column value

To be noted as well: the "snap" point is roughly in the middle of the 2 columns (the slim white vertical bar) instead of on the column itself, which is a bit weird on a UX standpoint.

What I wantis to have them split so that each column has its own tooltip floating over the column like a regular scenario.

What I want it to look like (rough sketch):

• hover left column
• hover right column

Here is how I handle the chart:

return function (yaxisTitle, targetId, dataHighStock) {
        // Line timeline chart
        // create the chart

        var config = {
            chart: {
                renderTo: targetId,
                height: 269,
                type: 'column'
            },
            plotOptions: {
                column: {
                    cursor: 'pointer',
                    pointRange: 1,
                    pointPlacement: "on",
                    pointWidth: 10
                }
            },
            xAxis: {
                type: 'datetime',
                ordinal: false,
                dateTimeLabelFormats: {
                    millisecond: '%Y-%m-%d',
                    second: '%H:%M:%S',
                    minute: '%H:%M',
                    hour: '%H:%M',
                    day: '%e. %b',
                    week: '%e. %b',
                    month: '%b \'%y',
                    year: '%Y'
                },
                minPadding: 0.05,
                maxPadding: 0.05

            },
            yAxis: {
                offset: 30,
                min: 0,
                title: {
                    text: yaxisTitle
                },
                labels: {
                    enabled: true
                }
            },
            rangeSelector: {
                inputDateFormat: '%Y-%m-%d',
                inputBoxStyle: {
                    left: '270px',
                    width: '250px'
                },
                selected: 5
            },
            tooltip: {

                formatter: function () {
                    var s = '';
                    var examDate = new Date(this.x);
                    var month = examDate.getMonth() + 1;
                    var day = examDate.getDate();
                    s = examDate.getFullYear() + "-" + (month < 10 ? '0' + month : month) + "-" + (day < 10 ? '0' + day : day) + "<br />";
                    $.each(this.points, function (i, point) {
                        s += point.y+"<br>";
                    });
                    return s;
                },
                snap: 1
            },
            legend: {
                y: 20,
                x: 80,
                enabled: true,
                align: 'left',
                layout: 'horizontal',
                verticalAlign: 'top',
                shadow: true
            },
            series: dataHighStock
        };

        //add series to navigator
        new Highcharts.StockChart(config, function (loadedChart) {
            for (var i = 0; i < dataHighStock.length; i++) {
                loadedChart.addSeries($.extend({}, dataHighStock[i],
                    {
                        enableMouseTracking: false,
                        type: "spline",
                        xAxis: loadedChart.xAxis.length - 1,
                        yAxis: loadedChart.yAxis.length - 1,
                        color: loadedChart.options.colors[i],
                        showInLegend: false
                    }));
            }
        });
    };

"dataHighStock" is just a regular json I pass, which looks something like this:

[ { type: "column", name: "Event Type 1", color: "#08A5E1", data: [ { x: 1431430804000, y: 1.7153846153846155, name: '1' }] }, { type: "column", name: "Event Type 2", color: "#772971", data: [ { x: 1431430804000, y: 3.63636, name: '14915'}] },  ]

I could make the tooltip "kinda" work (= 1 tooltip per column) when I changed the Highcharts creation to be done through Highcharts.chart(...) instead of Highcharts.StockChart(...) and removing the for loop in the navigator + removing the specific data displayed in the tooltip formatter ( $.each(this.points, ......){...} ). The downside to that is that I lose all the features of a StockChart (time range, navigator, etc.), obviously, but also the tooltip content.
Here is a jfiddle link that reproduces all this: https://jsfiddle.net/eq3mz7y1/20/