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

Design Annual bar chart, dark theme: Charcoal page, wide display type, outlined index numbers and vermilion blocks.

Design Annual

DarkBar

Charcoal page, wide display type, outlined index numbers and vermilion blocks.

  • Charcoal#1B1B1D
  • Electric vermilion#FF4A1C
  • Warm white#F5F4F0

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 "Design Annual" 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 page from a design awards annual. Bold, graphic and confident: wide display type, big outlined index numbers and blocks of electric vermilion on charcoal.

Colors (use these exact values):
- Background: #1B1B1D (charcoal).
- Data: #FF4A1C (electric vermilion) for every bar; also the eyebrow.
- Type and baseline: #F5F4F0 (warm white). Secondary text (subtitle, total, source): #8C8A86.

Typography (Google Fonts):
- Unbounded throughout. Eyebrow 500 11px uppercase, 2.2px letter-spacing, in vermilion; the total on the right in the same style in gray.
- Title 700 34px, -0.8px letter-spacing, stating the finding. Subtitle 300 14px gray.
- Index numbers "01", "02"... 700 34px in outline only: no fill, 1.1px #F5F4F0 stroke.
- Values inside bars 500 13px white. Category labels 300 10.5px uppercase, 1px letter-spacing, white. Source 300 10px.

Layout:
- 56px side margins. Eyebrow at y 62, title at y 116, subtitle at y 146.
- Plot from x 56 to x 904 with its baseline at y 516; bars sorted descending, left-aligned text throughout (index numbers, values and category labels all start at the bar's left edge).
- Source bottom left at y 574.

Axes and grid:
- A single 1px #F5F4F0 baseline. No gridlines, no y-axis, no ticks: every bar carries its value.

Marks:
- Bar chart: wide vertical bars (about 75% of the band) with perfectly square tops in #FF4A1C. The outlined index number sits 12px above each bar's top, left-aligned with the bar. The value is set inside the base of the bar, 8px from its left edge and 12px above the baseline. The uppercase category label sits 26px under the baseline.
- Line chart: a 4px #FF4A1C line with square caps and miter joins, a square 10px vermilion marker at each point, the outlined index number above each marker and values in 500 13px white beside it; the same single white baseline and no gridlines.

Avoid: rounded corners, gradients, shadows, gridlines, more than one data color, lowercase category labels, and centered labels.

When you're done, render the chart and check that the index numbers are outlines (not filled), bars are sorted descending, the smallest bar is still tall enough to hold its value, the long category labels fit under their bars, and the title's percentage is computed from the data.