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

Highway Gantry bar chart, dark theme: Reflective green guide-sign bars with route shields on night asphalt.

Highway Gantry

DarkBar

Reflective green guide-sign bars with route shields on night asphalt.

  • Night asphalt#16181B
  • Sign green#00673F
  • Border white#FFFFFF
  • Lane yellow#F2C230

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 "Highway Gantry" 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: overhead guide signs on a highway at night. Dark asphalt with faint dashed lane markings, bars as reflective green sign panels with white borders and route shields, and a yellow dashed divider along the baseline.

Colors (use these exact values):
- Background: #16181B, with a very faint white film grain (fractal noise at 5% opacity).
- Sign panels: vertical gradient from #0B7A4C at the top to #00673F, plus a sheen (white at 14% fading to 0 by 45% along the diagonal). Borders, values and names: #FFFFFF.
- Lane divider and exit labels: #F2C230. Shield number and outline: #111418. Secondary text: #8F959C. Sign posts: #5A6068.

Typography (Google Fonts):
- Overpass throughout. Title 800, 27px white, -0.3px letter-spacing, stating the finding. Subtitle 400, 16px #8F959C with measure, unit and period.
- Values 800, 23px white inside the panels. Category names 700, 15px white; exit or sub-labels 600, 12px uppercase, 1.4px letter-spacing, #F2C230. Shield numbers 800, 14px. Axis labels 13px.

Layout:
- 48px margins. Title at y 64, subtitle at y 94. Plot from x 92 to 904 with the baseline at y 452.
- Names 34px under the baseline and sub-labels 19px under those. A solid white road edge line (3px, 50% opacity) across the full width at y 534. Footer at y 568, 12px #8F959C.

Axes and grid:
- Gridlines are lane markings: 2px white dashed lines (26 on, 22 off) at 13% opacity, labeled "25k" right-aligned 14px left of the plot.
- The baseline is a 3px #F2C230 dashed line (18 on, 12 off), extending a little past the plot on both sides.

Marks:
- Bar chart: each bar is a sign panel about 94px wide (80% of the slot), rx 9, stopping 6px above the baseline with two 4px #5A6068 posts beneath it. Inside, a 2.5px white border inset 4px with rx 6. At the top center a route shield 30 x 32 px (flat top with rounded shoulders, sides tapering to a rounded point) in white with a 1.4px #111418 inner outline and the number; the value 58px below the panel top.
- Line chart: a 5px #FFFFFF line with round joins over a 9px #00673F casing, and each point as a small green sign panel (about 64 x 36 px, rx 6, white 2px inset border) holding its value in 800 16px white, with the shield sitting above the latest point. The lane-marking gridlines and yellow dashed baseline stay.

Avoid: blue or brown signs, light backgrounds, thin type, drop shadows on the panels, real route numbers or place names, and any color other than green, white, yellow and gray.

When you're done, render the chart and check that the shortest panel still fits its shield and value, the white borders are even on every side, and the yellow divider reads as a lane marking rather than an axis.