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

Portfolio Health bar chart, dark theme: Charcoal RAG status board with budget bars, colored spend overlays and variances.

Portfolio Health

DarkBar

Charcoal RAG status board with budget bars, colored spend overlays and variances.

  • Charcoal#18181B
  • Planned gray#3F3F46
  • On budget green#22C55E
  • Watch amber#F59E0B
  • Over red#EF4444

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 "Portfolio Health" 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 program office's capital portfolio status board. Serious charcoal, a tidy grid of rows, red-amber-green status that is impossible to miss but always backed by words and numbers.

Colors (use these exact values):
- Background: #18181B. Row rules and gridlines #27272A.
- Planned or reference bars: #3F3F46.
- Status: #22C55E (on or under), #F59E0B (watch, up to 10% over), #EF4444 (over, more than 10%).
- Title #FAFAFA, row names #E4E4E7, secondary text #A1A1AA, column headers #71717A.

Typography (Google Fonts):
- Archivo 700 27px for the title, -0.4px letter-spacing, stating the finding.
- Fira Sans for everything else: eyebrow 500 11.5px uppercase with 1.8px letter-spacing; subtitle 14px; column headers 600 10.5px uppercase with 1.3px letter-spacing; names 14px (600 for red rows); status pills 600 10px uppercase with 1px letter-spacing; value pairs 12px; variance 600 15px with tabular numbers; legend 12px.

Layout:
- 48px margins. Eyebrow at y 46, title at y 86, subtitle at y 112, column headers at y 150: PROJECT, STATUS, the chart column (with scale numbers 5, 10, "£15m" in the header), VARIANCE right-aligned at x 912.
- Rows on a 37px pitch separated by 1px #27272A rules: a 6px status dot at x 56 (red rows add a 10px ring at 35% opacity), the name at x 74, a status pill at x 232 (9px radius, status color at 14% fill, status-colored text), the bar column from x 336.
- A 1px #A1A1AA rule under the last row, then a bold total row with the overall variance. Legend and source share a line at y 578.
- Sort rows by variance, worst first.

Axes and grid:
- Vertical 1px #27272A gridlines at the scale steps through the rows only. No other axes.

Marks:
- Bar chart: a 20px #3F3F46 planned bar (3px radius) with an 8px actual bar (4px radius) centered on it in the row's status color. When actual exceeds planned, draw a 1.5px #FAFAFA tick at the planned end so the overrun reads. After the longer bar, "14.9 / 12.5" in 12px #A1A1AA. Right column: signed variance in the status color.
- Line chart: planned as a 2px #3F3F46 line and actual as a 2.5px line whose segments take the status color of each period, with 5px status dots and the same status pills and variance column for the latest point.

Avoid: relying on color alone (always keep the pill words and the signed percentage), gradients, glows, and bright borders.

When you're done, render the chart and check that every status matches its variance thresholds, the title's count is right, the total row sums correctly, and pill text fits inside its pill.