JSFiddle - React, Tailwind, and code Playground

by klenwell

HTML

<canvas id="myChart"></canvas>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
const ctx = document.getElementById("myChart").getContext("2d");

let hoveredDatasetIndex = null; // Track hovered dataset

const chart = new Chart(ctx, {
    type: "line",
    data: {
        labels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun"],
        datasets: Array.from({ length: 100 }, (_, i) => ({
            label: `Dataset ${i + 1}`,
            data: Array.from({ length: 6 }, () => Math.floor(Math.random() * 50)),
            borderColor: `hsl(${(i * 36) % 360}, 100%, 50%)`,
            borderWidth: (ctx) => (ctx.datasetIndex === hoveredDatasetIndex ? 4 : 1), // Thicker on hover
            backgroundColor: "transparent",
            pointRadius: 0, // Hide points for clarity
        })),
    },
    options: {
        responsive: true,
        interaction: {
            mode: "dataset",
            intersect: false,
        },
        onHover: (event, elements) => {
            if (elements.length > 0) {
                hoveredDatasetIndex = elements[0].datasetIndex;
            } else {
                hoveredDatasetIndex = null;
            }
            chart.draw(); // Redraw without full update for performance
        },
        plugins: {
            legend: {
                display: false, // Hide legend for large dataset clarity
            },
        },
    },
});
</script>