[FEATURE] Animate updates to axis?

[julianeden]

When I provide an update to the labels for an axis, I would like to have an option to animate that change....in my case I'd like to see the axis scroll left so that the left-most value disappears from view and the newly added value slides in on the right. It doesn't appear that there's any way to do this, currently.

[etimberg]

This is an interesting idea that I thought was requested before but I couldn't find an existing issue for. Unfortunately it will take a lot of work to implement this since all the axes will need to change. I'm not sure how feasible it is to implement this in Chart.js v2

[julianeden]

Okay! If anyone comes back to this later and wants to see a live example of what I mean, it's the last graph on this page, in this case a d3 example.

https://bost.ocks.org/mike/path/

[nagix]

I just released chartjs-plugin-streaming (GitHub & Tutorial), which provides the exactly same feature you are looking for. I'm now refactoring the code to use a custom scale ('realtime' scale type) to improve flexibility, and would like to contribute it to github.com/chartjs/* repository once I finish it.

[simonbrunel]

@nagix looks really good :) I didn't check the code, only the tutorials, very promising!

A few things I would recommend:

• use rollup instead of browserify (see this plugin | discussion)
• remove dist files from master (you can find here lot of topics about)

[nagix]

@simonbrunel Thanks for your suggestions. I will fix these shortly. I understand the dist issues from #3033.

[simonbrunel]

Sounds good and should be very easy since you already use the same release workflow as the Chart.js and chartjs-plugin-deferred repos, so dist files are already in tags and release downloads.

[etimberg]

@nagix this looks amazing!

[johanrd]

Whereas chartjs-plugin-streaming seems to solve the issue for animating the x-axis for streamed data, I still think that it would be very powerful for chart.js to include the possibility to animate the axes upon general calls to chart.update().

This simple yet powerful example (d3) shows how an axis animation can provide very useful context for how the scale changes, compared to just animating the datasets. Especially the Y-axis animation is helpful to grasp the scale of the update more easily:

[johanrd]

@etimberg closed as completed – Is this part of the v4.0.0 release, or any other docs on how to achieve this?
thanks!