Vue-chartjs: Options chart not updated

[LeeLenaleee]

Hi,

When I am loading in all my data in my chart everything goes fine all options get set correctly, if I update something that defines part of the options it indeed updates them (generates extra Y axes on demand), this is I think because the data also updates since if I only update an option but not modify the data my watcher fires that the options have changed but the update method doesnt update the chart. Only if I call a rerender it works.

LineChart component:

<script>
import { Line, mixins } from 'vue-chartjs';
const { reactiveProp } = mixins;

export default {
  extends: Line,
  name: "LineChart",
  mixins: [reactiveProp],
  props: {
    chartData: { type: Object },
    options: { type: Object },
    optionsChanged: { type: Boolean }
  },
  mounted () {
    this.renderChart(this.chartData, this.options);
  },
  watch: {
    options: {
      deep: true,
      handler () {
        // this.updateChart();
        this.renderChart(this.chartData, this.options);
      }
    },
  },
  methods: {
    updateChart () {
      this.$data._chart.update();
    },
  }
}
</script>

Expected Behavior

On options change the updatechart method should update the chart with the new options.

Actual Behavior

The updatechart method doesnt do anything, only the renderChart works

Environment

• vue.js version: 2.6.11
• vue-chart.js version: 3.5.1
• chart.js version: 2.9.3
• npm version: 6.14.6

[apertureless]

1. The options are not reactive. Thus, a change in the options object will not trigger a re-rendering of the chart. https://vue-chartjs.org/guide/#options

2. this.$data._chart.update() is a call to Chart.js update() api

If you take a look at the examples from chart.js you may think that update() should work, but in the examples, the options are changed directly in the chart instance.

chart.options.scales.yAxes[0] = {
        type: 'logarithmic'
    };
    chart.update();

But in vue-chartjs you are passing the options object which will be used to initially create the chart instance.

this.chart = new Chart(canvasElement, {
  type: chartType,
  data: data,
  options: options,
})

So changing the options object will not change the options in the chart instance. Thus this.$data._chart.update(); will not work.

You could try to overwrite the options in the chartjs instance. And then call update(). This should work. However, I did not tested it.

updateChart () {
  this.$data._chart.options = this.options;
  this.$data._chart.update();
},

[LeeLenaleee]

This works indeed,
Thanks for the quick reply and explanation.

[deefeloper]

I suggest this issue is re-opened as it does seem like a bug. When I have time I'll see if I can propose a PR.