Can't use chartjs-plugin-datalabels

[Tyler-RCSD]

I am trying to add the chartjs-plugin-datalabels plugin to my charts and I think I've figured out how to add it.

I've created a minimal case here.

The problem is that I get this error:

chartjs-plugin-datalabels.js?a9be:155 Uncaught TypeError: Cannot read property 'x' of null
    at orient (chartjs-plugin-datalabels.js?a9be:155)
    at Object.fallback (chartjs-plugin-datalabels.js?a9be:379)
    at coordinates (chartjs-plugin-datalabels.js?a9be:847)
    at Object.draw (chartjs-plugin-datalabels.js?a9be:1011)
    at Object.afterDatasetsDraw (chartjs-plugin-datalabels.js?a9be:1330)
    at Object.notify (coreui-vue-chartjs.common.js?f485:10882)
    at Chart.drawDatasets (coreui-vue-chartjs.common.js?f485:12767)
    at Chart.draw (coreui-vue-chartjs.common.js?f485:12695)
    at Chart.render (coreui-vue-chartjs.common.js?f485:12649)
    at Object.callback (coreui-vue-chartjs.common.js?f485:5071)

I did some research and found this but I can't figure out how to implement it. There are also suggestions of downgrading to a 2.7.x version of chartjs but I think I'd have to rebuild coreui/vue-chartjs to even attempt that.

Any suggestions?

[alvarouribe]

I fixed my issue. (just register datalabels plugin LOCALLY per chart)

TypeError: Cannot read property 'x' of null

ChartDataLabels plugin was registered globally in another chart that I had. instead I register locally and that fixed my issue. Docs

basically I just had to remove this line in all my chart definitions

// Register the plugin to all charts:
Chart.register(ChartDataLabels);

instead I just need it the ChartDataLabels in my plugins object:

  plugins: [ChartDataLabels], ...```

[leodotcloud]

Here are the steps that worked for me:

npm install chartjs-plugin-datalabels --save

Here is the modified working example from the repo.

<template>
  <CChartDoughnut :data="defaultData" :plugins="defaultPlugins" />
</template>

<script>
import { CChartDoughnut } from '@coreui/vue-chartjs'
import ChartDataLabels from 'chartjs-plugin-datalabels'

export default {
  name: 'CChartDoughnutExample',
  components: { CChartDoughnut },
  computed: {
    defaultData() {
      return {
        labels: ['VueJs', 'EmberJs', 'VueJs', 'AngularJs'],
        datasets: [
          {
            backgroundColor: ['#41B883', '#E46651', '#00D8FF', '#DD1B16'],
            data: [40, 20, 80, 10],
            datalabels: {
              color: ['#000000', '#ffffff'],
              font: {
                size: 16,
              },
            },
          },
        ],
      }
    },
    defaultPlugins() {
      return [ChartDataLabels]
    },
  },
}
</script>

Diff for just the changes.

diff --git i/src/views/charts/CChartDoughnutExample.vue w/src/views/charts/CChartDoughnutExample.vue
index 653c8c8..e0e0df1 100644
--- i/src/views/charts/CChartDoughnutExample.vue
+++ w/src/views/charts/CChartDoughnutExample.vue
@@ -1,9 +1,11 @@
 <template>
-  <CChartDoughnut :data="defaultData" />
+  <CChartDoughnut :data="defaultData" :plugins="defaultPlugins" />
 </template>
 
 <script>
 import { CChartDoughnut } from '@coreui/vue-chartjs'
+import ChartDataLabels from 'chartjs-plugin-datalabels'
+
 export default {
   name: 'CChartDoughnutExample',
   components: { CChartDoughnut },
@@ -15,10 +17,19 @@ export default {
           {
             backgroundColor: ['#41B883', '#E46651', '#00D8FF', '#DD1B16'],
             data: [40, 20, 80, 10],
+            datalabels: {
+              color: ['#000000', '#ffffff'],
+              font: {
+                size: 16,
+              },
+            },
           },
         ],
       }
     },
+    defaultPlugins() {
+      return [ChartDataLabels]
+    },
   },
 }
 </script>