Make data charts with Claude
Copy a table from a spreadsheet or CSV and put it where the prompt says [paste your table here]. Claude makes an animated chart as a single HTML file. Each scene has a sample table, so you can see what kind of table fits.
Shared conditions
The first row is the header. Put the CSS and JavaScript in a single HTML file, and draw with canvas or SVG without external libraries. Use a dark background with sharp numbers and text, and make sure text doesn't overlap at phone width. If prefers-reduced-motion is on, show the finished chart without motion.
01Line chart that draws itself
The line draws from the left, and the current value follows the end point.
| Month | Sales (10k KRW) |
|---|---|
| Jan | 320 |
| Feb | 410 |
| Mar | 380 |
| Apr | 520 |
| May | 610 |
| Jun | 740 |
Draw the monthly values as a line chart. The line draws from the left over 2 seconds, and the area below fills with a gradient of the same color. Attach the current value to the end of the line as a callout, and show the growth rate versus the first month in large type at the top left.
[paste your table here]02Bar chart race
Each month, the bars slide past each other and swap places.
| Month | Apple | Tangerine | Strawberry | Grape | Pear | Peach |
|---|---|---|---|---|---|---|
| Jan | 120 | 200 | 90 | 60 | 100 | 30 |
| Feb | 140 | 180 | 150 | 70 | 105 | 40 |
| Mar | 150 | 150 | 210 | 90 | 110 | 70 |
| Apr | 160 | 120 | 190 | 130 | 115 | 120 |
| May | 170 | 100 | 140 | 170 | 120 | 190 |
| Jun | 180 | 90 | 110 | 220 | 125 | 240 |
Make a horizontal bar chart race from a table where the first column is the month and the other columns are items. Values move smoothly between months, and when the ranking changes, bars slide up or down. Show the current month large and faded at the bottom right.
[paste your table here]03Donut shares
Slices fill in clockwise from 12 o'clock, and the total counts up in the middle.
| Category | Share (%) |
|---|---|
| Food | 38 |
| Housing | 27 |
| Leisure | 15 |
| Transport | 12 |
| Other | 8 |
Draw the share of each category as a donut chart. Slices fill in one after another, clockwise from 12 o'clock, and the total in the middle counts up from 0. Put a legend with color, name, and percent on the right, and once it's drawn, nudge the largest slice slightly outward. The total is [total and unit].
[paste your table here]04Wobbling gauge needle
The needle springs to the average, stops, and keeps wobbling slightly.
| Response | Satisfaction (out of 100) |
|---|---|
| 1 | 90 |
| 2 | 75 |
| 3 | 88 |
| 4 | 70 |
| 5 | 87 |
Show the average of the scores on a semicircle gauge. 0–50 is the pink zone, 50–75 is yellow, and 75–100 is green. The needle springs from 0 to the average, stops, and then keeps wobbling very slightly, while the average number counts up below it.
[paste your table here]05Calendar heatmap
Cells, one column per week, pop in like a wave.
| Date | Steps |
|---|---|
| Jul 6 | 4,270 |
| Jul 7 | 4,580 |
| Jul 8 | 10,260 |
| Jul 9 | 8,530 |
| Jul 10 | 7,430 |
| … | … |
Draw the daily values as a calendar heatmap with one column per week. Cells pop in like a wave starting from the leftmost week, and higher values are a darker [color]. Give the highest day a border and its value, put month names on top and weekdays on the left.
[paste your table here]06Two-period comparison
Bars grow one group at a time, and the change pops up on top.
| Quarter | Last year (100M KRW) | This year (100M KRW) |
|---|---|---|
| Q1 | 42 | 50 |
| Q2 | 48 | 57 |
| Q3 | 51 | 49 |
| Q4 | 60 | 78 |
Make a grouped bar chart comparing two periods side by side. The earlier period is light gray and the current period is [accent color]. Bars grow one group at a time, and once they're done, the percent change pops up on top: green if it went up, pink if it went down.
[paste your table here]07Scatter plot with trend line
Dots float up into place, then a trend line draws and shows the slope.
| Study hours | Score |
|---|---|
| 4.6 | 68 |
| 3.2 | 59 |
| 5 | 80 |
| 8.8 | 87 |
| 4.7 | 76 |
| … | … |
Draw the relationship between the two columns as a scatter plot. Dots float up from below one by one and settle into place, then a least-squares trend line draws from the left. At the end of the trend line, write the slope in the form "+N per 1 increase in x".
[paste your table here]08Stacked area
Layers rise one at a time from the bottom, and each layer's share appears at the end.
| Week | Search | Social | Direct |
|---|---|---|---|
| Week 1 | 1,370 | 769 | 826 |
| Week 2 | 1,420 | 755 | 891 |
| Week 3 | 1,495 | 932 | 949 |
| Week 4 | 1,477 | 1,100 | 949 |
| Week 5 | 1,606 | 1,072 | 936 |
| … | … | … | … |
Draw a stacked area chart from a table where the first column is the week and the other columns are channels. Layers rise one at a time from the bottom, each in a different color, with only the top edge drawn darker. Once it's drawn, add each layer's share for the last week at the right edge.
[paste your table here]09Radar comparison
Two polygons unfold from the center one after another and overlap.
| Category | Last year | This year |
|---|---|---|
| Speed | 6 | 8 |
| Price | 7 | 6 |
| Design | 5 | 8 |
| Support | 6 | 7 |
| Features | 5 | 7 |
| Stability | 7 | 8 |
Make a radar chart comparing scores per category across two series. The axes are the categories in the first column, and the series are the other columns. Each series' polygon unfolds from the center in turn, semi-transparent so the overlap shows the difference. Write each series' average on the right.
[paste your table here]10Sparklines in a table
A small line draws in each row in turn, with the change shown in color.
| Product | Weekly sales (weeks 1–12) |
|---|---|
| Mug | 60, 65, 70, 74, 82, 81, 76, 89, 94, 95, 100, 110 |
| Tote bag | 59, 66, 68, 61, 64, 68, 73, 75, 81, 76, 87, 89 |
| Postcard | 59, 65, 62, 60, 51, 55, 47, 42, 52, 55, 41, 37 |
| Sticker | 64, 58, 63, 64, 70, 59, 72, 73, 66, 60, 62, 77 |
| Keyring | 60, 58, 51, 53, 54, 40, 48, 34, 39, 40, 44, 31 |
Make a table with one row per product, and put a small trend line of weekly sales in each row. Each row's line draws a little later than the one above, and on the right, show this week's value and the change from last week as ▲ in green or ▼ in pink.
[paste your table here]