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

Placements by Program bar chart, dark theme: Hopeful green-black annual review with grouped pastel bars and serif totals.

Placements by Program

DarkBar

Hopeful green-black annual review with grouped pastel bars and serif totals.

  • Green-black#0F1A15
  • Sage#A7C4A0
  • Soft blue#6F9BD1
  • Pale gold#E9D8A6
  • Cream#F2F0E6

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 "Placements by Program" 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 outcomes page of a nonprofit annual review. Deep, quiet green with soft pastel marks and a warm serif: hopeful and dignified rather than corporate.

Colors (use these exact values):
- Background: #0F1A15 (deep green-black).
- Series: #A7C4A0 (sage, also the accent), #6F9BD1 (soft blue) and #E9D8A6 (pale gold). Keep the blue between the sage and gold so the two lightest colors never sit side by side.
- Title and emphasized text: #F2F0E6 (cream). Secondary text: #8FA398. Bar value labels: #B9C7BE. Gridlines #1F2E27; zero line #3A4F44.
- Latest-period highlight: a sage panel at 6% opacity with 10px radius behind the latest group.

Typography (Google Fonts):
- Lora 600 for the title (34px, cream, stating the computed growth) and group totals (18px cream, 22px sage for the latest). Lora italic 400 14px sage for the closing note.
- Nunito Sans for the rest: eyebrow 700 11.5px uppercase with 2px letter-spacing in sage after a 40 x 3 px rounded sage rule; subtitle 15.5px #8FA398; legend 600 13.5px cream; bar values 600 11px; year labels 600 14px (800 cream for the latest); axis labels 12px.

Layout:
- 56px side margins. Eyebrow y 51, title y 98, subtitle y 126, legend row at y 168 with 14px rounded (3px) swatches.
- Plot from x 96 to 904 and y 240 to 494. Totals sit on one aligned row 18px above the plot, with a small "TOTAL" label (700 10px) in the y-label column.
- Footer rule at y 548; "Source: illustrative data" left and an italic sage summary line right at y 574.

Axes and grid:
- Horizontal 1px #1F2E27 gridlines at 5 steps with labels 12px left of the plot; no axis lines; years centered under each group.

Marks:
- Bar chart: grouped vertical bars, 34px wide with 6px gaps within a group, 4px rounded top corners, flat on the baseline. Each bar's value 7px above it. The group total above in serif.
- Line chart: one 3px line per program in the same colors with round joins, an r 5 dot at each year with a 2px background ring, values above the dots in 11px, the same totals row across the top and the latest-year highlight panel.

Avoid: saturated or neon colors, heavy strokes, gradients on bars, drop shadows, and a legend separated from the chart by more than one line.

When you're done, render the chart and check that totals equal the sum of each group, the title's growth matches first and last totals, the sage and gold bars are never adjacent, and the highlight panel doesn't cut through any label.