Repository: louislam/uptime-kuma
File: src/components/PingChart.vue (Vue)

Code before:
                        display: false,
                        position: "right",
                        grid: {
                            drawOnChartArea: false,
                        },
                        min: 0,
                        max: 1,
                        offset: false,
                    },
                },
                bounds: "ticks",
                plugins: {
                    tooltip: {
                        mode: "nearest",
                        intersect: false,
                        padding: 10,
                        backgroundColor: this.$root.theme === "light" ? "rgba(212,232,222,1.0)" : "rgba(32,42,38,1.0)",
                        bodyColor: this.$root.theme === "light" ? "rgba(12,12,18,1.0)" : "rgba(220,220,220,1.0)",
                        titleColor: this.$root.theme === "light" ? "rgba(12,12,18,1.0)" : "rgba(220,220,220,1.0)",
                        // No longer rely solely on datasetIndex === 0; we want to hide tooltips only for the bars
                        filter: function (tooltipItem) {
                            const ds = tooltipItem?.chart?.data?.datasets?.[tooltipItem.datasetIndex];
                            return ds && ds.type !== "bar";
                        },
                        callbacks: {
                            label: (context) => {
                                return ` ${new Intl.NumberFormat().format(context.parsed.y)} ms`;
                            },
                        }
                    },
                    legend: {
                        // Enable the legend and display only the non-bar datasets (the lines)
                        display: true,
                        position: "top",
                        align: "start",
                        // Indicates that the legend is clickable (cursor pointer)
                        onHover: function (event, legendItem, legend) {
                            if (legend && legend.chart && legend.chart.canvas) {
                                legend.chart.canvas.style.cursor = "pointer";
                            }
                        },
                        onLeave: function (event, legendItem, legend) {
                            if (legend && legend.chart && legend.chart.canvas) {
                                legend.chart.canvas.style.cursor = "";
                            }
                        },
                        labels: {
                            color: this.$root.theme === "light" ? "rgba(12,12,18,1.0)" : "rgba(220,220,220,1.0)",
                            // Filter to display only the lines in the legend
                            filter: function (legendItem, data) {
                                const ds = data.datasets[legendItem.datasetIndex];

Review comment (suggestion):
I think if we adjust the line below this comment, we even get the new Legent to be incuded in the label 🤔 

This way, we fix 100% of  the issue and not just 95% of it.
I have not looked into if this is difficult (=what is included in context), but if it is not we should do it.

Code after:
                        display: false,
                        position: "right",
                        grid: {
                            drawOnChartArea: false,
                        },
                        min: 0,
                        max: 1,
                        offset: false,
                    },
                },
                bounds: "ticks",
                plugins: {
                    tooltip: {
                        mode: "nearest",
                        intersect: false,
                        padding: 10,
                        backgroundColor: this.$root.theme === "light" ? "rgba(212,232,222,1.0)" : "rgba(32,42,38,1.0)",
                        bodyColor: this.$root.theme === "light" ? "rgba(12,12,18,1.0)" : "rgba(220,220,220,1.0)",
                        titleColor: this.$root.theme === "light" ? "rgba(12,12,18,1.0)" : "rgba(220,220,220,1.0)",
                        // No longer rely solely on datasetIndex === 0; we want to hide tooltips only for the bars
                        filter: function (tooltipItem) {
                            const ds = tooltipItem?.chart?.data?.datasets?.[tooltipItem.datasetIndex];
                            return ds && ds.type !== "bar";
                        },
                        callbacks: {
                            label: (context) => {
                                const label = context.dataset.label;
                                return `${label} ${new Intl.NumberFormat().format(context.parsed.y)} ms`;
                            },
                        }
                    },
                    legend: {
                        // Enable the legend and display only the non-bar datasets (the lines)
                        display: true,
                        position: "top",
                        align: "start",
                        // Indicates that the legend is clickable (cursor pointer)
                        onHover: function (event, legendItem, legend) {
                            if (legend && legend.chart && legend.chart.canvas) {
                                legend.chart.canvas.style.cursor = "pointer";
                            }
                        },
                        onLeave: function (event, legendItem, legend) {
                            if (legend && legend.chart && legend.chart.canvas) {
                                legend.chart.canvas.style.cursor = "";
                            }
                        },
                        labels: {
                            color: this.$root.theme === "light" ? "rgba(12,12,18,1.0)" : "rgba(220,220,220,1.0)",
                            // Filter to display only the lines in the legend
                            filter: function (legendItem, data) {