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

Frame Timing line chart, dark theme: A game performance overlay with a jagged green frame-time trace that turns red over budget.

Frame Timing

DarkLine

A game performance overlay with a jagged green frame-time trace that turns red over budget.

  • Black#060606
  • Phosphor green#39FF14
  • Over-budget red#FF3B3B
  • Amber#FFB020

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 "Frame Timing" 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 game engine's performance overlay after a capture. Near-black screen, one monospace face, a jagged phosphor-green trace, hard budget lines, and anything over budget turned red.

Colors (use these exact values):
- Background: #060606. Gridlines: #1C1F1B. Primary text: #E6E6E6. Secondary text and tick labels: #8A8F87.
- Trace under the threshold: #39FF14 (phosphor green). Anything over the threshold: #FF3B3B (red). Warning threshold line and secondary figures: #FFB020 (amber).
- Stats panel: #0D0F0C fill, #2A2E28 1px border, #141713 header strip, #23271F dividers.

Typography (Google Fonts):
- Share Tech Mono for everything. Eyebrow 13px uppercase with 1.5px letter-spacing and // separators; title 26px #E6E6E6 stating the finding; subtitle 14px #8A8F87 with measure and unit; tick labels 12px; threshold labels 12px in the line color; panel labels 13px uppercase with 1.2px letter-spacing; panel figures 34px (first) and 24px (others).

Layout:
- 40px margins. Plot on the left, about x 64 to 680 and y 150 to 520. A 204px-wide stats panel on the right from the same top to the same bottom, with 3 or 4 readouts (for example average FPS, 1% low, max frame time, count over budget) each separated by a 1px divider.
- Footer: source on the left, a faint (#5E635B) status string on the right such as "GPU BOUND 71%   CPU 9.1 ms".

Axes and grid:
- Square grid: horizontal lines every 10 units and vertical lines every 10 seconds, all 1px #1C1F1B. Unit label ("ms") above the y labels.
- Two threshold lines drawn 1px dashed 6 4: the soft budget in #FFB020 and the hard budget in #FF3B3B at 80% opacity, each labeled just above the line in a gap where no spike crosses the label.

Marks:
- Line chart: a straight-segment 1.2px trace with no smoothing, so the jaggedness shows. Draw it twice with clip paths: green below the soft budget line, red (1.4px) above it. Add a glow (Gaussian blur 2.5 merged under the source, filterUnits userSpaceOnUse covering the whole canvas). Circle every point above the hard budget with an r 4 red ring and label it ("47.8 ms") 9px to the right.
- Bar chart: thin 3px-wide bars, one per sample or bucket, green where under budget and red above it (split the bar at the threshold), with the same threshold lines, glow and stats panel.
- A faint scanline overlay: a 4 x 3px pattern with a 1px white row at 2.5% opacity over the whole image.

Avoid: smoothing the trace, area fills, rounded corners, a second font, colors other than green, amber and red for data, and letting threshold labels sit on top of spikes.

When you're done, render the chart and check that only over-budget segments are red, the stats in the panel are computed from the data (average FPS = 1000 / mean ms; 1% low = 1000 / mean of the slowest 1% of frames), and the glow is not clipped at the plot edges.