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

Material Flow bar chart, dark theme: 100% stacked end-of-life bars on dark slate with a thin circularity score column.

Material Flow

DarkBar

100% stacked end-of-life bars on dark slate with a thin circularity score column.

  • Dark slate#171B1F
  • Reuse teal#2AA7B5
  • Recycled green#3E8E3C
  • Energy amber#E9B44C
  • Landfill gray#6B7580

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 "Material Flow" 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 national survey table on dark slate. Clean, tabular and data-dense, with four clear outcome colors and a quiet score column at the right.

Colors (use these exact values):
- Page: #171B1F (dark slate).
- Outcome segments, in order: #2AA7B5 (reuse teal), #3E8E3C (recycled green), #E9B44C (energy amber), #6B7580 (landfill gray).
- Text inside segments: #0E1316 on teal, #F3F6F1 on green, #1A1407 on amber, #F3F5F7 on gray.
- Ink #E9EDF1. Secondary text #8C96A1. Row rules and score tracks #2A3138.
- Eyebrow and the score bar fill in teal.

Typography (Google Fonts): Hanken Grotesk for all text, with tabular figures (font-variant-numeric: tabular-nums) for every number.
- Title 30px 700, -0.5px letter-spacing, #E9EDF1, stating the finding.
- Eyebrow 11.5px 700 uppercase, 2px letter-spacing. Subtitle 15.5px 400 #8C96A1.
- Legend 13px 600. Column heads 10.5px 700 uppercase, 1.5px letter-spacing. Row labels 15px 600, right-aligned. Segment percentages 13.5px 700. Scores 20px 700 with "of 100" at 10.5px underneath.

Layout:
- 56px margins. Eyebrow at y 52, title at y 92, subtitle at y 120, legend row at y 158 (12px swatches with 2px radius).
- Row labels end at x 216; bars run from x 232 to 776; a 1px vertical #2A3138 rule at x 792 separates the score column (x 808 to 904).
- Rows 48px apart with 32px bars; 1px #2A3138 rules between rows spanning the full width.

Axes and grid:
- No axis: the bars are 100% wide by definition. A column head "SHARE OF TONNAGE" over the bars with "100%" right-aligned at their end.
- Rows sorted by the score, highest first.

Marks:
- Bar chart: 100% stacked horizontal bars, square corners, segments separated by 2px of page color. Print the percentage centered inside every segment of 8% or more; leave smaller ones unlabeled and say so in the source line.
- Score column: the score number, then a thin 64 x 3px track (#2A3138) with a teal fill from zero to the score.
- Line chart: one 2.5px line per outcome in the same four colors on the dark slate, a direct label at each line's end, faint 1px #2A3138 gridlines, and the same score column listing the latest values.

Avoid: rounded bars, gradients, a y axis on the 100% bars, bright white page, more than four outcome colors.

When you're done, render the chart and check that each row sums to exactly 100, the inside labels have enough contrast on every segment color, and the score column aligns with its rows.