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

Traceroute Hops line chart, light theme: A teal step line of hop latency that turns orange past a dashed budget line.

Traceroute Hops

LightLine

A teal step line of hop latency that turns orange past a dashed budget line.

  • Deep teal#0E5E63
  • Budget orange#E2711D
  • Row band#F3F5F6
  • Terminal#10292B
  • Ink#1B2426

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 "Traceroute Hops" 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 engineer's path diagnostic turned into a clean report figure. Crisp, technical and calm: white page, pale banding, one deep teal line, and warm orange reserved strictly for whatever breaks the budget or threshold.

Colors (use these exact values):
- Page: #FFFFFF. Alternate row bands: #F3F5F6.
- Primary data: #0E5E63 (deep teal).
- Breach accent: #E2711D (warm orange), only for marks, labels and line segments past the threshold, plus the threshold line and its tag.
- Ink: #1B2426. Secondary text: #6B7679. Leader hairlines: #D5DBDD.
- Summary strip: #10292B background, #D7EDEB text, #7FC8C2 for the prompt token, #8FA3A4 for field names.

Typography (Google Fonts):
- IBM Plex Sans: title 700, 25px, -0.3px letter-spacing, #1B2426, flush left at x 48, stating the finding; subtitle 400, 14.5px, #6B7679 with measure and unit; source line 12px.
- IBM Plex Mono for every label: axis numbers 11px #6B7679, category numbers 11px 600, category names 10.5px, value labels 11px 500 (600 when over the threshold), legend 11.5px, summary strip 12.5px.

Layout:
- Title baseline at y 56, subtitle at y 82, a two-item legend (9px squares) at the top right just above the plot.
- Plot from x 88 to 900, y 150 to 410. Under the axis: category numbers, then the full category names staggered on two rows (y +40 and +58 below the baseline) with 1px #D5DBDD leader lines from each tick, so long names never collide.
- A 40px tall, full-width terminal strip (rx 3) below the axis summarizing the result as a command line: "$ trace" token, then key/value pairs separated by three spaces (preserve whitespace), with the breach count in bold orange.
- Source at the bottom left, a small mono method note at the bottom right.

Axes and grid:
- No vertical gridlines. Horizontal row bands every 20 units alternating #F3F5F6 and white instead of gridlines.
- Y labels in mono at the left, the unit ("ms") as a small label above the top value.
- A 1px #1B2426 baseline with 5px tick marks at each category.
- Threshold: a 1.4px dashed (6 on, 4 off) orange line across the plot with a boxed tag at its left end: white fill, 1.2px orange border, "BUDGET 80 ms" in mono 600 11.5px orange.

Marks:
- Line chart: a step line (horizontal tread to the next category, then a vertical riser to its value), 2.5px teal with miter joins. Clip a duplicate of the path in orange to the region above the threshold so any tread past the budget turns orange. Each riser ends in a 9px square node with a 1.5px white outline, teal or orange. Value labels centered 11px above each node with a 4px white halo (paint-order stroke). A hollow 8px square marks the origin.
- Bar chart: slender square-cornered teal columns (about 40% of the band) with the same 9px square cap at the top; columns above the threshold turn fully orange; same row bands, dashed threshold and value labels.

Avoid: rounded corners on marks, gradients, shadows, smoothing the steps, more than two data colors, orange on anything that is not over the threshold.

When you're done, render the chart and check that the staggered category names don't touch, the halo keeps value labels readable where they cross the threshold line, the strip's spacing is preserved, and the breach counts in the title and strip match the data.