import chartjs plugin annotation

Question

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
                    }
                }]
            }
        }
    });

chartjs is working properly.

any suggestions?

Answer 1

Just found that i have imported another version of chartjs in other place in my project. after solving this conflict, the plugin worked properly.