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

Squad Minutes bar chart, light theme: Squad planner card with green stacked minute bars grouped by position.

Squad Minutes

LightBar

Squad planner card with green stacked minute bars grouped by position.

  • Pale gray page#F1F2F4
  • Starter green#1B4332
  • Bench green#95D5B2
  • Unused outline#C9CDD3
  • Ink#16181C

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 "Squad Minutes" 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 tidy squad-planning tool a coaching staff would pin up: a white card on pale gray, rows grouped by position, calm greens and small informative chips.

Colors (use these exact values):
- Page: #F1F2F4. Card: #FFFFFF with a 1px #E1E4E8 border and 12px corner radius, inset 32px from the edges.
- Primary segment: #1B4332 (deep green). Secondary segment: #95D5B2 (light green). Remainder / unused capacity: no fill, 1.2px outline #C9CDD3.
- Ink: #16181C. Secondary text: #6A7079. Eyebrow: #2D6A4F. Row-group dividers: #E6E8EB. Vertical gridlines: #EDEFF2.

Typography (Google Fonts):
- Manrope throughout. Eyebrow 11px 700 uppercase with 2px letter-spacing; headline 25px 800 with -0.5px letter-spacing stating the finding; subtitle 14px #6A7079; legend 12px 600; column headers ("POS", "AGE", "PLAYER", "PLAYED") 10px 700 uppercase with 1.4px letter-spacing in #6A7079; group labels 12px 800 in #1B4332; names 13px 600; totals 13px 700 right-aligned; chip numbers 10.5px 700; axis 11px; source 11.5px.

Layout:
- Content starts at x 64. Eyebrow y 72, headline y 104, subtitle y 128 with the legend right-aligned on the same line.
- Column headers at y 158. Rows are 23px tall, groups separated by a 1px divider and 6px extra space. Left to right: a 3px rounded #1B4332 bar spanning the group's rows with the group label beside it at x 76; an age chip (circle r 9.5, #F1F2F4 fill, 1px #D5D9DE stroke) centered at x 128; the name at x 152; bars from x 300 to 820; totals right-aligned at x 896.

Axes and grid:
- Faint vertical gridlines at a third of the capacity, labels 16px below the last row. A 1px ink dashed (3 on, 3 off) threshold line (here 80% of capacity) crossing all rows, labeled "80%" in 11px 800 on the axis.

Marks:
- Bar chart: horizontal stacked bars, 14px tall, 3px radius. Each row first draws the full-capacity outline (unused), then the primary segment from zero, then the secondary segment directly after it (square ends). A zero row shows only the outline, and its total in #6A7079.
- Line chart: one thin line per group using the same greens (primary 2.5px #1B4332, secondary 2px #95D5B2) over a light #C9CDD3 capacity line, with the same grouped left-hand legend column and chips.

Avoid: shadows beyond the single card border, gradients, heavy gridlines, colors outside the green family, and bars that do not start at zero.

When you're done, render the chart and check that each total equals the sum of its segments, every row fits inside the card, the headline count matches the data and the chips are centered on their rows.