Plotly.js: animate doesn't animate xaxis.range change for dates in timestamp units

Created on 4 Oct 2017  路  8Comments  路  Source: plotly/plotly.js

I've recorded the issue, might need to replay it a few times - http://recordit.co/fzDIRlNv6m. What's happening that on the button press the Plotly.animate() method is called with a layout change (no data change), the yaxis.range change is being animated, but the xaxis.range just gets reset to some weird dates (can see the labels at the bottom) and then set to the correct range instantly after the y-axis has been animated.

I tried passing in various date time representations (Date.getTime(), Date.toISOString() and the Plotly's yyyy-mm-dd HH:MM:SS.ssssss format).

bug

Most helpful comment

Looks like something is wrong in plotly.js. Even using datetime strings doesn't solve the problem:

https://codepen.io/etpinard/pen/zPzEXX?editors=0010

thanks for the report.

All 8 comments

Can you please share a reproducible example?

https://codepen.io/anon/pen/oGpYaz

And it works if you remove type: 'date' from layout.xaxis.

Sorry, but is this a issue with Plotly or I'm doing something wrong? To reproduce the issue you can toggle between states with the 'Zoom' button.

Looks like something is wrong in plotly.js. Even using datetime strings doesn't solve the problem:

https://codepen.io/etpinard/pen/zPzEXX?editors=0010

thanks for the report.

2 years later I'm encountering this issue too:

Minimal example, not working: https://codepen.io/pbrussee/pen/WNezzqd

Based on documentation example: https://codepen.io/plotly/pen/GjkZNk

Is there any roadmap on fixing this issue? I hope it won't be that difficult seeing animating a regular xaxis type does work.

edit: I've made a minimal workaround using axis type array and manually formatting: https://codepen.io/pbrussee/pen/YzKaLjQ

Ok I should have a fix out soon. Here are some before/after using:

https://54267-45646037-gh.circle-artifacts.com/0/dist/plotly.min.js

off

https://github.com/plotly/plotly.js/compare/fix-transition-axes-nonlinear


before: https://codepen.io/n-riesco/pen/GmoZEx
after: https://codepen.io/etpinard/pen/oNvKmMx?editors=1010

before: https://codepen.io/anon/pen/oGpYaz?editors=0010
after: https://codepen.io/etpinard/pen/jONgdev?editors=1010

before: https://codepen.io/pbrussee/pen/WNezzqd
after: https://codepen.io/etpinard/pen/eYOqobM


I apologise for taking this long this fix this issue. This was a fairly bad problem with a fairly easy solution; I feel a little embarrassed to not have fixed it sooner.

Looks good to me!
Thanks!

Thanks for checking @brussee !

Was this page helpful?
0 / 5 - 0 ratings