I get the flowing error when importing chartjs plugin annotation
Uncaught TypeError: t.defaults.describe is not a function
at chartjs-plugin-annotation.min.js:7:22552
at Array.forEach (<anonymous>)
at chartjs-plugin-annotation.min.js:7:22528
at chartjs-plugin-annotation.min.js:7:298
at chartjs-plugin-annotation.min.js:7:325
I'm using version 2.1.0 and chartjs version 4.1.1
<!-- chart.js -->
<script src="{{ url('/assets/plugins/chart.js/Chart.min.js') }}"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chartjs-plugin-annotation/2.1.0/chartjs-plugin-annotation.min.js"></script>
the annotation plugin is included in the chart options: code for chartjs as follow. i'm using laravel as framework
const hoursChart = document.getElementById('busiest-hours-chart').getContext('2d');
const arrayOfreservationHours = {{ Js::from($countreservationHours) }};
const annotation = {
type: 'line',
borderColor: 'black',
borderDash: [6, 6],
borderDashOffset: 0,
borderWidth: 3,
label: {
enabled: true,
content: 'aaa',
position: 'end'
},
scaleID: 'y',
value: 111
};
new Chart(hoursChart, {
type: 'bar',
data: {
labels: Object.keys(arrayOfreservationHours),
datasets: [{
data: Object.values(arrayOfreservationHours),
borderWidth: 1,
backgroundColor: '#9BD0F5',
}]
},
options: {
plugins: {
annotation: {
annotations: {
annotation
}
}
},
legend: {
display: false
},
scales: {
yAxes: [{
display: true,
ticks: {
beginAtZero: true
}
}]
}
}
});
any suggestions?
Just found that i have imported another version of chartjs in other place in my project. after solving this conflict, the plugin worked properly.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.