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

Colony Census bar chart, dark theme: Ice white bars over ghost outlines with teal and coral percent changes.

Colony Census

DarkBar

Ice white bars over ghost outlines with teal and coral percent changes.

  • Dark slate#18202A
  • Ice white#E6EDF3
  • Ghost gray#8595A6
  • Gain teal#3CC7B4
  • Loss coral#F2846D

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 "Colony Census" 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 wildlife monitoring report on dark slate. Clean ice white bars with the previous count as a thin ghost behind them, and colored percent changes that read before anything else.

Colors (use these exact values):
- Page: #18202A (dark slate).
- Current values: #E6EDF3 (ice white).
- Previous values (ghost): #8595A6 outline, with the same color at 8% opacity as fill.
- Gains: #3CC7B4 (teal), also for the eyebrow. Losses: #F2846D (coral).
- Ink: #EEF2F6. Secondary text: #8A97A6. Gridlines: #263241.

Typography (Google Fonts):
- Palanquin throughout. Eyebrow 12px 600 uppercase with 2.4px letter-spacing in teal. Title 32px 700 #EEF2F6 stating the finding. Subtitle 15.5px 400 #8A97A6 with the measure, periods and the combined total. Change labels 17px 700 in teal or coral. "from 4,820" previous-value labels 11.5px #8A97A6. In-bar values 13px 600 in the page color. Category names 14.5px 600 ink, with a 12.5px #8A97A6 secondary line (latitude) beneath. Tick labels 12px. Legend 13px 500. Source 12px.

Layout:
- 56px text margin; plot from x 96 to 904, baseline near y 452, about 256px tall. Legend right-aligned above the plot: a filled ice white swatch for the current period and an outlined swatch for the previous one.
- Under the category labels, an order cue: "NORTH" on the left and "SOUTH" on the right in 11px 600 uppercase with 2px letter-spacing, joined by a 1.2px #263241 rule ending in a small #8595A6 arrowhead.

Axes and grid:
- Horizontal gridlines 0.8px #263241 with comma-formatted labels right-aligned 12px left of the plot. No zero label; a 1px #8595A6 baseline.

Marks:
- Bar chart: the current value as a 50px square-cornered ice white bar, centered inside a 72px ghost bar of the previous value (1.2px #8595A6 outline, 8% fill) drawn behind it, both from zero. The current value printed inside the top of the bar. Above the taller of the pair, the percent change with a small solid triangle (up for gains in teal, down for losses in coral), and the previous value beneath it in small muted text.
- Line chart: the current series as a 2.5px #E6EDF3 line with 5px ice white dots, the previous series as a 1.2px #8595A6 line with hollow dots, and each point's percent change printed above it in teal or coral.

Avoid: gradients, glows, rounded bars, more than two accent colors, color without a sign or triangle, and a second y axis.

When you're done, render the chart and check that the ghost outline stays visible on both sides of every current bar, the percent changes are arithmetically right, gains and losses carry both color and a +/- sign, and the category order follows the stated direction.