Using ChartJs-Plugin-Datalabels as a local plugin

I have a Vue application with several Chart types using Chart.js. Iam currently trying to use the Chartjs-Plugin-Datalabels with only one of these charts, the Bar chart.

However, as soon as I import the ChartJS-Plugin-Datalabels plugin, it becomes activated for all of the Chart types in my application, even if I only import it within the BarChart.vue file.

<script>
import { Bar, HorizontalBar, mixins } from "vue-chartjs";
import ChartJSPluginDatalabels from "chartjs-plugin-datalabels"; //Activates in every chart type

export default {
    name: "BarChartWidget",
    mixins: [ mixins.reactiveProp ],
    props: [
        "chartData",
        "options",
    ],
    extends: Bar,
    mounted(){
        this.renderChart(this.chartData, this.options);
    }
}
</script>

I have tried adding this.addPlugin(ChartJSPluginDatalabels); to the mounted function, but this makes no difference.

Is there a way to use this Plugin only in this specific Vue component?

Environment

• vue.js version: 2.5.16
• vue-chart.js version: 3.3.2
• npm version: 5.6.0

[martinval]

Hi there @RBrNx,

I’m trying to apply what’s outlined in this thread, but I can’t get the data labels to show just on a single chart.

In my main.js file, this seems to be working fine:

import Chart from 'chart.js'
import ChartJsPluginDataLabels from 'chartjs-plugin-datalabels'
Chart.defaults.global.plugins.datalabels.display = false;

If I disable the last line the labels show on all the charts.

Then in 1 particular chart, I try to do this, but no labels are showing:

<script>
import { Bar } from 'vue-chartjs'
import ChartJsPluginDataLabels from 'chartjs-plugin-datalabels'

export default {
  extends: Bar,
  mounted () {
    this.addPlugin(ChartJsPluginDataLabels);
    this.renderChart({
        ......
    })
  }
}
</script>

Any ideas why this isn’t working ?

[filsuck]

Working fine with, import Chart from ‘chart.js’; import ChartDataLabels from ‘chartjs-plugin-datalabels’; Chart.plugins.unregister(ChartDataLabels);