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

Class Capacity bar chart, light theme: Studio schedule board of black bullet bars where sold-out classes flip to lime.

Class Capacity

LightBar

Studio schedule board of black bullet bars where sold-out classes flip to lime.

  • Board gray#EDEDED
  • Black#111111
  • Capacity track#D3D3D3
  • Electric lime#C6F432

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 "Class Capacity" 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: the printed weekly schedule board of a hard-edged strength studio. Pale gray paper, black condensed headings, bullet bars and one electric lime that only appears when something is sold out.

Colors (use these exact values):
- Page #EDEDED. Black #111111 for headings, attendance bars, initials rings and tags. Secondary text #5E5E5E, faint text #8A8A8A, thin rules #BDBDBD.
- Capacity track #D3D3D3.
- Sold out: electric lime #C6F432 (with a 1.5px #111111 outline), and lime text on black tags.

Typography (Google Fonts):
- Big Shoulders Display for headings: brand line 800 22px uppercase with 1.5px letter-spacing; headline 900 48px uppercase stating the finding (for example "7 OF 18 CLASSES SOLD OUT"); day headers 800 19px with 2px letter-spacing; footer tag 800 13px.
- Public Sans with tabular numerals for everything else: subtitle 500 14px #5E5E5E; row names 700 13px; times 500 10.5px #8A8A8A; initials 700 10.5px; values "14/16" 700 12px; tags 700 11px; legend 500 12px.

Layout:
- 40px margins. A small black square logo with a lime chevron, the brand line, the headline, the subtitle with totals, and a compact two-item legend at the top right, then a 2px black rule.
- Two columns (x 40 and 500, each 420px wide) of grouped rows. Each group starts with a day header followed by a 1px #BDBDBD rule; rows are 30px tall.
- Each row: a 12px-radius initials circle (outline for open classes, solid black with lime initials for full ones), the class name over its start time, then the bar starting 150px into the column, then the value and, if full, a black waitlist tag "+6".
- A 1px footer rule with the source on the left and a small legend note on the right.

Axes and grid:
- No axes or gridlines. All tracks share one scale (the largest room) so lengths compare across rows.

Marks:
- Bar chart: bullet bars. A 16px #D3D3D3 track shows capacity and an 8px #111111 bar centered inside it shows attendance, square ends. When attendance equals capacity the whole track turns #C6F432 with a 1.5px black outline and no inner bar, followed by the value and a 30 x 16px black tag with the lime waitlist count.
- Line chart: a 2.5px #111111 line with square 6px markers on a #D3D3D3 band showing the capacity limit; points at capacity become lime squares with black outlines and a black "+n" tag above.

Avoid: rounded corners, gradients, shadows, color other than black, grays and the one lime, and using lime for anything that is not sold out.

When you're done, render the chart and check that the headline count matches the number of lime rows, every value reads attendance/capacity, and no row, tag or footer collides with another.