How to add separate annotation style tooltip for Highcharts marker?

Question

Need to add separate tooltip for point marker.

I am using crosshair for displaying tooltip in Highcharts. Also, for some of the series data points I am adding a marker(in yellow circle). I want to know if it is possible to have a custom tooltip on hovering specifically on the marker point, but I would also like to retain the normal crosshair tooltip behavior on the same point (i.e. while hovering outside the yellow marker area for the same data point, tooltip should respect the tooltip formatter and on hovering exactly on the marker tooltip should show a different text related to the marker). Is it possible to achieve?

[My intention is to create a hoverable annotation marker, but at the same time retain the default tooltip behavior for the same point]

Please see the images below to get an idea about the expected behavior. Please ignore the series data, since they are generated dynamically, and is different on every page refresh. What I want to achieve is to have a crosshair tooltip for the '05-Jan-2019' data point, and also show a different looking or custom tooltip when user hovers specifically on the 'yellow' marker for the same data point.

Any suggestions related to alternative ways to achieve this are also welcome.

Here is how I am adding the marker in my series data :

function formatSeriesData(allSeries, annotations, categories) {
    for (let i = 0; i <= allSeries.length; i++) {

        let serie = allSeries[i];
        if (serie && !serie['color']) {
            serie = {
                ...serie,
                color: defaultColors[i]
            }
            allSeries[i] = serie;
        }

        //add annotations - if present
        if (serie && annotations && annotations.length) {
            const applicableAnnotations = _.filter(annotations, {
                name: serie.name
            });
            const annotationDates = _.map(applicableAnnotations, 'date'); //get all annotation dates
            let modifiedDataArray = [];
            let dataArray = serie.data; //get all series data
            for (let j = 0; j < dataArray.length; j++) {
                let dateForValue = categories[j]; //get the date corresponding to the value
                let annotation = _.find(applicableAnnotations, {
                    date: dateForValue
                });; //pick the annotation object
                let ptObj = {
                    dimension: "",
                    y: dataArray[j]
                };
                if (annotation && annotation.annotation) {
                    ptObj["marker"] = {
                        enabled: true,
                        radius: 6,
                        fillColor: '#FDBE2C',
                        symbol: 'circle'
                    };
                }
                modifiedDataArray.push(ptObj);
            }
            serie = {
                ...serie,
                data: modifiedDataArray
            }
            allSeries[i] = serie;
        }
    }
    console.log("allSeries ", allSeries);
    return allSeries;
}

ppotaczek ppotaczek · Accepted Answer · 2019-01-15T14:07:30

To achieve the wanted result you can create a chart with two series - line with disabled enableMouseTracking and scatter with default tooltip and mouse events to control the display of crosshair:

Highcharts.chart('container', {
    series: [{
        data: [1, 2, 3, 4],
        enableMouseTracking: false
    }, {
        color: 'yellow',
        events: {
            mouseOver: function() {
                this.xAxis.update({
                    crosshair: {
                        width: 0,
                        label: {
                            enabled: false
                        }
                    }
                });
            },
            mouseOut: function() {
                this.xAxis.update({
                    crosshair: {
                        width: 1,
                        label: {
                            enabled: true
                        }
                    }
                });
            }
        },
        marker: {
            radius: 8,
            symbol: 'circle'
        },
        stickyTracking: false,
        data: [{
            x: 2,
            y: 3
        }]
    }],
    xAxis: {
        crosshair: {
            label: {
                enabled: true
            },
            snap: false
        }
    }
});

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

API Reference:

https://api.highcharts.com/class-reference/Highcharts.Axis#update

https://api.highcharts.com/highcharts/series.line.enableMouseTracking

https://api.highcharts.com/highcharts/series.line.stickyTracking

How to add separate annotation style tooltip for Highcharts marker?

1 Answers