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

Erg Splits line chart, dark theme: Rowing-monitor readouts over an inverted cyan split line with square markers.

Erg Splits

DarkLine

Rowing-monitor readouts over an inverted cyan split line with square markers.

  • Monitor black#050608
  • Electric cyan#22D3EE
  • Readout white#F2F5F7
  • Label slate#6B7C8A

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 "Erg Splits" 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 performance monitor on an indoor rowing machine during a max test. Black LCD glass, bright readouts, thin electric-cyan strokes with a slight glow, and nothing decorative.

Colors (use these exact values):
- Background #050608, monitor panel #0A0D11 with a 2px #1C232B frame (18px radius), cell outlines #1C232B, gridlines #141B22.
- Data and secondary readouts: electric cyan #22D3EE.
- Primary readouts, title and target line: #F2F5F7. Labels and axes: #6B7C8A.

Typography (Google Fonts):
- Oxanium everywhere with tabular numerals. Readout labels 600 12px uppercase with 2px letter-spacing in #6B7C8A; primary readouts 600 50px white with 1px letter-spacing; secondary readouts 600 42px cyan; title 600 22px white stating the result; subtitle 400 13.5px #6B7C8A; axis labels 500 12.5px; annotations 600 12px (cyan for fast points, gray for slow); target label 600 11.5px with 1.5px letter-spacing.

Layout:
- A monitor header of four outlined cells (8px radius, 104px tall) across the top: TIME, AVG /500M, METERS, SPM. Then the title and subtitle, then the plot about x 96 to 880, y 250 to 506, then a small legend and the source on one line.
- A faint scanline texture over the panel: 1px white lines every 4px at 1.8% opacity.

Axes and grid:
- For pace data invert the y axis so faster (smaller) times are higher, label ticks as min:sec, and put a small "FASTER" label above the axis, led by a 7px filled up-triangle drawn as a path (Oxanium has no triangle glyph). 1px #141B22 horizontal and vertical gridlines; x labels like "500m". No axis lines.

Marks:
- Line chart: a single 2px #22D3EE line with straight segments and a soft glow (Gaussian blur 3.5 merged under the stroke). Every point is an 8px square marker with a 1.6px cyan stroke, filled cyan when it beats the target and filled #050608 (hollow) when it misses. The target is a 1.4px dashed #F2F5F7 line (7 on, 6 off) at 85% opacity with its label just under the left end. Label the start, the slowest point and the finish.
- Bar chart: thin vertical bars (about 40% of the band) drawn as 1.6px cyan outlines, filled cyan when better than the target and hollow otherwise, square ends, with the same dashed white target line.

Avoid: gradients, rounded data marks, multiple colors, large glows, and any light background.

When you're done, render the chart and check that total time equals the sum of the segments, the average split equals total time divided by the number of 500 m pieces, faster values sit higher, and the glow is not clipped.