Drawing PQRST ECG Waveform on Grid Paper using React and Chart.js

Question

Question:

I'm currently working on a React project where I need to draw a PQRST ECG waveform using Chart.js on grid paper. I've managed to create a basic line chart, but I'm having trouble achieving the exact output on grid paper. The x-axis should represent the speed (mm/s), and the y-axis should represent chest/limb (mV). I want the chart to resemble grid paper with each square representing 1mm x 1mm.

Here's a simplified version of my current code: You can find the code that is more detailed here

// [Include a relevant portion of your React component code]
import React, { useEffect } from 'react';
import Chart from 'chart.js/auto';

const ECGChart = () => {
  useEffect(() => {
    // Dummy data for PQRST waveform
    // ...

    // Chart.js setup
    // ...
  }, []);

  return <canvas id="ecgChart" width="400" height="200"></canvas>;
};

export default ECGChart;

I've tried adjusting the scales and grid configurations in the Chart.js options, but the result is not what I expected. The waveform doesn't align with the grid properly.

Specific Issues: The detailed code is located here

1. The x-axis and y-axis scales don't match the grid paper dimensions.

2. The waveform doesn't align with the grid squares as intended.

Expected Output:

I'm aiming for a grid paper-like appearance where each square is 1mm x 1mm, and the ECG waveform accurately represents the electrical activity of the heart over time.

Any suggestions on how to achieve this or where I might be going wrong would be greatly appreciated. Feel free to suggest any other library which can give the expected result. Thank you!