Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

chartjs show nearest point on hover

Tags:

chart.js

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

like image 946
MadLuca Avatar asked Dec 18 '25 19:12

MadLuca


1 Answers

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

like image 98
Bùi Đức Khánh Avatar answered Dec 20 '25 17:12

Bùi Đức Khánh



Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!