Search code examples
chart.js

chartjs show nearest point on hover


I'm currently trying to reproduce the chart you can see on https://discordstatus.com/ for the API Response Time.

However I'm unable to always show the nearest label depending on the mouse position on the X axis. I've tried different configurations for interactions (Chart.js Interactions) but fail to get the desired outcome.

Also it would be nice to show a vertical line dependent on the current active point. As well as always show the tooltip at the top left.

Is this possible with the default chart.js library or do i have to add a plugin or some own modifications?

Here is my current configuration:

const data = {
    datasets: [{
        label: 'RTT',
        backgroundColor: '#C00122',
        borderColor: '#C00122',
        borderWidth: 2,
    }]
};

const config = {
    type: 'line',
    data: data,
    options: {
        animation: false,
        maintainAspectRatio: false,
        pasing: false,
        plugins: {
            legend: false
        },
        elements: {
            point: {
                radius: 1
            }
        },
        scales: {
            x: {
                type: 'time',
                time: {
                    unit: 'second',
                    displayFormats: {
                        'second': 'H:mm:ss',
                    }
                },
                ticks: {
                    minRotation: 0,
                    maxRotation: 0,
                    maxTicksLimit: 5
                }
            },
            y: {
                min: 0,
                ticks: {
                    stepSize: 10
                }
            }
        },
        hover: {
            mode: 'index'
        }
    }
};

EDIT: My datasets are filled dynamically as described here: Updating Charts


Solution

  • I post @Madluca answer in the comment here for helping future readers easy to find answer

    This problem can be resolved by

    options: {
        interaction: {
            intersect: false,
            mode: 'index'
        }
    }
    

    Here is doc https://www.chartjs.org/docs/latest/configuration/interactions.html#modes