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

Error Budget line chart, dark theme: A dark SRE burn-down that turns green to amber to red, with the incident tagged.

Error Budget

DarkLine

A dark SRE burn-down that turns green to amber to red, with the incident tagged.

  • Console black#111418
  • Healthy green#3DDC84
  • Warning amber#F5B942
  • Critical red#FF5C5C
  • Ideal gray#6B7380

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 "Error Budget" 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 site reliability console at night. Dark, monospaced and matter-of-fact, where the line itself turns from green to amber to red as the budget burns down, and the incident that did the damage is named by its ticket ID.

Colors (use these exact values):
- Background: #111418. Header strip and stat tiles: #161A1F with 1px #252B33 borders.
- Status bands: #3DDC84 (healthy green, above 50%), #F5B942 (warning amber, 25 to 50%), #FF5C5C (critical red, below 25%). The line takes the color of the band it is in.
- Ideal burn line: #6B7380. Ink #E6E9EE, secondary text #8A93A0, faint labels #5E6773, gridlines #1F242B, baseline #333A44.

Typography (Google Fonts):
- Fira Code for everything, tabular figures.
- Header strip: service name 13px 600 #E6E9EE with a 4px status dot in the current band color, then a path in 13px #8A93A0 ("/ slo / availability-99.9"), window info right-aligned 12px #5E6773.
- Title 23px 600, -0.4px letter-spacing, stating what is left and how long remains. Subtitle 13px #8A93A0 with the unit and what 100% means (for example "% of 43.2 allowed minutes").
- Stat tiles: key 10.5px uppercase with 1px letter-spacing #5E6773, value 17px 600. Axis labels 11.5px #5E6773. Annotation text 11 to 13px.

Layout:
- A 40px header strip across the top. 36px side margins. Title at 86px, subtitle at 112px.
- A row of four stat tiles (138 x 52px, 4px radius, 12px gaps): BUDGET, REMAINING (value in the current band color), BURN RATE (amber when above 1.00x), INCIDENTS. A four-line key to their right: short 3px bars in green, amber and red with their thresholds, and a dashed gray "ideal burn" swatch.
- Plot below, with a 48px left gutter; the not-yet-elapsed part of the window gets a white 2.5% opacity wash, and a dotted "now" line with its label above the plot.
- Footer: "Source: ..." left, and the burn-rate formula with the real numbers right.

Axes and grid:
- Y from 0 to 100% with gridlines at 25% steps, 1px #1F242B. Threshold rules at 50% (amber) and 25% (red), 1px dotted 2 on 4 at 70% opacity.
- X labels every 5 days in "Sep 6" form with 5px ticks; the final label is the end of the window.

Marks:
- Line chart: straight segments, 2.5px, colored by band using three clip regions (above 50, 25 to 50, below 25) so the color switches exactly at the threshold. Under each colored part, a vertical gradient fill of the same color from 18% to 2% opacity. A soft glow: the same path at 5px width, 35% opacity, blurred 3px, with the filter region set to the whole canvas. Current value: a 5px dot in the band color with a 2px background ring and its value (16px 600) plus "minutes left" (11.5px) beside it on a knockout rect.
- Ideal burn: a straight 1.5px #6B7380 line dashed 6 on 5 from 100% at the window start to 0% at the window end.
- Bar chart: one bar per day of budget consumed or remaining, 60% of the band, 2px top radius, each bar filled with its band color at full strength, with the same dashed ideal line and threshold rules.

Labels and annotation:
- The incident that caused the biggest drop: a thin #8A93A0 bracket spanning the drop, and a tag box (#161A1F, 1px #FF5C5C border, 4px radius) with the ID in 13px 600 red, the drop in points in 13px 600 ink, and a one-line cause in 11px #8A93A0. Smaller incidents get a hollow amber circle and an 11px gray label.

Avoid: a light theme, proportional fonts, smooth curves that hide the cliff, multi-colored gradients along the line, and glows clipped at the filter edge.

When you're done, render the chart and check that the line changes color exactly at 50% and 25%, the remaining minutes equal the remaining percent times the total budget, the burn rate equals used divided by elapsed, and the incident tag does not cover the line.