I have a few problems with plugins in chart.js/vue-chartjs
the relevant parts of the package.json
"chart.js": "^3.9.1",
"chartjs-plugin-datalabels": "^2.1.0",
"chartjs-plugin-labels": "^1.1.0",
"core-js": "^3.6.5",
"vue": "^3.0.0",
"vue-chartjs": "^4.1.2",
thats my component:
<template>
<Doughnut
:chart-options="chartOptions"
:chart-data="chartData"
:chart-id="chartId"
:dataset-id-key="datasetIdKey"
:plugins="plugins"
:css-classes="cssClasses"
:styles="styles"
:width="width"
:height="height"
/>
</template>
<script>
import { Doughnut } from 'vue-chartjs'
import {Chart as ChartJS,Title,Tooltip,Legend,ArcElement,CategoryScale,Plugin}from 'chart.js'
import ChartPluginLabels from 'chartjs-plugin-labels';
import ChartDataLabels from 'chartjs-plugin-datalabels';
ChartJS.register(ArcElement, CategoryScale, Legend, Tooltip, Title,) Tooltip, Title,
export default {
name: 'DoughnutChart1',
components: { Doughnut },
props: {
chartId: {
type: String,
default: 'doughnut-chart'
},
datasetIdKey: {
type: String,
default: 'label'
},
width: {
type: Number,
default: 800
},
height: {
type: Number,
default: 800
},
cssClasses: {
default: '',
type: String
},
styles: {
type: Object,
default: () => {}
},
plugins: {
type: Array,
default: () => [ChartDataLabels, ChartPluginLabels ]
}
},
data() {
return {
chartData: {
labels: ['Label 1', 'Label 2'],
datasets: [ {
data: [80, 20],
backgroundColor: ['#c89F04', '#787878'],
} ],
},
chartOptions: {
responsive: true,
maintainAspectRatio: false,
cutout: 300,
borderWidth: 0,
animation: {
duration: 2000,
delay: 1000,
},
plugins: {
labels: [
{
render: 'label',
position: 'outside'
},
{
render: 'percentage'
}
],
legend: {
position: 'bottom',
padding: 20,
labels: {
font: {
size: 20,
}
}
},
title: {
display: false,
text: "TITEL DER GRAFIK",
font: {
size:30,
}
},
// labels: {
//
datalabels: {
color: 'black',
anchor: 'end',
align: 'end',
offset: 15,
font: {
size:30,
}
},
legend: {
labels: {
font: {
size: 44
}
}
}
}
}
},
mounted() {
}
}
</script>
I can import the 2 Plugins.
Now, when inspecting the component I see the second plugin is empty? is there another plugin to show the labels on a donut? I think its not compatible with the current chart.js version!?!
when using the datalabel plugin, how can I show the label names instead of the values? Is there way to position the labels on the arc orientation?
