AIDEA Weekly
한국어

↑↓ Enter Esc

CHT-009Bar chart race

CHT-009

Bar chart race

  • Each month the bars slide and swap places.

Make a horizontal bar chart race from a table whose first column is the month and the other columns are items. Values blend smoothly between months, and when ranks change the bars slide up or down. Show the current month large and faint in the bottom right.

[paste your table here]

The first row is the header. Put CSS and JavaScript in a single HTML file and draw with canvas or SVG, without external libraries. Dark background, crisp numbers and text, and no overlapping text even at phone width. If prefers-reduced-motion is on, show the finished chart without motion.

Blanks

How to use

  1. Borrow (copy) the prompt.
  2. Replace the [brackets] with your own content. Type in the fields below and it updates at once.
  3. Paste it into a new Claude chat and open the HTML file it returns in a browser.

Process

  1. A scene from the guide "Animated data charts with Claude".
  2. The preview is drawn on this site to show the scene this prompt makes.

Same class CHT