I am currently exploring the use of chartjs-plugin-datalabels with specific charts using vue-chartjs. Initially, I decided to unregister the plugin globally from my main.js file since it is automatically registered when imported.
import Chart from 'chart.js';
import ChartDataLabels from 'chartjs-plugin-datalabels';
Chart.defaults.global.plugins.datalabels.display = false;
After this step, I proceeded to add the plugin for a specific chart. However, despite my efforts, no labels are being displayed.
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();
}
};
Interestingly, if I comment out the following line, the functionality works for all charts:
Chart.defaults.global.plugins.datalabels.display = false;
Do you have any insights on why this setup is not working specifically for certain charts?