# Chart update transition

> A dark teal bar chart that morphs between 2025 and 2026 when a segmented control switches, with the total counting to the new figure.

- Kind: Plan
- Page: https://ownlyplans.com/bhaskar/chart-update-transition/
- Licence: CC BY 4.0 (reuse with credit)

## Steps

### 1. Paste the prompt

The AI builds the chart and the switch.

Prompt:

```text
Build a single-file HTML chart update transition, 1280x720, very dark teal background #0b1a1a, chart panel #10282a, teal gradient bars (#2dd4bf to #0f766e), text #dffaf2, muted #7fb3a8. System fonts, no libraries.
Header: H1 "Revenue by month", muted subtitle, and on the right a segmented control with two options 2025 and 2026 and a teal sliding thumb behind the active option.
Chart panel (480px tall): four faint horizontal gridlines, eight vertical bars (Jan to Aug) with 10px rounded tops sitting on a baseline with month labels under them, and a big "Total" number at the top left that counts with a CSS @property integer animation.
Define each bar with two CSS variables for its 2025 and 2026 height (--a and --b) and animate height between them.
Motion (8 second loop): bars grow from 0 to their 2025 heights (staggered by .04s), hold, then the thumb slides to 2026 and every bar animates to its --b height while Total counts from 284 to 421 ($k); hold, then switch back to 2025 near the end for a seamless loop.
Respect prefers-reduced-motion. Return only the complete HTML.
```

### 2. Check the morph

Bars should change height smoothly when the thumb slides.

### 3. Check the total

It should count 284 to 421 and back.

Done when: You can see it working in the browser.

### 4. Make it real

Drive the heights from your data when the range changes.

## Files

- prompt.md: https://ownlyplans.com/bhaskar/chart-update-transition/prompt/ (The full prompt.)
- index.html.md: https://ownlyplans.com/bhaskar/chart-update-transition/index-html/ (Complete code of the result in the video.)

## About

Eight gradient bars grow in, then a sliding 2025/2026 switch moves across and every bar animates to its new height while the Total counts from $284k to $421k, then back. Topic inspired by OpenDesign's public dashboard prompt list; this prompt and design are written from scratch.

---
Also available as JSON: https://ownlyplans.com/bhaskar/chart-update-transition/?format=json
MCP server: https://ownlyplans.com/mcp