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

Head Unit line chart, dark theme: Bike computer screen with big lap readouts over three stacked trace panels.

Head Unit

DarkLine

Bike computer screen with big lap readouts over three stacked trace panels.

  • Screen black#070707
  • Power orange#FF8A00
  • Heart red#FF3B3B
  • Cadence cyan#2FD3E0
  • Divider gray#5A5F66

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 "Head Unit" 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: the screen of a bike computer after an interval session. Pure black, technical, glanceable: big readout numbers in a row of data fields, then stacked traces that share one time axis.

Colors (use these exact values):
- Screen: #070707. Readout cells: #111315 with a 1px #2A2D31 border and a 3px colored top strip.
- Series colors, one per panel: #FF8A00 (orange, power or the first measure), #FF3B3B (red, heart rate or the second), #2FD3E0 (cyan, cadence or the third).
- Main text: #F2F4F5. Labels: #8A8F96. Gridlines: #2A2D31. Lap or segment dividers: #5A5F66. Highlighted segment: #FFFFFF at 6% opacity.

Typography (Google Fonts):
- Tektur throughout. Eyebrow 13px 600 caps with 2px letter-spacing in #8A8F96; title 24px 600 white stating the finding; readout labels 11px 600 caps with 1.6px letter-spacing; readout values 42px 700 in the field's series color with a 15px 600 gray unit suffix; panel titles 11px 700 caps with 1.8px letter-spacing in the panel color, followed by the unit in gray; tick labels 11 to 12px.

Layout:
- 40px side margins. Header row, then a row of four equal readout cells (4px radius, 84px tall) spanning the width: one white (a time or count), then one per series in its color.
- Below, three stacked panels about 80px tall each with roughly 30px between them, all sharing the x range from x 96 to 920; y tick labels right-aligned at x 86. A lap-name row and a minute row under the last panel, then a one-line key and source in 11px gray.

Axes and grid:
- Four 1px #2A2D31 horizontal gridlines per panel with plain numbers. No axis lines, no boxes around panels.
- Thin 1px #5A5F66 vertical dividers at every segment boundary, running through all three panels. The segment the readouts describe gets a 6% white band behind all panels and its name in white in the lap row.

Marks:
- Line chart: raw-looking 1.6px lines with straight segments at the device's sample rate (no smoothing), each in its panel color, clamped to the panel range. One measure per panel; never two scales in one panel.
- Bar chart: per-segment averages as square-cornered columns in the panel's color, one panel per measure, separated by the same gray dividers, with values in 12px 600 white above each column; the highlighted segment's column at full opacity and the rest at 70%.

Avoid: glows, gradients, rounded lines, legends (panel titles name the series), light backgrounds, and a shared y axis across different units.

When you're done, render the chart and check that the readout values equal the averages of the highlighted segment, panel titles don't touch the top tick labels, the dividers align across all panels, and no trace leaves its panel.