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

Emerald Night bar chart, dark theme: Coral gains and gold losses diverge from a cream zero line on deep emerald.

Emerald Night

DarkBar

Coral gains and gold losses diverge from a cream zero line on deep emerald.

  • Emerald#063B2E
  • Coral#FF7F66
  • Pale gold#F2D27A
  • Cream#F6EBD0
  • Mint#CDEBDD

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 "Emerald Night" 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 nature-report spread printed on deep green. Warm coral gains and pale gold losses, a serif headline, and a cream-framed panel that feels crafted rather than dashboard-like.

Colors (use these exact values):
- Page: #063B2E (deep emerald).
- Coral #FF7F66 for positive values, their labels, the big headline number and its caption.
- Pale gold #F2D27A for negative values and their labels.
- Cream #F6EBD0 for the headline, the zero line and the panel frame.
- Soft mint #CDEBDD for the subtitle, category labels and row separators (separators at 18% opacity). Dim mint #8FBFAA for the source.

Typography (Google Fonts):
- Fraunces 700 for the headline (34px, cream, two lines at y 72 and 110) and the oversized number (96px, -2px letter-spacing, coral, right-aligned at x 912, baseline y 116).
- Figtree for everything else: subtitle 400 17px mint; number caption 600 14px coral; category labels 500 16px mint; value labels 600 16px in the bar color; direction labels ("FEWER PAIRS", "MORE PAIRS") 600 11px uppercase with 1.6px letter-spacing; source 400 13px.

Layout:
- 48px margins. Headline and subtitle on the left, the big number with its caption top right.
- The chart panel: a rectangle from x 48, y 170, 864 x 372 px, with a 1.5px cream stroke and no fill.
- Category labels left-aligned inside the panel at x 68. The zero line sits right of center (x 540) so the longest bars on both sides fit.
- Source bottom left at y 578.

Axes and grid:
- No value axis or gridlines; every bar carries its value.
- A vertical 2.5px cream zero line spanning the panel with 12px insets.
- Thin 1px mint separators between rows, inset 16px from the panel frame.

Marks:
- Bar chart: diverging horizontal bars growing from the zero line, square ends, 20px tall on a 33px pitch, coral to the right for gains and gold to the left for losses, sorted from largest gain to largest loss. Values at the outer end, 8px away, with a proper minus sign.
- Line chart: one or two 3px lines (coral above zero, gold below, split at the cream zero line) with square markers 7px on each point, a light coral or gold area fill (15% opacity) between the line and zero, same framed panel and mint separators turned into horizontal gridlines.

Avoid: rounded bar ends, gradients, glows, red/green for good/bad, a legend (use direction labels), and a centered zero line that wastes space.

When you're done, render the chart and check that the big number equals the sum of the values, positive and negative labels sit on the outer ends, nothing crosses the cream frame, and the headline is true for the data.