v4 - add vertical line to the mouse pointer #11845

helderneves91 · 2024-07-30T18:22:44Z

helderneves91
Jul 30, 2024

Hello, for context, I have a chart for ECG/EKG data with 12 datasets(derivations). Everything works fine and know I need to draw a vertical line to intersections points. Basically I need a vertical line to follow the mouse pointer. Can't find anything on documentation :| is this even possible?

To show the chart I use a canvas.
<canvas id="ecgChart"></canvas>

This is my js code to draw the chart.

    const labels = Array.from({ length: $wire.dataset[Object.keys($wire.dataset)[0]].length }, (_, i) => i);

    const datasets = Object.keys($wire.dataset).map(name => ({
        label: `${name}`,
        data: $wire.dataset[name],
        borderColor: getRandomColor(),
        borderWidth: 1,
        fill: false,
        pointRadius: 0,
        hidden: true
    }));

    const ctx = document.getElementById('ecgChart').getContext('2d');

    const chart = new Chart(ctx, {
        type: 'line',
        data: {
            labels: labels,
            datasets: datasets
        },
        options: {
            scales: {
                x: {
                    title: {
                        display: true,
                        text: 'Tempo'
                    },
                    grid: {
                        display: false
                    }
                },
                y: {
                    title: {
                        display: true,
                        text: 'Amplitude'
                    },
                    grid: {
                        display: false
                    }
                },
            },
            plugins: {
                zoom: {
                    zoom: {
                        wheel: {
                            enabled: true, // Habilita o zoom com a roda do mouse
                        },
                        pinch: {
                            enabled: true // Habilita o zoom com o toque (pinça) em dispositivos móveis
                        },
                        mode: 'xy' // Permite o zoom em ambos os eixos x e y
                    },
                    pan: {
                        enabled: true, // Habilita o movimento
                        mode: 'xy' // Permite o movimento em ambos os eixos x e y
                    }
                }
            }
        },
        plugins: [
            {
                id: 'gridBackground',
                beforeDraw: (chart) => {
                    const ctx = chart.ctx;
                    const width = chart.width;
                    const height = chart.height;
                    const gridSize = 20; // Tamanho da grade

                    ctx.save();
                    ctx.fillStyle = '#ffffff'; // Background color
                    ctx.fillRect(0, 0, width, height);

                    ctx.strokeStyle = '#f2acac'; // Color of grid lines
                    ctx.lineWidth = 0.5;

                    for (let x = 0; x < width; x += gridSize) {
                        ctx.beginPath();
                        ctx.moveTo(x, 0);
                        ctx.lineTo(x, height);
                        ctx.stroke();
                    }

                    for (let y = 0; y < height; y += gridSize) {
                        ctx.beginPath();
                        ctx.moveTo(0, y);
                        ctx.lineTo(width, y);
                        ctx.stroke();
                    }

                    ctx.restore();
                }
            },
        ]
    });

    document.getElementById('resetZoom').addEventListener('click', function() {
        chart.resetZoom();
    });

    function getRandomColor() {
        const letters = '0123456789ABCDEF';
        let color = '#';
        for (let i = 0; i < 6; i++) {
            color += letters[Math.floor(Math.random() * 16)];
        }
        return color;
    }

Thanks for any guidance!
Helder