Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Dynamically update the options of a chart in chartjs using Javascript

I have created a line chart that is able to update its data successfully in chartjs and I am trying to change the option values dynamically as well. More specifically I want to be able to change the scale. I would like to avoid re-creating the chart everytime updates are needed. Is there a way to update the options dynamically such as :

myLiveChart.options.scaleStepWidth = 10;
myLiveChart.update();

Note: I have tried the following as well :

myLiveChart.scaleStepWidth = 10;

Also tried myLiveChart.render(); instead of update, but nothing seems to really work.

here is a fiddle illustrating the problem: http://jsbin.com/yaxafehixe/1/edit?html,js,output

like image 573
Rose Avatar asked Jul 28 '16 18:07

Rose


1 Answers

I found a solution that works in case anybody googles this. Here is the thing : I was using chartjs version 1, in which the update() function doesn't work in all cases, especially when you are trying to change the options of a chart. Therefore, switching to version 2, allowed me to use update() properly with changing the options such as :

myChart.options.scales.yAxes[0].ticks.min = someValue;

Here is a fiddle to demonstrate the solution to my problem in case anybody faces the same issue: http://jsbin.com/bamemuliyu/3/edit?html,js,output

like image 197
Rose Avatar answered Oct 02 '22 10:10

Rose