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

Distribution Mix bar chart, dark theme: Midnight blue 100% stacked bars with a gold thread tracing the direct share.

Distribution Mix

DarkBar

Midnight blue 100% stacked bars with a gold thread tracing the direct share.

  • Midnight#0F1A33
  • Gold#E3B448
  • Dusty rose#D08C9A
  • Steel#5F7593
  • Sage#8DAA91

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 "Distribution Mix" 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 hotel group's channel distribution report on midnight blue. Composed and slightly luxurious: a warm serif headline, soft muted segment colors, and one gold thread showing the channel that matters.

Colors (use these exact values):
- Background: #0F1A33 (midnight blue).
- Series in stack order from the baseline: #E3B448 (gold, the highlighted series), #D08C9A (dusty rose), #5F7593 (steel), #8DAA91 (sage).
- Primary text: #EEF0F5. Secondary text: #9AA6BD. Gridlines: #25324F.

Typography (Google Fonts):
- Young Serif for the headline (31px, #EEF0F5, stating the finding) and for the big annotation numbers (28px gold for the highlight, 20px for the secondary figure).
- Urbanist for everything else: eyebrow 12px 700 uppercase in gold with 2.4px letter-spacing; subtitle 14px 500 secondary; legend 13.5px 600; tick labels 12px 500; in-segment values 12.5px 700 in #0F1A33 (in #EEF0F5 on the steel segment); per-bar figures 12px 600; month labels 13px 600 (the latest in primary text); notes 12.5px 500; source 11.5px 500.

Layout:
- 56px left margin. Eyebrow at y 50, headline at y 92, subtitle at y 120, a legend row of 12px rounded squares (radius 2) at y 142.
- Plot from x 96 to 820 and y 198 to 508, leaving a right gutter for annotations: the highlighted series' latest value in big gold serif with a two-line note, and above it a small figure block for the per-bar metric.

Axes and grid:
- 1px #25324F gridlines at 0, 25, 50, 75 and 100% with labels at 12px. No axis lines, no vertical grid.

Marks:
- Bar chart: 100% stacked vertical bars, 38px wide, square corners, 1.5px gaps between segments (the background shows through). Values printed in each segment taller than 22px. A small metric figure ("$114k") floats 12px above each bar. A 1.6px gold line runs across the top of every gold segment and steps between bars, ending in a 3.5px gold dot at the last bar.
- Line chart: a stacked 100% area version with the same colors and 1.5px background gaps between bands, or for plain lines, 2.5px lines in the same order with the highlighted series gold at 3px and its latest value in large gold serif; the same floating figures sit above the plot at each period.

Avoid: saturated primaries, white backgrounds, 3D, gradients, rounded bar tops, and a second highlight color.

When you're done, render the chart and check that every stack sums to 100, the gold line meets each gold segment top exactly, the floating figures don't collide with the 100% line, and the headline numbers match the first and last bars.