JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://www.chartjs.org/dist/3.0.0-beta.12/chart.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
<div class="chart">
  <canvas id="chart"></canvas>
</div>

CSS

.chart {
  max-width: 600px;
  max-height: 400px;
}

JavaScript

var ctx = document.getElementById("chart").getContext("2d");

Chart.defaults.parsing = false;

var chart = new Chart(ctx, {
  type: "line",
  data: {
    datasets: [
      {
      	label: 'My data',
        borderColor: "rgb(75, 192, 192)",
                data: [
                    {
                        t: 1,
                        y: 0
                    },
                    {
                        t: 2,
                        y: -1
                    },
                    {
                        t: 3,
                        y: 0
                    },
                ]

      }
    ]
  },
  options: {
    parsing: {
        xAxisKey: 't'
    },
  	scales: {
    	x: {
      	type: 'linear'
      }
    }
  }
});