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

Hundred People bar chart, light theme: Rows of 100 tiny people, colored in order so each outcome reads as a bar.

Hundred People

LightBar

Rows of 100 tiny people, colored in order so each outcome reads as a bar.

  • Coral#E4684F
  • Muted teal#3F8F8A
  • Pebble gray#C9C4BA
  • Warm ink#23201C
  • Off-white#F7F4EE

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 "Hundred People" 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 friendly explainer pictogram that turns percentages into people. Soft, warm and legible: each row is 100 small person icons, colored in order so every outcome reads as a bar.

Colors (use these exact values):
- Page: #F7F4EE (soft off-white). Primary text: #23201C. Secondary text: #6F6A62. Hairlines: #E2DCD1.
- Outcome colors, in this order: #E4684F (coral, the lead outcome), #3F8F8A (muted teal), #C9C4BA (pebble gray, the remainder).

Typography (Google Fonts), Epilogue throughout:
- Title 800, 30px, -0.6px letter-spacing, in the "If 100 people..." form, stating something true for every row.
- Subtitle 15.5px #6F6A62. Key labels 13.5px 500. Row names 18px 700, row notes 13px. Lead share 30px 800 in coral followed by the outcome word 14px 500; the other shares 12.5px #6F6A62 on the line below. Source 12px.

Layout:
- 56px side margins. Title at y 80, subtitle at 108, then a key row at y 138 with a person icon before each outcome label and "1 icon = 1 person" right-aligned, then a full-width 1px #E2DCD1 rule.
- Each category is a block: name and a short note on the left (x 56), a 20 x 5 icon grid starting at x 230 (21px column pitch, 15px row pitch), the shares on the right starting 30px after the grid. 22px between blocks with a dotted (1 on, 3 off) #E2DCD1 separator.

Marks:
- Person icon: a round head (r 2.9) above a shoulder block 8.8px wide and 6px tall with rounded top corners, both in the outcome color.
- Bar chart: fill each 100-icon grid column by column (top to bottom within a column, then the next column) in outcome order, so each color run is a clean block whose length reads as a bar. Sort or order rows meaningfully.
- Line chart: use one row of 100 icons per period and let the lead color's run length change from row to row, with a thin coral line connecting the right edge of each run to show the trend.

Avoid: rounding shares so rows do not sum to 100, more than three outcome colors, gradients, shadows, and bars drawn as rectangles.

When you're done, render the chart and check that every row has exactly 100 icons, color runs are in the same order in every row, the shares match the icon counts and the title is true for every row.