Vue-chartjs: Is there a way to update options?

[dinogit]

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

[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 :)

[dinogit]

Thank you @apertureless, work like a charm 👍

[huangche007]

I also met this problem,Thank you @apertureless give the way to solve my problem

[outluch]

When I do this, every time I update options, it rerenders, but increases hight of chart.. Will dig

[dinogit]

I have set

.chartjs-render-monitor {
    height: 400px !important;
}

it is not a proper solution, but it's working

[outluch]

just found this: https://github.com/apertureless/vue-chartjs/issues/106.

[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]

Hm, I am not sure if this will work.
At least how I understand the update() method it it should be called after changing datasets. There is no mention of options.

https://www.chartjs.org/docs/latest/developers/api.html#updateconfig

Triggers an update of the chart. This can be safely called after updating the data object. This will update all scales, legends, and then re-render the chart.

But, as it re-renders the chart, it may work for options, too.

[zanechua]

It's in the main docs.

https://www.chartjs.org/docs/latest/developers/updates.html#updating-options

[apertureless]

Ah nice!