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

Lap Times bar chart, dark theme: Carbon timing screen with a checkered header, gray bars and the pole lap in yellow.

Lap Times

DarkBar

Carbon timing screen with a checkered header, gray bars and the pole lap in yellow.

  • Carbon#0E0F11
  • Pole yellow#FFD21F
  • Bar gray#8B9199
  • Header band#17191C
  • Timing white#F2F3F5

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 "Lap Times" 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 motorsport timing screen. Carbon black, condensed racing type, cool gray bars and one yellow highlight for the fastest result, with a subtle checkered texture only in the header band.

Colors (use these exact values):
- Background: #0E0F11. Header band: #17191C with a 16px checker pattern (8px squares of white at 4.5% opacity) that fades in from the right (band color overlay from 100% at left to 85% at 55% to 0 at right).
- Accent: #FFD21F (pole yellow) for the pole bar, its label, the eyebrow, a 6px vertical title bar, a 3px rule under the header and the dashed pole reference line.
- Bars: #8B9199 with a 3px #C9CDD2 cap on top (pole cap #FFF3B0). Primary text: #F2F3F5. Secondary text: #A9AEB5. Dim labels: #6A7077. Gridlines: #2A2D32.

Typography (Google Fonts):
- Saira Condensed throughout, tabular figures. Eyebrow 600 14px uppercase 2.4px letter-spacing yellow; title 700 34px uppercase 0.6px letter-spacing white; subtitle 400 16px; pole time 700 38px yellow with a "POLE" label; gap labels 700 16px white; axis labels 500 14px dim; driver names 600 13px uppercase 0.8px letter-spacing; positions 500 12px dim.

Layout:
- Header band 132px tall, then a 3px yellow rule. Title block at left behind a 6px yellow bar; the pole time right-aligned.
- Plot below with left axis labels; under each bar a 30 x 26px number square (#1E2125 fill, #3A3E44 stroke; yellow fill with black numeral for pole), the driver name and position.
- Footer: source (noting where the axis starts) left, session info right in uppercase.

Axes and grid:
- Truncated value axis starting just below the fastest value so gaps are visible, with a double-slash break mark at the baseline and the truncation stated in the footer. 1px #2A2D32 gridlines, a 1.5px #A9AEB5 baseline, a dashed 1px yellow line at the pole value.

Marks:
- Bar chart: vertical square-cornered bars about 55% of the band, sorted fastest first; the fastest in yellow, the rest gray. Above each bar print the gap to the leader ("+0.412"), and the absolute time above the leader.
- Line chart: 2px #8B9199 lines (e.g. lap-by-lap times) with square 5px markers, the leading driver's line 3px yellow, direct end labels with driver number squares; same truncated axis, pole line and header band.

Avoid: texture outside the header band, extra accent colors, rounded corners, 3D, gradients on bars, an axis starting at zero when differences are tiny (but always state the truncation).

When you're done, render the chart and check that the gaps are arithmetically consistent with the times, only the leader is yellow, the checker texture is subtle, and names do not collide under the bars.