chart.js - chartjs在悬停时显示最近点

Question

我目前正在尝试重现您可以在https://discordstatus.com/上看到的 API 响应时间图表。

但是，我无法始终根据 X 轴上的鼠标位置显示最近的标签。我尝试了不同的交互配置（Chart.js Interactions），但未能获得预期的结果。

此外，最好显示一条取决于当前活动点的垂直线。以及始终在左上角显示工具提示。

这是否可以使用默认的 chart.js 库，还是我必须添加插件或一些自己的修改？

这是我当前的配置：

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'
        }
    }
};

编辑：我的数据集是动态填充的，如下所述：更新图表

标签： chart.js