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

Alert Days bar chart, light theme: Heavy uppercase headline over stacked green-to-red alert bars sorted by red.

Alert Days

LightBar

Heavy uppercase headline over stacked green-to-red alert bars sorted by red.

  • Off-white#F6F4EF
  • Green#2A9D4B
  • Yellow#F4C531
  • Orange#F07C1B
  • Red#D7263D
  • Ink#1C1C1C

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 "Alert Days" 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 civil protection year-in-review panel. Loud, blunt headline over clean, saturated status colors on off-white; it should read like an official annual review that a newsroom would republish.

Colors (use these exact values):
- Page: #F6F4EF (off-white). Ink #1C1C1C. Secondary text #6B6862. Rules #D9D5CC.
- Four ordered status levels, from calm to severe: #2A9D4B (green), #F4C531 (yellow), #F07C1B (orange), #D7263D (red). Keep this order in the stack and in the legend.
- Labels inside segments: white on green, orange and red; #3A2E00 on yellow.
- A 48 x 6 px #D7263D accent bar above the title. Zero values in the side column use #B9B4AA.

Typography (Google Fonts):
- Anton 400 for the title: 36px, uppercase, 0.5px letter-spacing, #1C1C1C, stating the finding. Anton 26px for the numbers in the right-hand summary column.
- Roboto for everything else: subtitle 15px #6B6862; legend key 12px 700 uppercase with 1px letter-spacing plus a 12px #6B6862 meaning on the line below; row labels 15px 500 right-aligned; in-bar values 13px 700; axis labels 12px; source 12px; folio 11px 700 uppercase with 1.6px letter-spacing.

Layout:
- 56px side margins; accent bar at y 36, title baseline near y 92, subtitle near y 122.
- Legend of four level swatches (14 x 14 px) on a fixed 150px pitch starting at the left margin, near y 148.
- Category labels in a right-aligned column ending at x 184; bars from x 200 to 812; a right-hand summary column centered at x 858 with an 11px 700 uppercase header ("RED DAYS").
- A footer rule at y 552 with the source on the left and a folio on the right.

Axes and grid:
- No gridlines. A 1px #1C1C1C axis under the last bar with 5px ticks and labels (0, 100, 200, 300, and the total labeled with its unit at the end).

Marks:
- Bar chart: horizontal stacked bars 34px tall on a 51px row pitch, square corners, with a 2px page-colored gap between segments. Rows sorted by the most severe level, descending, ties broken by the next level. Print each segment's value 8px from its left edge when the segment is at least 30px wide. The summary column repeats the most severe value per row in red Anton (gray for zero).
- Line chart: one 3px line per series in the same four status colors with square caps, no smoothing, 5px filled dots at each point; end labels in 13px 700 Roboto at the right edge instead of a legend key; the same Anton headline and summary column of latest values.

Avoid: pastel versions of the status colors, rounded bars, gradients, shadows, gridlines and a legend that reorders the levels.

When you're done, render the chart and check that every stacked row sums to the same total, the sort matches the summary column, yellow segments use dark labels, and the headline number and comparison are arithmetically true.