JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-annotation@3.0.1/dist/chartjs-plugin-annotation.min.js"></script>
<html>
  <head>
  <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-annotation@3.0.1/dist/chartjs-plugin-annotation.min.js"></script>
    <title>Chart test</title>
  </head>
  <body>
    <canvas id='myChart'></canvas>
  </body>
</html>

TypeScript

console.log(Chart);
const data = Array(200).fill().map((_, i) => i + 1).map(
  val => val / 2
).map(val => ({
  x: val,
  y: 16
}));

console.log(data);

const chartOpts = {
	type: 'line',
  data: {
  	datasets: [{
    	label: 'Y Values',
      data: data,
    }],
  }
  options: {
    scales: {
      x: {
        type: 'linear',
        ticks: {
         
        },
        title: {
          display: true,
          text: 'X Values',
          align: 'center'
        }
      }
    },
    plugins: {
      annotation: {
        marker: {
          type: 'point',
          xValue: 50.0,
          yValue: 16.0,
          pointStyle: 'crossRot',
          radius: 20
        },
        label1: {
        	type: 'label',
          xValue: 30.0,
          yValue: 16.4,
          content: ['this is a label'],
          font: {
          	size: 18
          }
        }
      }
    }
  }
}

const ctx = document.getElementById('myChart');
const chart = new Chart(ctx, chartOpts);