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

Traffic Collisions line chart, dark theme: Asphalt road-safety chart with a lane-line dash, log axis and change chips.

Traffic Collisions

DarkLine

Asphalt road-safety chart with a lane-line dash, log axis and change chips.

  • Asphalt#1B1D21
  • Lane yellow#FACC15
  • Fatal red#EF4444
  • Injury amber#F59E0B
  • Property gray#D1D5DB

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 "Traffic Collisions" 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 municipal road-safety dashboard painted on asphalt. Bold condensed headline, a yellow lane marking along the top, and a clear before/after story around a policy change.

Colors (use these exact values):
- Page: #1B1D21 (asphalt). Lane dash and policy marker: #FACC15 yellow.
- Series by severity: #EF4444 (fatal), #F59E0B (injury), #D1D5DB (property damage).
- Ink: #F4F4F5. Secondary text: #9CA0A8. Minor gridlines #2B2E34, major gridlines #3A3E46.

Typography (Google Fonts):
- Oswald 600 for the title (30px, uppercase, 0.3px letter-spacing, stating the change); Oswald 500 for year labels (15px, 1px letter-spacing) and series labels (13px uppercase, 0.8px letter-spacing, in the series color).
- Barlow for everything else: eyebrow 12.5px 700 uppercase, 2.4px letter-spacing, yellow; subtitle 15px gray; axis labels 12.5px (major ticks 600 in ink); chip values 13px 700; notes 11.5 to 12px.

Layout:
- A 5px yellow dashed line (46 on, 30 off) across the full width at y 10.
- 56px side margins. Eyebrow y 62, title y 104, subtitle y 130.
- Plot from y 168 to y 492, x 96 to 790; the right 110px holds direct labels and change chips. Footer source at y 578.

Axes and grid:
- Log y axis when series differ by orders of magnitude: gridlines at 1, 2, 5, 10, 20, 50 ... with the powers of ten brighter (#3A3E46) and labeled in 600 ink.
- Year labels centered under each year with 8px tick marks at year starts; no vertical gridlines.

Marks:
- Line chart: 2.6px lines (2.2px for the gray series), round joins, straight segments; the sparsest series (fatal) also gets r 2.6 dots. Policy marker: a 1.5px yellow dashed vertical (5 on, 4 off), a yellow tag at its top with dark 12px 700 text ("JUL 2024 SPEED CAMERAS ON"), and the after-period tinted yellow at 4% opacity. At the right, each series' name above a 58 x 22px pill chip (1.4px outline in the series color, fully rounded) showing its percent change, with a two-line note below the axis explaining the comparison window.
- Bar chart: grouped or stacked monthly columns in the three severity colors with 1px asphalt gaps, the same yellow policy marker and after-tint, and the same pill chips at the right.

Avoid: light backgrounds, gradients on lines, glows, legends in boxes (label series directly), and a linear axis that flattens the smallest series.

When you're done, render the chart and check that each chip's percent equals the 12-month average after the change versus the 12 months before, the title matches the injury chip, and the policy tag's text fits inside its yellow box.