score:0

You could use the snap option of the tooltip and set its value to be -1. And also set the stickyTracking to false. This will allow the hover event to be captured only when the mouse pointer is hovered exactly over a particular point and does not fire the hover event to display tooltip midway between two points.

You can adjust the snap value to define starting from where does the tooltip need to be shown for a point. By default, it is 10px. That is, when the mouse enters a 10px radius around the point, the tooltip will be shown.

Highcharts.chart('container', {

    title: {
        text: 'Logarithmic axis demo'
    },

    xAxis: {
        tickInterval: 1
    },

    yAxis: {
        type: 'logarithmic',
        minorTickInterval: 0.1
        
    },

    tooltip: {
        crosshairs: true,
        snap: -1,
        hideDelay: 5000,
         backgroundColor: 'white',
            positioner: function () {
                return {
                    x: this.chart.plotLeft,
                    y: this.chart.plotTop
                }
            },
    },
    
        plotOptions: {
        series: {
            stickyTracking: false
        }
    },
  

    series: [{
        data: [1,0,1,1,0,0,0,1],
        step: 'left'
    }]
});
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>

<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>

https://api.highcharts.com/highcharts/tooltip.snap https://api.highcharts.com/highcharts/plotOptions.series.stickyTracking

Hope this helps!


Related Query

More Query from same tag