I’m trying to make sure that a number counter above a graph matches the graph’s line animation perfectly. Right now, the number jumps to the final value irrespective of the duration, but I want it to smoothly follow the line animation.
I am trying to fix the issue by either of the following
- Is there any way to tune / sync the odometer and line animation
OR b) Is there a way to do this without adjusting duration settings?
OR - Can I somehow get the values as the graph animates, so I can
update the number counter in sync?
I have tried using the events listed here, but none of them emit a event on animation per frame.
https://plotly.com/javascript/plotlyjs-events/
Here is the counter / odometer that i have used
https://www.npmjs.com/package/vue-countup-v2
Here is the codesandbox demo