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

Gateway Telemetry line chart, dark theme: Broker console with one amber trace, red dropout gaps and heartbeat dots.

Gateway Telemetry

DarkLine

Broker console with one amber trace, red dropout gaps and heartbeat dots.

  • Graphite#17191C
  • Signal amber#F5A524
  • Dropout red#E5484D
  • Heartbeat green#4CC38A
  • Readout white#ECEDEE

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 "Gateway Telemetry" 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: an IoT message-broker console. Dark graphite, one amber signal, honest gaps where data is missing, and a terminal-style readout of the latest value.

Colors (use these exact values):
- Canvas: #17191C. Readout panel: #101214 with a 1px #2C3036 border.
- Signal: #F5A524 amber (also a 4px accent stripe across the very top).
- Missing data: #E5484D red at 13% for gap bands, 50% for their dotted edges; gap labels #F07A7E.
- Healthy heartbeat dots: #4CC38A. Missed heartbeats: hollow #E5484D rings.
- Headline text #ECEDEE; secondary #80868E; axis labels #6B7178; gridlines #23262A; axis line and chips #3A3F46; source #5A6067.

Typography (Google Fonts):
- Anonymous Pro for the topic path title (700 26px, e.g. "site/b2/gw-04/uplink"), the small QoS chip (14px in a 86 x 24 outlined box) and the latest-value readout (700 44px number, 16px unit).
- Tomorrow for everything else: finding line 600 21px; subtitle 14px; readout label 500 11px uppercase with 1.5px letter-spacing; axis labels 12px; gap labels 600 12px.

Layout:
- 40px left margin. Topic path at y 52, finding line at y 88, subtitle at y 114.
- A 216 x 96 readout panel at the top right: "LATEST 18:00" label, the big amber number, a 14 x 36 amber block caret (85% opacity) right after it like a terminal cursor, then the unit.
- Plot from x 76 to 900, y 196 to 450. Heartbeat row 52px under the axis with an "HB" label, and a right-aligned count note under it.

Axes and grid:
- Horizontal gridlines every 50 units at 1px #23262A, a #3A3F46 zero line with 5px ticks at each hour; the first and last time labels align to the plot edges.

Marks:
- Line chart: one 1.6px amber polyline with straight segments (no smoothing, the jitter is the data). Break the line wherever data is missing, put a 2.2px amber dot at each segment end, and shade each gap full height in red at 13% with dotted red edges and a "18 min" label above. A 7px amber halo at 20% on the latest point.
- Bar chart: thin 1-minute or 5-minute bars in amber with no corner radius and 1px gaps; missing intervals get no bar and the same red gap band.
- Heartbeat row: one 3.4px dot per interval, filled green when received, a hollow red ring (1.4px) when missed.

Avoid: smoothing over gaps, interpolating missing data, bright red fills, glows, gradients and more than one data color.

When you're done, render the chart and check that the minutes lost in the finding line equal the sum of the gap widths, the heartbeat counts are right, the caret sits clear of the number, and every gap is visibly broken in the line.