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

Promo Uplift bar chart, dark theme: Navy waterfall with yellow gains, slate red losses and a floating white net bar.

Promo Uplift

DarkBar

Navy waterfall with yellow gains, slate red losses and a floating white net bar.

  • Deep navy#111A33
  • Uplift yellow#FFD23F
  • Halo gold#E9D9A6
  • Slate red#C0525A
  • Net white#FFFFFF

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 "Promo Uplift" 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 trade promotion review deck. Deep navy, an elegant editorial serif headline, and a waterfall that makes gains glow yellow and losses read as muted red.

Colors (use these exact values):
- Background: #111A33. Ink: #F2F0E9. Secondary text: #8E97B3. Gridlines: #1F2A4A, baseline #3A4670.
- Starting total bar: #3E4A70 (slate navy). Main gain: #FFD23F (bright yellow). Secondary gain: #E9D9A6 (pale gold). Losses: #C0525A (slate red). Final net bar: #FFFFFF.

Typography (Google Fonts):
- Instrument Serif 400 for the title only, 40px, #F2F0E9, stating the finding.
- Epilogue for everything else: eyebrow 11.5px 600 uppercase with 2px letter-spacing, #8E97B3; subtitle 14.5px 400 #8E97B3; value labels 17px 700 in the bar's color (20px for the net bar; the slate start bar uses ink); category labels 13px 500 #8E97B3 on up to two lines, the net bar's label 700 in ink; axis labels and footer 12px.

Layout:
- 56px margins. Eyebrow at y 50, title at y 100, subtitle at y 130.
- Plot from x 96 to 904, y 196 to 486, equal slots with 78px bars. Source at bottom left (y 574), a totals note at bottom right.

Axes and grid:
- 1px #1F2A4A horizontal gridlines every 100 with labels right-aligned 12px left of the plot; zero line #3A4670. Y axis starts at zero.

Marks:
- Bar chart (waterfall): the starting total rises from zero; each step floats from the running total, gains up and losses down; the final net bar floats in white from the starting level to the end level. Bars have 2px corner radius. Signed value labels ("+186", with a true minus sign for losses) sit 11px above each bar. Thin dotted connectors (1px #8E97B3, 1.5 on 3 off) join the top of each step to the next, plus a fainter 60% dotted reference line at the starting level running into the net bar, with the net change as a percent of the start written just below its right end.
- Line chart: a 2.5px #F2F0E9 line for the base series with a 3px #FFD23F line for the promoted series, the gap between them filled #FFD23F at 15% where it is positive and #C0525A at 25% where negative, signed values at key points, and the same dotted reference line.

Avoid: 3D, gradients, drop shadows, green for gains, and label text inside bars.

When you're done, render the chart and check that the steps sum to the net bar, every connector meets the next bar exactly, labels never collide with bars, and the numbers in the title match the data.