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

Matching Campaign bar chart, dark theme: Near-black giving week with a progress rail and coral gifts topped by yellow match.

Matching Campaign

DarkBar

Near-black giving week with a progress rail and coral gifts topped by yellow match.

  • Near black#111111
  • Coral#FF6B6B
  • Match yellow#FFD166
  • White#FFFFFF
  • Rail track#2B2B2B

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 "Matching Campaign" 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: the live dashboard of a giving-week campaign. Bold, energetic and celebratory without being loud: near black, a fat fashion-poster serif headline, a progress rail and two warm colors.

Colors (use these exact values):
- Page: #111111 (near black).
- Base measure: #FF6B6B (bright coral). Stacked extra (match, bonus, top-up): #FFD166 (warm yellow).
- Markers, value labels and the headline: #FFFFFF. Progress rail track: #2B2B2B. Secondary text #9A9A9A; gridlines #262626; baseline #5A5A5A.

Typography (Google Fonts):
- Abril Fatface: headline 34px #FFFFFF, a two-clause sentence stating the finding.
- Work Sans for everything else: eyebrow 600 11px uppercase with 2.6px letter-spacing in coral; subtitle 15px #9A9A9A with measure, unit and the rule; rail labels 700 11 to 12px uppercase with 1 to 1.4px letter-spacing; value labels 700 14px white; category labels 600 12px uppercase with 1.6px letter-spacing (the key category in white, others #9A9A9A); legend 500 12px.

Layout:
- 56px side margins. Eyebrow at y 50, headline at 96, subtitle at 126.
- Progress rail at y 158, full width, 22px tall and fully rounded (radius 11): a #2B2B2B track filled with a coral segment for the base total and a yellow segment for the extra, labeled inside in #111111. A 2px white goal tick extending 6px above and below, labeled "GOAL" beneath; the achieved total and percent of goal in yellow beneath the rail at the left.
- Plot from x 104 to 904 and y 238 to 510. Legend (12px squares) bottom left, "Source: ..." bottom right.

Axes and grid:
- Horizontal 1px #262626 gridlines, a #5A5A5A baseline, left labels in 12px #9A9A9A with the unit on the top tick only.

Marks:
- Bar chart: wide square-cornered stacked bars (66px at seven categories). Coral base on the bottom, yellow extra on top with a 2px black gap between the segments; the total as a white value label 10px above. A 1px white vertical line where a threshold or cap is hit, with a white 700 uppercase label and a muted detail line to its right.
- Line chart: a 3px coral line for the base and a 3px yellow line for base plus extra, with the band between them filled yellow at 25%, 5px dots and the same white threshold line and progress rail.

Avoid: gradients, glows, rounded bar tops, more than two data colors, thin wispy type and gridlines brighter than #262626.

When you're done, render the chart and check that the match stops exactly at the cap, the rail totals equal the sum of the bars, the goal label doesn't collide with the rail labels, and every value label clears the bar above it.