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

Staffing Gaps bar chart, dark theme: Dark navy diverging ward bars, teal over plan, coral short, agency cover hatched.

Staffing Gaps

DarkBar

Dark navy diverging ward bars, teal over plan, coral short, agency cover hatched.

  • Dark navy#111827
  • Surplus teal#3AB5A0
  • Shortfall coral#EF6F5E
  • Primary text#E5E9F0

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 "Staffing Gaps" 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 nursing workforce board on dark navy. Technical, squared-off type, teal for good news, coral for gaps, and hatching for gaps papered over with agency staff.

Colors (use these exact values):
- Page: #111827 (dark navy).
- Surplus / positive: #3AB5A0 (teal). Also the eyebrow.
- Shortfall / negative: #EF6F5E (coral).
- Agency-covered part of a shortfall: diagonal hatching, 2.6px coral stripes on a 6px pitch rotated 45 degrees over the page color, with a 1px coral outline.
- Primary text #E5E9F0; secondary text #8A94A6; gridlines #1F2937; group header rules #2A3445.

Typography (Google Fonts):
- Jura (500, 600, 700) throughout. Eyebrow 12px 700 uppercase with 2.4px letter-spacing. Title 27px 700 stating the finding. Subtitle 14.5px 500 muted. Legend 13px 600. Group headers 11px 700 uppercase with 1.8px letter-spacing, muted. Row code 13px 700 in primary text followed by the row name 13px 500 muted. Value labels 13px 700 in the bar's color, using a true minus sign (−) for negatives.

Layout:
- 56px margins. Legend row under the subtitle with 22 x 12px swatches.
- Rows grouped by category: each group starts with a 22px header row (uppercase name, then a 1px rule running to the right edge), then 23px data rows with 13px bars.
- Bar area from x 318 to 892, with the zero line placed so the larger side gets more room.
- Under the axis, direction cues in the series colors: "Shifts short" and "Shifts over", each with a small filled triangle pointing away from zero (drawn as paths, since the font lacks arrow glyphs). Footer: source left, the overall net and agency totals right in 12px 700.

Axes and grid:
- 1px #1F2937 vertical gridlines every 5 units with signed labels (−15, −10, −5, +5) and a bold "0"; a 1.4px #E5E9F0 zero line drawn over the bars.
- No horizontal gridlines besides the group header rules.

Marks:
- Bar chart: square-cornered diverging bars from zero. Positive bars solid teal with "+N" 7px past the end. Negative bars: the uncovered part solid coral next to zero and the covered part hatched at the outer end, with "−N" (the full shortfall) 7px beyond it, right-aligned.
- Line chart: a 2.5px teal line above a zero line and coral below it (split the stroke at zero), small square 5px markers, and hatched coral bands between the line and zero where agency cover applied.

Avoid: rounded bars, gradients, glow, a second hue for groups, and red-green pairings (keep teal and coral).

When you're done, render the chart and check that hatched plus solid equals each full shortfall, the group totals in the title add up, the minus signs are true minus signs, and the hatching stays visible at thumbnail size.