Scrub a hover line across a stacked chart and swap the KPI count at each column
Study the source, inspect the editable build, then adapt the treatment to your own content.
What the source does
A cream report page with a dark green sidebar shows a stacked area chart with a KPI card to its right reading a large '143'. The pointer moves onto the chart at about f10 and a thin vertical hover line with a highlighted x-axis label appears. As the pointer drags right the line jumps column to column: at f28 the KPI card swaps to '117' and its caption changes, at f48 it swaps to '96'. The page then begins to scroll upward at about f68.
Hover-driven data binding: a vertical scrub line snaps between columns and the linked KPI card hard-swaps its number and caption at each snap.
Phase notes
- Frame 0 — Chart at rest, KPI shows the total
- Frame 10 — Hover line appears at column five
- Frame 28 — Snap to column four, KPI swaps to 117
- Frame 48 — Snap to column three, KPI swaps to 96
- Frame 68 — Page starts scrolling
Use this example
- Watch the source and draft at normal speed. Compare the order of actions, the held states, and the transition into the result.
- Download the project and read its README before changing inputs. The package includes its implementation and declared dependencies.
- Replace the sample content through the package's documented input or content builder. Keep source footage in the research comparison.
- Render your adaptation and inspect text fit, framing, intermediate states, and entry and exit frames.
The source and remake are different assets. The original code-based illustration remains editable; source footage is a research reference. Read the retained findings below before using the choreography.
Recorded limits
- Visual fidelity is an authored draft judgement from sampled source frames; no independent blind review or native Resolve execution.