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

Headcount Cost bar chart, dark theme: Banded navy cost stacks in blue, cyan and pale with round headcount badges.

Headcount Cost

DarkBar

Banded navy cost stacks in blue, cyan and pale with round headcount badges.

  • Dark navy#0F1729
  • Steel blue#3B82F6
  • Cyan#22D3EE
  • Pale blue#E0F2FE

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 "Headcount Cost" 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 finance team's workforce-cost dashboard on dark navy. Precise, cool, slightly technical, with round headcount badges that put people next to the dollars.

Colors (use these exact values):
- Page: #0F1729 (dark navy) with subtle horizontal banding: alternate grid intervals filled #131D33, rules #24314D.
- Text: #F1F5F9 primary, #8595B3 secondary.
- Stack, bottom to top: #3B82F6 (steel blue, the largest component such as salary), #22D3EE (cyan, benefits), #E0F2FE (pale, employer taxes). Cyan also for the eyebrow and badge rings.

Typography (Google Fonts):
- Rethink Sans: title 700 30px #F1F5F9 with -0.4px letter-spacing, stating the finding; subtitle 400 15px #8595B3; legend 500 13px; category labels 600 14px; total labels above columns 700 16px with a 5px navy halo (paint-order stroke) so gridlines never cut through them.
- Chivo Mono: eyebrow 500 11.5px uppercase with 1.6px letter-spacing in cyan; axis labels 11px #8595B3 sitting 6px above their gridline; in-segment values 600 12px navy; per-category detail line ("$106K per head") 11px; badge numbers 600 12.5px; footer 11px.

Layout:
- 48px side margins; eyebrow at y 50, title at y 90, subtitle at y 116, a legend row at y 142 (12px swatches with 2px radius, plus an outlined circle for the badge).
- Plot from x 100 to 904, baseline y 486, with headroom above the tallest column for its total and badge. Category labels 24px below the baseline, detail line 18px below that. Footer notes at y 570.

Axes and grid:
- 1px #24314D horizontal rules at each tick running from 52px left of the plot to its right edge; every other interval filled #131D33. Y labels right-aligned 16px left of the plot, placed just above each rule. No axis lines.

Marks:
- Bar chart: stacked columns 72px wide, square except a 2px radius on the top pale segment, with a 2px navy gap between segments. Value labels inside the salary and benefits segments in navy mono. Above each column: the total in bold, then a 16px-radius headcount badge (navy fill, 1.6px cyan ring, number in mono) 46px above the column top.
- Line chart: a 3px #3B82F6 line for the main total with #22D3EE and #E0F2FE lines (2px, the pale one dashed 5 on, 4 off) for components, 5px navy-centered dots, and the same round headcount badges floating above each point of the main line.

Avoid: warm colors, glows, gradients on bars, 3D, and letting the pale segment touch the cyan one (keep the navy gap).

When you're done, render the chart and check that the title's share and total are computed from the data, badges clear the legend and the top rule, and the per-head figures equal total cost divided by headcount.