Chartjs-ChartJS 3 vertical annotations

by

0👍

✅

First you configured the options in the wrong space, the plugin options have to go inside of the options object. The plugins section what you used is for an array containing inline plugins, secondly you need to include the annotation plugin after chart.js since chart.js needs to be loaded first because the annotation plugin uses some functions from chart.js:

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: {
    plugins: {
      annotation: {
        annotations: {
          line1: {
            type: 'line',
            mode: 'vertical',
            xMin: '09/11/2020',
            xMax: '09/11/2020',
            borderColor: "#56A6A6",
            borderWidth: 10
          }
        }
      }
    },
    responsive: true,
    maintainAspectRatio: false,
    bezierCurve: false,
    spanGaps: true,
    scales: {
      y: {
        beginAtZero: true
      }
    }
  },
});
<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>

Leave a comment