CODEWITHSUNDEEP
highcharts
TDo
TDo

Reputation: 744

HighChart - show tooltips for null on hover

I have a null value in my HighCharts line chart. I set connectNulls: true so that the line does not disconnect when the data is null. However I cannot hover over that null value. When I try to, it automatically jumps to the nearest non-null point.

Fiddle: https://jsfiddle.net/wmoxLy4r/2/

What I am trying to do is to:

1/ Allow hovering over null values

2/ When hovering over null values, I would like to show the value of the closest non-null value to the left. In this case it would show 129.2.

I thought about imputing the null value with the closest non-null value to its left but then the plot will be flat at that section due to 2 periods with the same values. I want the plot to looks like it does right now. Appreciate any help

Upvotes: 0

Views: 747

Answers (1)

ppotaczek
ppotaczek

Reputation: 39099

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

Upvotes: 1

Related Questions