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

Club Gapping bar chart, dark theme: Midnight fitting report with slate range bars, white average ticks and amber gap chips.

Club Gapping

DarkBar

Midnight fitting report with slate range bars, white average ticks and amber gap chips.

  • Midnight navy#0D1B2A
  • Slate range#5C7C99
  • Average white#FFFFFF
  • Gap amber#F4A259

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 "Club Gapping" 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 premium club fitting report. Midnight navy, calm slate ranges, crisp white markers and one warm amber flag for what needs attention.

Colors (use these exact values):
- Background: #0D1B2A (midnight navy).
- Ranges / primary marks: #5C7C99 (slate blue). Average markers: #FFFFFF.
- Attention flags: #F4A259 (amber), with the text inside amber chips in #0D1B2A.
- Text: #E6EDF3. Secondary: #8397AB. Gridlines: #1B2D40.

Typography (Google Fonts):
- DM Sans throughout. Eyebrow 12px 600 uppercase with 2.2px letter-spacing in #8397AB; title 30px 700 with -0.4px letter-spacing stating the finding; subtitle 14px #8397AB. Row labels 14px 500. Value labels 13px 700. Axis labels 12px; captions 10px 600 uppercase with 1.6px letter-spacing. Chip text 13px 700; ordinary gap values 11px #8397AB.

Layout:
- 48px margins. Title block at top; rows from y 152 in 28px bands with labels at x 48 and the plot from x 140 to 800; a narrow "GAP" column at x 846 on the right; legend and source on one footer line at y 566.

Axes and grid:
- Vertical 1px #1B2D40 gridlines every 25 units with labels every 50 below the plot. No horizontal gridlines and no axis lines.

Marks:
- Bar chart: floating horizontal range bars 16px tall with fully rounded ends (radius 8) in #5C7C99 from the minimum to the maximum; a 3 x 24 px white tick at the average; the average value in 13px 700 just right of the bar. In the gap column, the difference between neighbouring averages sits between the two rows; differences over the threshold get a 2px amber bracket spanning the two rows and a 36 x 20 px amber chip with 4px radius holding "+N".
- Line chart: a 2.5px #5C7C99 line with r4 white dots, a translucent #5C7C99 band (25% opacity) for the min-max range, and amber brackets with chips on the right edge marking any step between neighbouring points above the threshold.

Avoid: gradients, glows, more than one warm color, heavy gridlines, crowded tick labels.

When you're done, render the chart and check that every flagged gap really exceeds the threshold, unflagged gaps don't, and the chips never overlap the value labels.