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

Surplus Deficit bar chart, dark theme: Diverging mint and coral bars on graphite with shaded recession columns.

Surplus Deficit

DarkBar

Diverging mint and coral bars on graphite with shaded recession columns.

  • Graphite#1C1D1F
  • Surplus mint#5FD3A6
  • Deficit coral#F2735E
  • Zero line#F5F5F2

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 "Surplus Deficit" 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 public finance explainer on a dark graphite screen. Blunt and readable: everything above the bold zero line is good news in mint, everything below is red ink in coral, and bad times are shaded in the background.

Colors (use these exact values):
- Background: #1C1D1F (graphite). Gridlines: #2C2E31.
- Positive values: #5FD3A6 (mint). Negative values: #F2735E (coral).
- Zero line and primary text: #F5F5F2. Secondary text and tick labels: #8E9196.
- Highlight periods (recessions): #F5F5F2 at 7% opacity.

Typography (Google Fonts):
- Chivo throughout (400, 600, 700, 800).
- Title: 30px 800, -0.4px letter-spacing, #F5F5F2, stating a finding computed from the data (for example "ran a surplus in only 15 of 36 years"). Subtitle: 16px 400 #8E9196 with measure, unit and period.
- Legend 13px 400 white. Tick labels 13px #8E9196 with explicit plus and minus signs (use a true minus sign). Value labels 9.5 to 11px 600 in the bar color. Highlight-period labels 9.5px 700 #8E9196. Callouts 12px 700 coral.

Layout:
- 56px left margin. Title at y 62, subtitle at y 90, a legend row at y 118 with 12px square swatches for Surplus, Deficit and Recession.
- Plot from x 96 to 904, y 176 to 512. Source note at the bottom left.

Axes and grid:
- Horizontal gridlines 1px #2C2E31 at every 2 units, tick labels right-aligned to the left. The zero tick label is 700 white.
- Zero line: 2.5px #F5F5F2, drawn on top of the bars, extending 4px left of the plot.
- Year labels every five years below the plot with small 5px ticks.

Marks:
- Bar chart: one vertical bar per period at 66% of the band, square-cornered, rising from zero in mint for positive values and falling in coral for negative ones. Each bar's value sits at its end: 6px above positive bars, 14px below negative bars, signed with one decimal. Recession or highlight periods are full-height translucent columns spanning whole bands (merged for consecutive years), rising 22px above the plot, labeled at the top ("2008–09"). Call out the extreme value with a short coral label beside its bar.
- Line chart: a 2.5px white line with the area between the line and zero filled mint (20% opacity) above zero and coral (20% opacity) below, split exactly at the zero crossings, with the same zero line, recession columns and signed labels at peaks and troughs.

Avoid: gradients, glows, rounded bar tops, 3D, a single color for both signs, and value labels inside the bars.

When you're done, render the chart and check that the zero line is on top of the bars, every value label is on the correct side of its bar and not clipped, recession columns align with whole bars, and the title count matches the data.