score:1

Accepted answer

You can preprocess your data and calculate the middle points. A null point doesn't have a marker and it's not possible to show a tooltip for it.

const data = [...];

const processedData = data.map((dataEl, index) => {
    if (!dataEl) {
        return {
            y: (data[index - 1] + data[index + 1]) / 2,
            isCalculatedValue: true,
            marker: {
                fillColor: 'red',
                radius: 1
            }
        }
    }

    return dataEl;
});

By using tooltip.formatter function, you can show the previous point value in a tooltip.

    tooltip: {
        formatter: function(tooltip) {
            let point = this.point;

            if (point.isCalculatedValue) {
                point = this.series.points[point.index - 1];
            }

            return "<span style='font-size: 10px'>" + point.category + "</span><br/>" +
                "<span style='color:" + point.series.color +
                "'>●</span> Line series: <b>" + point.y + "</b><br/>";
        }
    }

Live demo: https://jsfiddle.net/BlackLabel/nrmgaw6q/

API Reference: https://api.highcharts.com/highcharts/tooltip.formatter


Related Articles