Access renderChart for vue-chartjs 4 using Vue Composition API

Question

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 { chartData }
  }
}
</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

Answer 1

If I understand your question correct you can just add the options to the component which is reactive :

<template>
  <Doughnut :chart-data="chartData" :chart-options="chartOptions" />
</template>

If you want to have default options you can merge with custom ones passed as props you can do something like

export default {
  components: { Doughnut },
  props: {
    customOptions: Object
  },
  setup(props) {
    const chartData = ref<ChartData>({ datasets: [] });
    const defaultOptions = {
      responsive: true
    }

    const chartOptions = computed(() => {
      return {...defaultOptions,...props.customOptions}
      })
    
    return { chartData, chartOptions }
  }
}