J-T-McC/vue3-chartjs

Updating options does not have effect after update

Closed this issue · 2 comments

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>

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.

Fantastic! Thanks for the great library and and the swift response.