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

Endpoint Errors bar chart, light theme: API status table with verb chips, mono paths and 100% bars of response classes.

Endpoint Errors

LightBar

API status table with verb chips, mono paths and 100% bars of response classes.

  • Mint page#F2FBF7
  • 2xx mint#34D399
  • 4xx gold#F59E0B
  • 5xx crimson#E11D48
  • Ink#0B2A22

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 "Endpoint Errors" 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 API health table in a developer console. Pale mint, tabular and calm, where each row reads like a route: verb chip, monospace path, then the data.

Colors (use these exact values):
- Page: #F2FBF7 (pale mint). Ink #0B2A22 for the title, paths and the top and bottom table rules. Body text #3B5A50, muted labels #6B857C, row rules and dashed gridlines #D3EBE0.
- Class colors: #34D399 (2xx, mint), #F59E0B (4xx, gold), #E11D48 (5xx, crimson).
- Verb chips: GET text #047857 on #D1FAE5, POST text #1D4ED8 on #DBEAFE, DELETE text #B91C1C on #FEE2E2.

Typography (Google Fonts):
- Albert Sans for the title (700, 31px, -0.6px letter-spacing, stating the finding), subtitle (400, 15.5px #3B5A50) and footer (500, 12px #6B857C).
- Red Hat Mono for the eyebrow (600, 11.5px, 1.1px letter-spacing, uppercase, after a 5px mint dot), legend (500, 12px), column heads (600, 10.5px uppercase, 1px letter-spacing), verb chips (700, 11px), paths (500, 13px), in-bar values (600, 10.5px #064E3B) and the end-of-row share (700, 12.5px).

Layout:
- 56px side margins. Eyebrow, title, subtitle, then a legend of 12px rounded squares aligned with the start of the bar column.
- A table: column heads (METHOD, PATH, percentage ticks over the bar column, and the highlighted class at the far right), a 1.2px ink rule under the heads and under the last row, and 1px #D3EBE0 rules between rows. Rows about 38px tall.
- Each row: a 62 x 20 verb chip (4px radius) at x 56, the path at x 136, the bar from about x 352 to 836, and the share at x 904 right-aligned.
- Sort rows by the highlighted (worst) class, descending.

Axes and grid:
- No axis lines; percentage ticks (0%, 25%, 50%, 75%, 100%) sit in the head row. Dashed 2 3 vertical gridlines at 25, 50 and 75% in #D3EBE0 run through the table.

Marks:
- Bar chart: 100% stacked horizontal bars 16px tall, square ends, segments in 2xx, 4xx, 5xx order separated by 1px paper gaps, with a 1px ink outline at 12% opacity and 3px radius around the whole bar. The 2xx share is printed inside the bar's left end. The 5xx share is printed at the row end: rows at or above the alert threshold get a white label on a 56 x 22 crimson pill (11px radius); the rest are crimson text (muted when under 1%).
- Line chart: each row becomes a small-multiple track: a 2px line per class in the same three colors across the row's width, the 5xx line thickened to 2.5px, with the same verb chip, path and end-of-row share.

Avoid: dark mode, 3D, gradients, rounded segment ends, legends far from the bars, and verb colors other than green, blue and red.

When you're done, render the chart and check that every bar sums to 100, the longest path clears the bar column, and the title's "1 in N" or percentage matches the worst row.