Problem hover last point

author(s): Alexandra

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/highcharts/10.3.3/highcharts.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/highcharts/10.3.3/modules/boost.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/highcharts/10.3.3/modules/accessibility.min.js"></script>

<figure class="highcharts-figure">
    <div id="container"></div>

</figure>

CSS

.highcharts-figure,
.highcharts-data-table table {
    min-width: 360px;
    max-width: 800px;
    margin: 1em auto;
}

.highcharts-data-table table {
    font-family: Verdana, sans-serif;
    border-collapse: collapse;
    border: 1px solid #ebebeb;
    margin: 10px auto;
    text-align: center;
    width: 100%;
    max-width: 500px;
}

.highcharts-data-table caption {
    padding: 1em 0;
    font-size: 1.2em;
    color: #555;
}

.highcharts-data-table th {
    font-weight: 600;
    padding: 0.5em;
}

.highcharts-data-table td,
.highcharts-data-table th,
.highcharts-data-table caption {
    padding: 0.5em;
}

.highcharts-data-table thead tr,
.highcharts-data-table tr:nth-child(even) {
    background: #f8f8f8;
}

.highcharts-data-table tr:hover {
    background: #f1f7ff;
}

JavaScript

fetch('https://gist.githubusercontent.com/Slayug/211570be03c37d3ee4244445b2c61be9/raw/7f923ee0720ea01226f63ac46ad9d985d93e0a28/highcharts_boost_data_bug_hover_last_point.json')
.then((response) => response.json())
.then((data) => {

console.log('last point is ', data.at(-1))


Highcharts.chart('container', {

    chart: {
        zoomType: 'xy'
    },
    

    title: {
        text: 'Highcharts drawing boost, last one must be: ' + data.at(-1)[1].toLocaleString(undefined, { maximumFractionDigits: 2, minimumFractionDigits: 2 })
    },

    subtitle: {
        text: 'Using the Boost module'
    },

    accessibility: {
        screenReaderSection: {
            beforeChartFormat: '<{headingTagName}>{chartTitle}</{headingTagName}><div>{chartSubtitle}</div><div>{chartLongdesc}</div><div>{xAxisDescription}</div><div>{yAxisDescription}</div>'
        }
    },

    tooltip: {
        valueDecimals: 2
    },

    xAxis: {
        type: 'datetime',
        max: 1681917297050
    },

    series: [{
    
        findNearestPointBy: 'xy',
        data: data,
        // set to 10000000 to disable boost mode
        // set to 1 to enable boost mode
        boostThreshold: 10,
        zoomType: 'xy',
        name: 'Hourly data points'
    }]

});


})