JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.7.1/chart.min.js"></script>
<!doctype html>
<html class="no-js" lang="en-gb">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
</head>

<body>
<main class="container">
  <section id="plot">
    <canvas id="sentences"></canvas>
  </section>
</main>
</body>
</html>

JavaScript

const data = {
  "datasets": [
    {
      "label": "Active",
      "sentences": [
        "A1",
        "A2",
        "A3"
      ],
      "data": [
        [
          "0.4340433805869016",
          "0.12813240157479788"
        ],
        [
          "-0.39983629799199083",
          "0.12125799115087213"
        ],
        [
          "-0.04289228113339527",
          "0.10106119377169194"
        ]
      ],
      "borderColor": "#43a047",
      "backgroundColor": "#7cb342"
    },
    {
      "label": "Passive",
      "sentences": [
        "P1",
        "P2",
        "P3"
      ],
      "data": [
        [
          "0.4295487808020268",
          "0.19271652809947026"
        ],
        [
          "-0.4438451670978469",
          "-0.08848766134414247"
        ],
        [
          "-0.10789534989054622",
          "0.08013654263956245"
        ]
      ],
      "borderColor": "#1e88e5",
      "backgroundColor": "#039be5"
    }
  ],
  "labels": []
};

new Chart(document.getElementById("sentences"), {
  type: "scatter",
  data: data,
  options: {
    responsive: true,
    plugins: {
      legend: {
        position: "top",
      },
      tooltip: {
        callbacks: {
          label: ctx => ctx.dataset.sentences[ctx.dataIndex]
        }
      }
    }
  }
});