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

Uptime Status line chart, dark theme: A status page with green latency, red incident bands and 90 days of uptime ticks.

Uptime Status

DarkLine

A status page with green latency, red incident bands and 90 days of uptime ticks.

  • Night#0D1117
  • Healthy green#3ECF8E
  • Incident red#F85149
  • Degraded amber#D29922

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 "Uptime Status" 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 public status page for an API at night. Calm near-black panels, one soft green signal, and incidents shown honestly as translucent red windows with numbered markers, the way a well-run platform team reports its bad days.

Colors (use these exact values):
- Page: #0D1117. Panels: #161B22 with a 1px #21262D border and 10px radius. Gridlines #1B2129.
- Ink: #E6EDF3. Secondary text: #8B949E. Axis labels and notes: #6E7681.
- Healthy / primary series: #3ECF8E (soft green), with an area fill from 16% to 0% opacity.
- Incidents: #F85149 bands at 18% opacity with a 2px solid #F85149 top edge. Degraded periods: #D29922 bands at 14% opacity with a 2px solid top edge.
- Status banner: #3ECF8E at 7% fill with a 1px #3ECF8E border at 35% opacity.

Typography (Google Fonts):
- Geist for words: status line 17px 600 #E6EDF3; title 20px 600, -0.3px letter-spacing, stating the finding; panel titles 13.5px 600; legend and incident log 12px #8B949E.
- Geist Mono, tabular figures, for every number and timestamp: subtitle 12.5px #8B949E ("p95 latency, ms · 3-hour buckets · Aug 29 – Sep 27, 2026"), axis labels 11px #6E7681, the SLO tag 11px, marker numbers 11px 600, the uptime figure 13px 600 #3ECF8E.

Layout:
- 32px side margins. A full-width status banner at the top (52px tall, 10px radius): a 5px green dot with a blurred 7px green halo, "All systems operational", and a right-aligned mono "Updated ..." timestamp.
- Title and mono subtitle below the banner.
- A chart panel with its title at top left ("API latency") and a legend at top right (a 16px green line swatch, 12px band swatches for incident and degraded). Under the plot, a one-line incident log: a 7px outlined numbered circle in the incident color, then "date · what happened · duration".
- A second, shorter panel for uptime: "Uptime" plus "last 90 days" at left, the uptime percentage in green mono at right, a row of ninety 6.4 x 30 px ticks with 2px radius spanning the panel (one per day; #3ECF8E at 85% opacity for healthy days, solid #D29922 for degraded, solid #F85149 for incident days), then "90 days ago", total downtime and "Today" in 11px mono underneath. The last thirty ticks must line up with the days in the chart above.

Axes and grid:
- Horizontal 1px #1B2129 gridlines at round values, labels right-aligned 12px left of the plot, no axis lines except the #21262D baseline. Five date labels below.
- The SLO threshold as a 1.2px #E6EDF3 line at 55% opacity, dashed 5 on 4 off, labelled at its right end with a small tag (86 x 18, 4px radius, page-colored fill, 1px #21262D border): "SLO 300 ms".

Marks:
- Line chart: a single 1.8px #3ECF8E monotone-smoothed line with round joins over its faint green area. Incident and degraded windows are full-height translucent bands drawn beneath the line, at least 8px wide so short incidents stay visible, each with a numbered circle (r 10, page-colored fill, 1.5px stroke in the band color, number in the band color) centered on the band's top edge.
- Bar chart: one slim #3ECF8E bar per time bucket (2px gaps, 1px top radius) over the same bands, with bars inside an incident band colored #F85149 and inside a degraded band #D29922; keep the SLO line, markers and the uptime tick row.

Avoid: bright saturated backgrounds, glow on the data line, red or amber outside incident and degraded periods, more than one data line color, and uptime or downtime numbers that do not agree with each other (uptime = 1 - downtime minutes / (90 × 1440)).

When you're done, render the chart and check that every numbered marker has a matching log entry, the incident ticks in the uptime row sit on the same dates as the bands, the line stays under the SLO outside the incident windows if the title says so, and the uptime percentage is computed from the downtime.