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

Garage Fill line chart, dark theme: Asphalt-black guidance sign with a glowing SPACES counter and a FULL line.

Garage Fill

DarkLine

Asphalt-black guidance sign with a glowing SPACES counter and a FULL line.

  • Asphalt#121315
  • Spaces green#22C55E
  • Filling amber#F59E0B
  • Full red#EF4444

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 "Garage Fill" 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 downtown parking guidance sign at night. Asphalt black, a glowing green LED counter, and thick lines in the green, amber and red of a sign that tells drivers whether to bother.

Colors (use these exact values):
- Page: #121315 (asphalt black). A #1B1D20 8px strip along the bottom edge.
- Series by fullness zone: #22C55E (green, stays below 80%), #F59E0B (amber, reaches 80 to 95%), #EF4444 (red, reaches FULL). Assign each series the color of the highest zone it reaches.
- Text: #E9EAEC for the title and legend, #8B8F96 for labels and notes. Gridlines #2A2D31, baseline and ticks #4A4F56.
- Counter tile: #0A0B0C fill, 2px #2E3237 border, a dot matrix of 1.1px-radius #22C55E dots at 12% opacity on a 6px grid.

Typography (Google Fonts):
- Chakra Petch everywhere. Header 12px 600 uppercase with 2.4px letter-spacing; title 29px 700 over two lines, stating the finding; subtitle 15px 400; legend 12.5px 600 uppercase with 1.2px letter-spacing; axis labels 13px (600 for y, 500 for 24-hour times like "14:00"); value tags 15px 700 in the series color; counter label 15px 700 with 4px letter-spacing; counter number 60px 700 with 2px letter-spacing; source 12px.

Layout:
- 56px left margin. Header at y 50, two-line title at 92 and 126, subtitle at 156.
- Counter tile top right (x 700 to 904, y 34 to 152, 6px radius): "SPACES" top left, the big number right-aligned, a small caption below ("OPEN AT NOON"). Both green texts get a glow: Gaussian blur 4 merged under the text.
- Legend row at y 184 on the right with the same marker shape each series uses on its line.
- Plot from x 112 to 880 and y 196 to 484.

Axes and grid:
- Horizontal 1px #2A2D31 gridlines at 25% steps with labels at the left and a "% FULL" caption above them.
- LED tick scale just left of the plot: a 4px-tall, 1px-radius segment every 5% (14px wide at 25% steps, 9px otherwise), colored by zone (green below 80, amber 80 to 95, red at 95 and above), full-strength at 25% steps and 45% opacity between.
- A FULL threshold: 1.5px #EF4444 dashed line (8 on, 5 off) at 95%, the band above it tinted red at 10%, and a solid red "FULL 95%" label chip (74 x 20, 2px radius, asphalt text) at the right end below the line.
- 1.5px baseline with 6px ticks every two hours.

Marks:
- Line chart: thick 4.5px straight-segment lines with round joins and caps, each with a soft glow (blur 3 at 55% opacity under the line). Each series has a marker shape (red square, amber diamond, green circle) drawn at its peak (6px) and at its last point (5px). Peak values printed in 15px 700 in the series color, placed where they collide with nothing. Draw the red series last so it sits on top.
- Bar chart: square-cornered columns colored by the zone their value falls in (green, amber, red), with the FULL line and LED scale unchanged, value labels 15px 700 above each column in its zone color, and the counter tile showing the most useful headline number.

Avoid: light backgrounds, gradients on the lines, thin lines, more than three hues, rounded chart corners, and glows that are clipped by their filter region (use a full-canvas filter region).

When you're done, render the chart and check that the FULL line sits exactly at 95%, the title's hours match the points at or above it, the counter number is computed from the data, and series stay distinguishable by marker shape as well as color.