I am currently working with a chart component in Vue 3 using the composition API. My goal is to incorporate the datalabels plugin into this specific chart only.
Upon attempting to register the plugin outside of the chart's data or options, I noticed that all charts in the application end up with labels:
<script setup>
import {
Chart as ChartJS,
Title,
Tooltip,
Legend,
BarElement,
CategoryScale,
LinearScale,
} from 'chart.js'
import ChartJSPluginDatalabels from 'chartjs-plugin-datalabels'
import { Bar } from 'vue-chartjs'
ChartJS.register(CategoryScale, LinearScale, BarElement, Title, Tooltip, Legend,ChartJSPluginDatalabels)
</script>
I attempted to include the plugin within the data, but no changes were observed:
const data = {
plugins:[ChartJSPluginDatalabels],
labels: ['A', 'B','C'],
datasets: [
{
data: data1,
label: 'Data 1'
},
{
data: data2,
label: "Data 2"
}
]
}
I also experimented with adding it to the options. Using
plugins:[ChartJS.register(ChartJSPluginDatalabels)]The component's template is quite simple:
<template>
<Bar :data="data" :options="options" />
</template>