ChartJs - annotation line can not drawn

Question

I'm trying to draw average price annoation but nothing happens.. Price bars were drawed as well but, nothing happens with annoation. Also I checked the console, there is no error or warning

const Chart = require("chart.js");

const ctx = document.querySelector("#canvas").getContext("2d");

new Chart(ctx, {
    type: 'bar',
    data: {
        labels: ["iPhone", "Samsung", "Xiaomi"],
        datasets: [
            {
                data: [1000, 700, 900]
            },
        ]
    },
    options: {
        title: {
            display: true,
            text: "Price Comparison",
            fontSize: 22,
            fontColor: "white",
        },
        legend: {
            display: false
        },

        responsive: true,
        scales: {
            yAxes: [{
                ticks: {
                    beginAtZero: true,
                    display: false
                }
            }],
        }
    },
    plugins: {
        annotation: {
            drawTime: 'afterDatasetsDraw',

            annotations: [{
                type: 'line',
                mode: 'horizontal',
                scaleID: 'y-axis-0',
                value: 750,
                borderColor: 'rgb(75, 192, 192)',
                borderWidth: 4,
                label: {
                    enabled: true,
                    content: 'Average Price'
                }
            }]
        }
    }
});

Answer 1

I found it. I forget to register the plugin. Before I used another plugin which is no manually ad required. But it seems some of plugins are not globally added. We should add them manually..

const Chart = require("chart.js");
const Annotation = require("chartjs-plugin-annotation");
Chart.plugins.register(Annotation);