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