Is there a way to update options?

Hi,

I have a form with inputs and when that form is filed and submited, I woulf like to change main title and title for axis.

This is component: <bar-chart :data="barData" :options="barOptions" :height="400"></bar-chart> import { Line, mixins } from "vue-chartjs"; export default Line.extend({ props: ["options", "chartData"], mixins: [mixins.reactiveProp], mounted() { this.renderChart(this.chartData, this.options); } });

and these are the options: barOptions: { title: { display: true, text: 'Change this thing', fontSize: 16, padding: 24 } }

I am wondering is there a way to change options on event or any other way after rendering of chart?

I am using importing component so I thought that I can call render function with LineChart.options.methods.renderChart(this.barData, this.barOptions) but this give me an error ‘canvas is undefined’

Environment

• vue.js version: 2.3.3
• vue-chart.js version: 2.8.6
• npm version: 5.3.0

[zanechua]

Probably the most correct way would be to do the following

    watch: {
        options: function() {
            this.$data._chart.options = this.options;
            this.$data._chart.update();
        },
    },

[apertureless]

Simply add a watcher to your chart component. So everytime you change the options it will re-render the chart.

import { Line, mixins } from "vue-chartjs";
export default Line.extend({
  props: ["options", "chartData"],
  mixins: [mixins.reactiveProp],
  mounted() {
    this.renderChart(this.chartData, this.options);
   },
   watch: {
     options () {
        this.renderChart(this.chartData, this.options);
     }
   }
});

Another way, would be over an EventBus or vuex . There are many possibilities 😃