I would like to set some default Options on my Chart Component in order to avoid appending those in every class calling my component.
In vue-chartjs 3 it was possible calling the renderChart method and override the current options for the chart, but I am not able to replicate it using vue-chartjs 4 and vue 3 composition API
Ex. in vue-chartjs 3
import { Line, mixins } from 'vue-chartjs'
export default {
extends: Line,
mixins: [mixins.reactiveProp],
props: ['chartData', 'options'],
mounted () {
this.renderChart(this.chartData, this.options)
}
}
Mixins are not available on this version.
Do you have any idea how this could be accomplished?
This is my code using vue-chartjs 4
<template>
<Doughnut :chartData="chartData" />
</template>
<script lang="ts">
import { ref } from 'vue'
import { Doughnut } from 'vue-chartjs'
import { Chart as ChartJS, registerables, ChartData } from 'chart.js'
ChartJS.register(...registerables);
export default {
components: { Doughnut },
setup() {
const chartData = ref<ChartData>({ datasets: [] });
const defaultOptions = {
responsive: true
}
// Here I want to append my default options to current options
return { graph, chartData, chartId }
}
}
</script>
I have been checking the documentation, but I was not able to make it work.
https://vue-chartjs.org/migration-guides/#new-reactivity-system