Open Tyler-RCSD opened 3 years ago
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], ...```
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>
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:
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?