Updating options does not have effect after update
Closed this issue · 2 comments
bennorichters commented
An update to the options object of a chart is not visible after calling chartRef.value.update()
.
Example
I added a title to the Updating chart example from the README. When the data is changed (in updateChart
), the title is also changed but that does not have any effect.
<template>
<div style="height:600px;width: 600px;display: flex;flex-direction:column;">
<vue3-chart-js
:id="doughnutChart.id"
ref="chartRef"
:type="doughnutChart.type"
:data="doughnutChart.data"
:options="doughnutChart.options"
></vue3-chart-js>
<button @click="updateChart">Update Chart</button>
</div>
</template>
<script>
import { ref } from 'vue'
import Vue3ChartJs from '@j-t-mcc/vue3-chartjs'
export default {
name: 'App',
components: {
Vue3ChartJs,
},
setup () {
const chartRef = ref(null)
const doughnutChart = {
id: 'doughnut',
type: 'doughnut',
data: {
labels: ['VueJs', 'EmberJs', 'ReactJs', 'AngularJs'],
datasets: [
{
backgroundColor: [
'#41B883',
'#E46651',
'#00D8FF',
'#DD1B16'
],
data: [40, 20, 80, 10]
}
]
},
options: {title: {text: 'foo', display: true}}
}
const updateChart = () => {
doughnutChart.data.labels = ['Cats', 'Dogs', 'Hamsters', 'Dragons']
doughnutChart.data.datasets = [
{
backgroundColor: [
'#333333',
'#E46651',
'#00D8FF',
'#DD1B16'
],
data: [100, 20, 800, 20]
}
]
doughnutChart.options.title.text = 'bar';
chartRef.value.update()
}
return {
doughnutChart,
updateChart,
chartRef
}
},
}
</script>
J-T-McC commented
Thanks for reporting this.
I have pushed & tagged a fix for this (v0.3.0) and updated the example in the readme to include options updating.
bennorichters commented
Fantastic! Thanks for the great library and and the swift response.