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

Peering Exchange line chart, dark theme: A dark grid of port sparkline cards in lime and lilac with one amber alert.

Peering Exchange

DarkLine

A dark grid of port sparkline cards in lime and lilac with one amber alert.

  • Inbound lime#A6D94A
  • Outbound lilac#B9A2F0
  • Saturation amber#F2B84B
  • Card#141922
  • Outline#2A3444

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 "Peering Exchange" 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 network operations wall of port monitors. Dense but disciplined: a near-black slate grid of outlined cards, restrained lime for one direction, soft lilac for the other, and a single amber highlight where something saturates.

Colors (use these exact values):
- Background: #0E1116. Cards: #141922 with 1px #2A3444 outlines, rx 6.
- Series one (inbound): #A6D94A (lime), with a 12% opacity area fill beneath it.
- Series two (outbound): #B9A2F0 (lilac), line only.
- Alert highlight: #F2B84B (amber) for the saturated card's 1.6px border, its code, and a "SAT" badge (amber at 16% fill).
- Primary text: #F2F4F8. Secondary text: #7D8898. Footer bar: #171D27.

Typography (Google Fonts):
- Inter: title 700, 23px, -0.4px letter-spacing, stating the finding; subtitle 400, 14px, #7D8898; card peer names 500, 12px, #7D8898; source 11.5px.
- JetBrains Mono: card codes 700, 12px; the current value 500, 24px, -0.5px letter-spacing, in lime with an 11px gray unit suffix; the second series' current value 11.5px in lilac, right-aligned; legend and footer 11 to 11.5px.

Layout:
- Title at y 46 and subtitle at y 70, flush left at x 32; a two-item legend (18px line swatches) right-aligned on the subtitle line.
- A four-by-three grid of cards from x 32 to 928, 12px gaps, each 134px tall: code and name on the top row, big current figure below, then the sparkline filling the lower half.
- A 30px status footer bar spanning the grid: a lime dot, "11 nominal", the saturated count in amber, the aggregate current values in series colors, and a right-aligned note on sampling and what the dashes mean. Source and the time window in small type below.

Axes and grid:
- No axes. Each sparkline has a solid 1px #2A3444 baseline and a dotted (2 on, 3 off) 0.8px capacity line at the top of its own 0-to-capacity scale.

Marks:
- Line chart: sparklines of about 96 points: lime 1.4px over its faint area fill, lilac 1.2px, straight segments with round joins. At each card's right edge draw the 95th percentile of each series as a tiny 8 x 2px dash in that series' color.
- Bar chart: each card holds a mini column chart instead: 2px-wide lime columns with a lilac 1.2px line (or thin lilac columns offset by 1px) for the second series, the same 95th percentile dashes and big current figure.

Avoid: axis labels inside cards, gridlines, more than one highlighted card, bright neon glows, rounded thick lines.

When you're done, render the chart and check that every card uses the same scale rules, the highlighted card is the one the title names, the footer counts add up to the number of cards, and no big figure collides with the right-aligned value beside it.