AIDEA Weekly
한국어

↑↓ Enter Esc

CHT-010Line chart that draws itself

CHT-010

Line chart that draws itself

  • The line draws in from the left, with the current value riding its end.

Draw the monthly values as a line chart. The line draws in from the left over 2 seconds and the area below fills with a gradient of the same colour. Attach the current value at the end of the line as a speech bubble, and show the growth since the first month large in the top left.

[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