JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://www.chartjs.org/dist/3.0.0-beta.10/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");

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

      }
    ]
  },
  options: {
  	scales: {
    	x: {
      	type: 'linear'
      },
      y: {
      	ticks: {
        	mirror: true
        }
      }
    }
  }
});