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

OLED Black line chart, dark theme: True-black sparkline grid with two emissive colors and no gridlines at all.

OLED Black

DarkLine

True-black sparkline grid with two emissive colors and no gridlines at all.

  • True black#000000
  • Electric cyan#00E5FF
  • Coral#FF5A4E
  • Sixty percent white#999999

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 "OLED Black" 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 battery-saving dashboard on an OLED phone. True black where pixels are off, two emissive colors that seem to glow, and nothing else: no cards, borders, panels or gridlines.

Colors (use these exact values):
- Background: #000000 everywhere. No panel tints, no surfaces.
- Electric cyan #00E5FF and coral #FF5A4E are the only colors, used for data marks and the large values. Give them a meaning (for example coral = above its average, cyan = at or below) and say so in a small key.
- Text: #999999 (60% white) for labels and metadata; the title alone may be white at 87% opacity. Hairlines: white at 22% opacity.

Typography (Google Fonts):
- Geist with tabular figures (font-variant-numeric: tabular-nums): title 28px 600, -0.4px letter-spacing; subtitle 15px 400; small-multiple names 16px 500; large latest values 36px 600, -0.8px letter-spacing, in the mark's color.
- Geist Mono for metadata: key 12px, per-panel stats ("avg 587 W / peak 977 W") 11px, axis ends ("-24 h", "now") 10px, "W now" unit lines 11px, footer 11px.

Layout:
- 56px margins. Title, subtitle, then a key row with 4px color dots. A battery-saver badge at the right of the key row: a 135 x 25 pill with a 1px #999999 outline, a tiny battery icon (1px outline, low charge fill in coral) and "BATTERY SAVER" in Geist Mono 10px 500 with 0.6px letter-spacing.
- Small multiples in a 3 x 2 grid, 300px column pitch and 190px row pitch, separated only by empty space. Each cell: name, mono stats line, a 144 x 76 sparkline, and to its right the latest value set large with "W now" below it.

Axes and grid:
- No gridlines, no y-axis, no frames. One pixel-snapped 1px hairline (at a .5 coordinate) under each sparkline as its baseline, with "-24 h" and "now" in 10px mono beneath the two ends.

Marks:
- Line chart: 1.5px straight-segment line with round joins in the cell's color, a 3.5px endpoint dot in the same color and a soft glow behind it (a 7px dot at 55% opacity, Gaussian blur 4). Each sparkline scales from 0 to 108% of its own peak.
- Bar chart: slim 6px columns with 1px gaps in cyan or coral, no rounding, the latest column at full brightness and the rest at 55% opacity, with the latest value set large beside the chart exactly as above.

Avoid: any grey panel, card or divider fill; gridlines; drop shadows; gradients; a third color; bold weights above 600; glows on anything except endpoint dots.

When you're done, render the chart and check that the background is pure #000000 everywhere, only the two emissive colors appear, the color meaning in the key matches every cell, and the glows are not clipped.