`<!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?
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>