Chart Data Transition

Bars rise from zero height to their data values.

Add a "Bar Chart Grow" animation (also called an animated bar chart or bar chart entrance) to [where].
Each bar should rise from the baseline to its value one after another in a quick stagger, easing out smoothly as it settles.
Play it once when the chart comes into view, and show the finished chart right away to users who prefer reduced motion.

Horizontal bars swap ranks over time as values change.

Add a "Bar Chart Race" (also called a racing bar chart) to [where].
Horizontal bars should grow and shrink as values change over time and slide smoothly past each other whenever their rank changes, each keeping its label.
Move the bars with transforms instead of re-ordering the markup so swaps glide rather than jump, and give users a way to pause it.

A ring or pie fills clockwise to its percentage.

Add a "Donut Chart Fill" animation (also called a pie chart sweep or animated donut chart) to [where].
Starting at the top, each segment should sweep clockwise in turn until the ring shows its share, easing out smoothly as it finishes.
Play it once when the chart comes into view, and keep the actual values available as text for screen readers.

Vertical bars grow and shrink out of phase, like an audio equalizer.

Add a "Bar Loader (Equalizer)" loading animation (also called a bars loader or audio bars) to [where].
A few vertical bars should stretch and shrink out of step with each other like an audio equalizer, at a lively but even pace.
Keep the loop seamless, give it a status label for screen readers, and stop the motion for users who prefer reduced motion.

A number counts from a start value to a target value when it becomes visible.

Add a "Number Ticker" (also called count up or an animated counter) to [where].
When the number comes into view, it should count up from zero to its target, fast at first and slowing gently as it lands.
Use fixed-width digits so nothing around it jitters, count only once, and give screen readers and users who prefer reduced motion the final value right away.

Each digit rolls vertically to the new value when a number changes.

Add an "Odometer" number animation (also called rolling numbers or slot-machine digits) to [where].
When the value changes, each digit should roll vertically to its new digit, always rolling forward, with a slight stagger across digits and a small settle at the end.
Keep every digit the same width so the number does not shift, and expose only the final value to screen readers.