Vue-chartjs: Using ChartJs-Plugin-Datalabels as a local plugin

[RBrNx]

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

[apertureless]

Hey @RBrNx

I would say this is rather an issue with the plugin. Because it registers itself automatically in the global scope.

There are also issues about this https://github.com/chartjs/chartjs-plugin-datalabels/issues/42

[RBrNx]

@apertureless Thanks for your help, I'll try out the

// Globally disable datalabels
Chart.defaults.global.plugins.datalabels.display = false

suggestion and from there I should be able to use the addPlugin method to register it locally.

[apertureless]

👍

Don't forget to import chartjs. So you have access to the Chart.defaults... stuff.

[RBrNx]

I added

import Chart from 'chart.js';

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

to my main.js file and I was able to use the addPlugin function to register the Plugin locally for that Vue component.

Thank you for your help!

[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 ?

[RBrNx]

Hi @martinval,

Unfortunately I wrote this 6 months ago and I cannot for the life of me remember a single thing about it! I also don't have access to the code anymore so I am afraid I am no use to you.

However at a glance it seems that the way to unregister the plugin globally has changed as per the docs

Chart.plugins.unregister(ChartDataLabels);

Perhaps this might have some influence on your problem?

[filsuck]

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