Highcharts skipping shared tooltip points for large data sets

Question

Seems like Highcharts is skipping a few data points in the shared tooltip for high number of data points (2500+).

I am trying to render a dual axis chart with 2500+ data points for 4 series - using Highcharts. I am also using a shared tooltip option to render my custom tooltip html. But at times Highcharts skips 1 or 2 data points in the tooltip. For example, when I slowly hover over each of the points from left to right, then I am supposed to see '1st April' after '31st March'. But instead, I see '2nd April'. Is it a bug? Or am I missing something? (I have verified that all the dates are present in the categories passed to the Highcharts.)

tooltip: {
    borderColor: '#ccc',
    backgroundColor: 'transparent',
    borderWidth: 0,
    shadow: false,
    shared: true, //show all series values together
    useHTML: true,
    // hideDelay: 50000,
    formatter: function() {
        if (props.config.type == 'pie') {
            return 'Value : ' + this.y;
        } else {
            let html = '<div class="fixed-tooltip">';
            html += formatTooltipDate(this.x);
            if (this.points &&
                this.points.length > 1 &&
                props.config.type != "combination") { //multiple series*(see note below)
                //*combination series are having 1 point, so handled in the else section as single series.
                let dateIndex = props.config.data.categories.indexOf(this.x);
                console.log(" date ", this.x);
                console.log(" dateIndex ", dateIndex);
                if (props.config.type == "dual") {
                    let dualAxisTitles = props.config.dualAxisTitles;
                    html += formatDualSeriesTooltipData(this.x, dateIndex, this.points, dualAxisTitles);
                } else {
                    html += formatMultiSeriesTooltipData(this.x, dateIndex, this.points);
                }
            } else { //single series
                //for combination charts have a custom tooltip logic
                if (props.config.type == "combination") {
                    let dateIndex = props.config.data.categories.indexOf(this.x);
                    html += formatMultiSeriesTooltipData(this.x, dateIndex, props.config.data.series);
                } else {
                    let seriesColor = this.points[0].point.series.color;
                    let seriesName = this.points[0].point.series.name;
                    let value = this.points[0].y;
                    html += formatSingleSeriesTooltipData(value);
                }

            }
            html += '</div>';
            return html;
        }
    }
}

Expected to see a tooltip for "1st April" data point, after "31st March". Instead seeing tooltip for "2nd April" data point.

Hi Wenger, Could you provide us with some minimal live example? Everything seems to work well in the situation you described: jsfiddle.net/BlackLabel/omk4180p — ppotaczek
Hi ppotaczek, in that jsfiddle link you have provided, when I am hovering to right from "Jan 19, 20.52.29.723", should not the next point in the tooltip be : "Jan 19, 21.52.29.723" ? I am getting "Jan 19, 22.52.29.723" instead, always. Are you seeing the same behavior? ( Or, is that expected?) — Wenger
Wenger, It depends on the width of the chart. If there is not enough space for points (1px for 1 point), they can overlap -I think that is expected behavior. — ppotaczek
Got it! thanks. It shows all the points once I start zooming in. — Wenger

ppotaczek ppotaczek · Accepted Answer · 2019-01-16T08:34:47

The points are skipped if there is no enough space for them in the plot area (1px for 1 point). The solution is to set a adequate chart width:

chart: {
    width: 1000
},

Live demo: http://jsfiddle.net/BlackLabel/yjk0ta43/

API: https://api.highcharts.com/highstock/chart.width

Highcharts skipping shared tooltip points for large data sets

1 Answers