New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Is there a way to update options? #195
Comments
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 :) |
Thank you @apertureless, work like a charm 👍 |
I also met this problem,Thank you @apertureless give the way to solve my problem |
When I do this, every time I update options, it rerenders, but increases hight of chart.. Will dig |
I have set
it is not a proper solution, but it's working |
just found this: #106. |
Probably the most correct way would be to do the following watch: {
options: function() {
this.$data._chart.options = this.options;
this.$data._chart.update();
},
}, |
Hm, I am not sure if this will work. https://www.chartjs.org/docs/latest/developers/api.html#updateconfig
But, as it re-renders the chart, it may work for options, too. |
It's in the main docs. https://www.chartjs.org/docs/latest/developers/updates.html#updating-options |
Ah nice! |
The only way which works fine for me it is next: chart.destroy(); and than: // initialize a new chart again with new options and data |
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
The text was updated successfully, but these errors were encountered: