JSFiddle - React, Tailwind, and code Playground

HTML

<div>
  <canvas id="myChart"></canvas>
</div>

<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.0"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-annotation@3.0.1"></script>

<script>
  const ctx = document.getElementById('myChart');

  new Chart(ctx, {
    type: 'bar',
    data: {
      labels: [1, 2, 3, 4, 5, 6],
      
      datasets: [{
        label: '# of Votes',
        data: [12, 19, 3, 5, 2, 3],
        borderWidth: 1
      }]
    },
    options: {
      scales: {
        y: {
          beginAtZero: true
        }
      },      
      resizeDelay: 100,
      annotation: {
        annotations: {
          box1: {
            // Indicates the type of annotation
            type: 'box',
            xMin: 1,
            xMax: 2,
            yMin: 8,
            yMax: 10,
            backgroundColor: 'rgba(255, 99, 132, 0.25)'
          }
        }
      }
    }
  });
</script>