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

Fade Grid bar chart, dark theme: Monochrome histogram on a fading dot grid with one acid-lime median bucket.

Fade Grid

DarkBar

Monochrome histogram on a fading dot grid with one acid-lime median bucket.

  • Canvas#0A0A0A
  • Acid lime#C6FF3D
  • Zinc border#27272A
  • Bar grey#52525B
  • Text#FAFAFA

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 "Fade Grid" 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 developer platform's observability dashboard. Near-black, monochrome, crisp small type, precise hairlines and exactly one acid-lime accent.

Colors (use these exact values):
- Canvas: #0A0A0A. A dot grid of 0.9px white dots every 16px at 32% opacity, masked by a radial gradient (full at the center, 35% at 55% radius, gone at the edges, flattened to 70% height) so it fades toward the edges.
- Card border: #27272A. Corner ticks: #A1A1AA.
- Bars: vertical gradient #71717A to #52525B; bars past the p99 line in flat #3F3F46.
- Accent: #C6FF3D (acid lime), used only for the key bucket and its label and the matching stat.
- Text: #FAFAFA primary, #A1A1AA secondary, #71717A tertiary.

Typography (Google Fonts):
- Geist for title (22px 600, -0.5px letter-spacing), subtitle (13.5px 400 #A1A1AA) and prose notes (11.5px 400).
- Geist Mono for every number: stat labels 11.5px 500 #71717A, stat values 20px 500, axis labels 11px 400 #71717A, tags 11.5px 500.

Layout:
- Title and subtitle outside the card, top left at 48px.
- The card: 40px from the edges, square corners, 1px #27272A border, background at 45% so the dot grid shows through faintly, with 10px L-shaped corner ticks in #A1A1AA at all four corners.
- A stat row across the top of the card (p50, p90, p99 and a tail share) separated by 1px #27272A rules. A keyboard shortcut hint in the card's top right: keycaps 22 x 22px, 5px radius, #18181B fill, #3F3F46 stroke, with a small label.

Axes and grid:
- Dotted horizontal gridlines (1 on, 3 off) in white at 6%. A 1px #3F3F46 baseline with 5px tick marks and mono labels. An axis title in mono at the bottom right.

Marks:
- Bar chart (histogram): tightly packed columns with exactly 1px gaps, no rounding. The bucket holding the median is solid #C6FF3D with a mono label beside it. A dashed (4 on, 4 off) 1px vertical line at p99 in #FAFAFA at 70%, topped by a small tag (22px tall, 4px radius, #18181B fill, #3F3F46 stroke) reading "p99 151 ms", with a two-line note beside it.
- Line chart: a 1.5px #A1A1AA line with no smoothing, the key series or latest segment in #C6FF3D at 2px, point markers only at the annotated values, and the same dashed threshold line and tag for any percentile or target.

Avoid: rounded corners on bars, color beyond the single lime, glows, thick borders, large type, and any gradient on the canvas other than the dot-grid fade.

When you're done, render the chart and check that the percentiles and the median bucket are computed from the data, the lime appears only on the key bucket and its stat, and the dot grid is visible in the center but gone at the edges.