JSFiddle - React, Tailwind, and code Playground

by gray_niall

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.7.1/chart.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chartjs-plugin-annotation/1.4.0/chartjs-plugin-annotation.min.js"></script>
<canvas id="chart1" height="400">

</canvas>

JavaScript

const data = {
  "labels": [
    "07/09/2020",
    "14/09/2020",
    "21/09/2020",
    "28/09/2020",
    "05/10/2020",
    "19/10/2020",
    "02/11/2020",
    "09/11/2020",
    "16/11/2020",
    "23/11/2020",
    "30/11/2020",
    "07/12/2020",
    "14/12/2020",
    "04/01/2021",
    "11/01/2021",
    "18/01/2021",
    "25/01/2021",
    "01/02/2021",
    "08/02/2021",
    "22/02/2021",
    "01/03/2021",
    "08/03/2021",
    "15/03/2021",
    "22/03/2021",
    "29/03/2021",
    "19/04/2021",
    "26/04/2021",
    "03/05/2021",
    "10/05/2021",
    "17/05/2021",
    "24/05/2021",
    "07/06/2021",
    "14/06/2021",
    "21/06/2021"
  ],
  "datasets": [{
    "label": [
      "Information"
    ],
    "data": [
      "90",
      "92",
      "94.29",
      "100",
      "100",
      "93.85",
      "90",
      "95.38",
      "90",
      "98.95",
      "100",
      "100",
      "100",
      null,
      null,
      "60",
      null,
      null,
      null,
      null,
      "80",
      "100",
      null,
      "100",
      null,
      "80",
      "100",
      null,
      "100",
      "100",
      "100",
      "100",
      "100",
      "100"
    ],
    fill: false,
    borderColor: 'rgb(75, 192, 192)'
  }]
}

var chart = new Chart('chart1', {
  type: 'line',
  data: data,
  options: {
    responsive: true,
    maintainAspectRatio: false,
    bezierCurve: false,
    spanGaps: true,
    scales: {
      y: {
        beginAtZero: true
      }
    }
  },
  plugins: {
    annotation: {
      annotations: {
        line1: {
          type: 'line',
          mode: 'vertical',
          xMin: '09/11/2020',
          xMax: '09/11/2020',
          borderColor: "#56A6A6",
          borderWidth: 10
        }
      }
    }
  }
});