How to use chartjs-plugin-datalabels for specific charts using vue-chart.js

Question

I'm trying to use chartjs-plugin-datalables for specific charts using vue-chartjs. So firstly i have unregistered the plugin globally from my main.js file as it is registered globally when imported.

import Chart from 'chart.js';
import ChartDataLabels from 'chartjs-plugin-datalabels';

Chart.defaults.global.plugins.datalabels.display = false;

Then i'm adding the plugin for specific chart. But no labels are showing.

import { Pie } from "vue-chartjs";
import ChartDataLabels from "chartjs-plugin-datalabels";
export default {
    extends: Pie,
    methods: {
        intChart() {
            var _this = this;
            this.renderChart({
                ..........       
            });
        }
    },

    mounted() {
        this.addPlugin(ChartDataLabels);
        this.intChart();
    }
};

If i disable the following line it works for all the charts.

Chart.defaults.global.plugins.datalabels.display = false;

Any idea why isn't it working for specific charts?

Answer 1

To disable the chartjs-plugin-datalabels globally i had to use

Chart.plugins.unregister(ChartDataLabels);

instead of

Chart.defaults.global.plugins.datalabels.display = false;

in my main.js file. Then addPlugin function works perfectly.