Setting ChartJS plugin on vue-chartjs not working

Question

I am trying to change the canvas background color of my ChartJS chart to export it as an image but it has a black background. I've tried the workaround from the documentation but seems doesn't work. I have added the plugin definition, an example from ChartJS doc to my chartData. I believe I followed what the docs say from ChartJS and vue-chartjs but I don't understand what I did wrong. Is there another way to do this?

// inside vue template
<BarChart id="barChart" :chartData="chartData"/>

// inside js script
const chartData = {
                labels: [],
                datasets: [
                    {
                        label: "Positive",
                        backgroundColor: "#66bd63",
                        borderColor: "#66bd63",
                        barThickness: 40,
                        fill: false,
                        data: []
                    },
                    {
                        label: "Negative",
                        backgroundColor: "#f46d43",
                        borderColor: "#f46d43",
                        barThickness: 40,
                        fill: false,
                        data: []
                    },
                ],
                options: {
                    maintainAspectRatio: false,
                    responsive: true,
                    tooltips: {
                        mode: "index",
                        intersect: false
                    },
                    hover: {
                        mode: "nearest",
                        intersect: true
                    },
                    animation: {
                        onComplete: function() {
                            console.log("Hello")                        
                        }
                    },
                },
                plugins: [
                    {
                        id: 'custom_canvas_background_color',
                        beforeDraw: (chart) => {
                            const ctx = chart.canvas.getContext('2d');
                            ctx.save();
                            ctx.fillStyle = 'lightGreen'
                            ctx.restore()
                        }
                    }
                ]
            };

Answer 1

Completely forgot about this. But I fixed it. It was a typo error. Remember when passing your custom plugins, the plugins prop accepts an array.

<BarChart :chartData="chartData" :plugins="[plugin]"/>