JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.min.js"></script>
<canvas id="myLine" width="1200" height="400"></canvas>

JavaScript

Chart.pluginService.register({
  // This works to coor th backgournd
  beforeDraw: function (chart, easing) {

  if (chart.config.options.chartArea && chart.config.options.chartArea.backgroundColor) {
    var ctx = chart.chart.ctx;
    var chartArea = chart.chartArea;

    var meta = chart.getDatasetMeta(0);

    var start = meta.data[1]._model.x;
    var stop  = meta.data[2]._model.x;
    
    console.log (start,stop);


    ctx.save();
    ctx.fillStyle = chart.config.options.chartArea.backgroundColor;
    console.log (chartArea);
    ctx.fillRect(start, chartArea.top, stop - start, chartArea.bottom - chartArea.top);
    ctx.restore();

    }
  }
});

var ctx = document.getElementById("myLine").getContext('2d');
 
input = {

  type: 'line',
  data: {
      
    labels:  ['Jan','Feb','Mar','Apr','May'],            
    datasets: [{ 
      data: [9,6,9,3,5,7],
      label: "Dataset 1",
      borderColor: "#3e95cd",
      fill: false
      }] 
    },
    
    options: {
      responsive:true,
      animation : false,
      bezierCurve : true,
      chartArea: {
        backgroundColor: 'rgba(251, 85, 85, 0.4)'
      },
      
      scales: {
        yAxes: [{
          ticks: {
            beginAtZero:false
            }
          }]
        },
    }
}
 
var myLine = new Chart(ctx, input);