CODEWITHSUNDEEP
pluginsvuejs2vue-chartjs
Amer Sohail
Amer Sohail

Reputation: 61

chartjs-plugin-datalabels not working with Vue-chartjs

I am trying to configure and use datalabels plugin for chartjs but no success. I am using npm as project management tool so added plugin using '

npm install --save chartjs-plugin-datalabels

Imported it in my component

import ChartJSPluginDatalabels from "chartjs-plugin-datalabels";

Added it in components dependency

components: {
    ChartJSPluginDatalabels,
    ... }

Added it in options

  data: () => ({
    options: {
      responsive: true,
      maintainAspectRatio: false,
      tooltips:{
          enabled : true
      },
      plugins: {
        datalabels: {
            formatter: (value, ctx) => {
                
                let sum = 0;
                let dataArr = ctx.chart.data.datasets[0].data;
                dataArr.map(data => {
                    sum += data;
                });
                let percentage = (value*100 / sum).toFixed(2)+"%";
                return percentage;
            },
            color: '#fff',
        }
     }   
    }

Binded options with chartjs component

 <service-demand :width="300" :height="300"  :chartData="topServices" :options="options">/service-demand>

But its not working.

Any suggestion? I am using vuejs 2 and below is my package.json dependencies snippet

 "dependencies": {
    "axios": "^0.21.1",
    "chart.js": "^2.9.4",
    "core-js": "^2.6.12",
    "echarts": "^5.0.0",
    "express": "^4.17.1",
    "moment": "^2.29.1",
    "serve-static": "^1.14.1",
    "vue": "^2.6.12",
    "vue-chartjs": "^3.5.1",
    "vue-echarts": "^5.0.0-beta.0",
    "vue-i18n": "^8.22.2",
    "vue-peity": "^0.5.0",
    "vue-router": "^3.4.9",
    "vue2-google-maps": "^0.10.7",
    "vuetify": "^2.3.21",
    "vuex": "^3.6.0",
    "chartjs-plugin-datalabels": "^1.0.0"
  },

Upvotes: 4

Views: 2754

Answers (1)

habibirrahman
habibirrahman

Reputation: 61

On vuejs 2, don't forget to use register

import ChartJSPluginDatalabels from 'chartjs-plugin-datalabels'
  
ChartJS.register(ChartJSPluginDatalabels, ...)

Upvotes: 6

Related Questions