Chart Prompts

1,337 ways to dress a line or bar chart, 669 light and 668 dark. Open any chart to see it full size and copy a prompt that gives your own chart the same look.

Every chart uses illustrative data. The prompts work with any coding agent and any charting library; they describe colors, type, spacing and marks precisely enough to reproduce each look.

← More from Emergent Mind Labs

Scrolly Step line chart, light theme: A scroll-driven explainer paused on one step, its span lit in deep teal.

Scrolly Step

LightLine

A scroll-driven explainer paused on one step, its span lit in deep teal.

  • Deep teal#0B6E70
  • Faded teal#B7D6D5
  • Context gray#C5CCD6
  • Slate ink#1E293B
  • Page white#FFFFFF

Prompt for your coding agent

Paste it with your chart's code. It restyles your data to match this chart.

Restyle my chart in the "Scrolly Step" style described below. Keep my data, chart type, title meaning and units; change only the presentation. Use the charting library this project already uses (plain SVG if there is none). If the library can't express a detail, draw it in a custom layer instead of dropping it. Measurements assume a 960 x 600 chart; scale them proportionally.

Mood: a frame from a scroll-driven data journalism explainer, paused on one step of the story. Clean white page, calm slate type, one deep teal story mark with only the part the text is talking about lit up, and a floating card that narrates it.

Colors (use these exact values):
- Page and card: #FFFFFF.
- Primary text: #1E293B (slate). Card body text: #334155. Secondary text, axis labels and source: #64748B.
- Story color: #0B6E70 (deep teal) for the highlighted part of the main series, its dots and labels, the kicker, the step label and the progress rail.
- The rest of the main series: #B7D6D5 (faded teal).
- Context series and inactive rail dots: #C5CCD6 (pale gray).
- Gridlines, card border, inactive progress segments: #E2E8F0.
- Shaded span: #0B6E70 at 8% opacity, with 1px #0B6E70 edge lines at 35% opacity.

Typography (Google Fonts):
- Newsreader for the title (600, 32px, #1E293B, stating the finding), the card headline (600, 24px) and the card paragraph (400, 15.5px, 24px line height, #334155).
- Public Sans for everything else: kicker 12px 700 uppercase with 2.2px letter-spacing in teal; subtitle 15px #64748B with measure, unit and period; axis labels 12.5px #64748B; direct series labels 12.5px (700 teal at 55% opacity for the main series, 500 #64748B for the context); highlighted value labels 14px 700 teal; span label 12px 700 teal with 1px letter-spacing; step label "STEP 2 OF 4" 12px 700 with 2px letter-spacing; source 12px #64748B.

Layout:
- 64px left margin for the header (kicker at y 54, title at 94, subtitle at 122).
- Chart on the left (x 88 to 578, y 180 to 500). A floating step card on the right: x 648, y 176, 260 x 300, 10px radius, 1px #E2E8F0 border and a soft shadow (0 6px 20px #0F172A at 10% plus 0 1px 2.4px at 8%).
- Card contents: a 3 x 18 px teal tab on the card's left edge beside "STEP 2 OF 4"; four 16 x 4 px pill segments (4px gaps, right-aligned) with completed steps teal and the rest #E2E8F0; a short headline naming the period; a 5 to 6 line paragraph that states the numbers the lit segment shows; a hairline and a "Keep scrolling" hint with a small down chevron (1.6px stroke).
- A progress rail at the far left (x 26): a 2px #E2E8F0 vertical line with four dots 50px apart; completed dots r 4.5 teal, the current one r 5.5 teal with a r 9 teal halo at 15%, upcoming ones r 4.5 white with a 1.5px #C5CCD6 ring; the rail is teal from the first dot to the current one.
- "Source: ..." at the bottom left, y 572.

Axes and grid:
- Horizontal 1px #E2E8F0 gridlines at round values, y labels right-aligned 10px left of the plot with the unit ("min") above the top label. No y-axis line.
- A 1px #1E293B baseline with 5px ticks at the labeled x positions.

Marks:
- Line chart: the context series in 2px #C5CCD6; the main series in 3px #B7D6D5 over its whole length, then the step's span redrawn on top in 3.5px #0B6E70, round caps and joins. Dots (r 5.5 teal, 2px white ring) at the span's start and end with their values in 14px 700 teal. A shaded vertical band behind the span with the period label ("2004–2012") centered above it. Direct labels at the line ends instead of a legend.
- Bar chart: bars 60% of the band, square corners, all #B7D6D5 except the bars inside the step's span in #0B6E70, with the same shaded band behind them, value labels on the lit bars only, and the context series drawn as a thin #C5CCD6 reference tick or line across each bar.

Labels and annotation:
- The card does the explaining; the chart carries only values for the lit span and end labels.

Avoid: more than one lit span, bright colors other than the teal, heavy borders, a legend box, and text inside the chart that repeats the card.

When you're done, render the chart and check that only the described span is fully saturated, the card's numbers match the data exactly, card text stays inside the card, and the end labels clear the card.