how can i use chartjs-plugin-annotation?

June 1, 2022

`<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.0.0/chart.min.js"></script>
    <script src="./chartjs-plugin-annotation-0.5.7/chartjs-plugin-annotation.min.js"></script>


</head>

<body>

    <canvas id="myChart" width="500" height="200"></canvas>

    <script>        
        const myChart = new Chart(
            document.getElementById('myChart'),
            config
        );
        const config = {
        type: 'line',
        data: {
            labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
            datasets: [{
            label: 'My First Dataset',
            data: [65, 59, 80, 81, 56, 55, 40],
            fill: false,
            borderColor: 'rgb(75, 192, 192)',
            tension: 0.1
            }]
        },
        options
        };
        const options = {
        plugins: {
            autocolors: false,
            annotation: {
            annotations: {
                line1: {
                type: 'line',
                yMin: 60,
                yMax: 60,
                borderColor: 'rgb(255, 99, 132)',
                borderWidth: 2,
                }
            }
            }
        }
        };
        
    </script>

</body>

</html>`

i wanted to use chartjs-plugin-annotation.

so i put chart.js 3.0.0 and chartjs-plugin-annotation.

but it doesn’t show any chart.

i copied several sample codes as well as this, but as a result chartjs-plugin-annotation did not work

what is the problem?

>Solution :

The constants options and config must be declared before they are used. Make sure also to use the latest versions of the Chart.js and chartjs-plugin-annotation libraries and check that both links (script.src) in are valid.

Please take a look at your amended code and see how it works.

const options = {
  plugins: {
    autocolors: false,
    annotation: {
      annotations: {
        line1: {
          type: 'line',
          yMin: 60,
          yMax: 60,
          borderColor: 'rgb(255, 99, 132)',
          borderWidth: 2
        }
      }
    }
  }
};
const config = {
  type: 'line',
  data: {
    labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
    datasets: [{
      label: 'My First Dataset',
      data: [65, 59, 80, 81, 56, 55, 40],
      fill: false,
      borderColor: 'rgb(75, 192, 192)',
      tension: 0.1
    }]
  },
  options
};

const myChart = new Chart('myChart', config);

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.8.0/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="myChart" width="500" height="200"></canvas>