JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/chart.min.js"></script>
 <canvas id="myChart" width="400" height="150"></canvas>

JavaScript

var ctx = document.getElementById('myChart');

var myChart = new Chart(ctx, {
  type: 'line',
  data: {
    labels: ['Label 1', 'Label 2', 'Label 3', 'Label 4'],
    datasets: [{
        label: 'Dataset label',
        data: [60, 40, 50, 35]
      }
    ]
  },
  options: {
    interaction: {
      intersect: false,
      mode: 'index',
    }
  },
  plugins: [{
    afterDraw: chart => {
      if (chart.tooltip?._active?.length) {
        let x = chart.tooltip._active[0].element.x;
        let yAxis = chart.scales.y;
        let ctx = chart.ctx;
        ctx.save();
        ctx.beginPath();
        ctx.moveTo(x, yAxis.top);
        ctx.lineTo(x, yAxis.bottom);
        ctx.lineWidth = 1;
        ctx.strokeStyle = '#ff0000';
        ctx.stroke();
        ctx.restore();
      }
    }
  }],
});