Dynamically update the options of a chart in chartjs using Javascript

Question

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

did you check the chartjs docs? this of any use - chartjs.org/docs/#scales-update-default-scale-config — Craicerjack
– Craicerjack, Commented Jul 28, 2016 at 19:16
@ Craicerjack :yes i did, but I couldn't find info on specifically want i wanted to do.. which is to update the options, and not the dataset. What i've tried so far (using the render or update function) is based on the docs . — Rose
– Rose, Commented Jul 28, 2016 at 19:20
problem is : i am not sure exactly where to check options such as: scaleOverride, scaleSteps ,scaleStepWidth: , scaleStartValue are not in scales section, they are directly under options section — Rose
– Rose, Commented Jul 28, 2016 at 19:33
yeah looking at the docs I dont know, it seems the options are added to the chart upon its creation and to update them you need to re-render the chart or re-create it... — Craicerjack
– Craicerjack, Commented Jul 28, 2016 at 19:43
@Craicerjack : that would suck a little. I don't think that's the case though, because in my fiddle I have tried myLiveChart.options.animation = true; and to my surprise it worked... which is weird because any other options i've tried, such as the ones i am trying to change, are not working... — Rose
– Rose, Commented Jul 28, 2016 at 20:00

Rose · Accepted Answer · 2016-07-29 01:50:01Z

25

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

answered Jul 29, 2016 at 1:50

Rose

2,8195 gold badges24 silver badges31 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Dynamically update the options of a chart in chartjs using Javascript

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related