JSFiddle - React, Tailwind, and code Playground

by divaka

HTML

<!DOCTYPE html>
<html>
<head>
  <title>Scatter Chart</title>
  <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
</head>
<body>
  <canvas id="scatter-chart"></canvas>

  <script>
    var x = [1, 2, 3, 4, 5];
    var y = [2, 4, 6, 8, 10];
    var z = [5, 4, 3, 2, 1];
    var v = [1, 3, 5, 7, 9];

    var data = {
      datasets: [{
        label: 'A',
        data: [],
        backgroundColor: 'rgba(255, 99, 132, 0.5)'
      }, {
        label: 'B',
        data: [],
        backgroundColor: 'rgba(54, 162, 235, 0.5)'
      }]
    };

    for (var i = 0; i < x.length; i++) {
      data.datasets[0].data.push({ x: x[i], y: y[i] });
      data.datasets[1].data.push({ x: z[i], y: v[i] });
    }

    var options = {
      scales: {
        xAxes: [{
          scaleLabel: {
            display: true,
            labelString: 'X'
          }
        }],
        yAxes: [{
          scaleLabel: {
            display: true,
            labelString: 'Y'
          }
        }]
      }
    };

    var ctx = document.getElementById('scatter-chart').getContext('2d');
    var scatterChart = new Chart(ctx, {
      type: 'scatter',
      data: data,
      options: options
    });
  </script>
</body>
</html>