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

Gauge Rainfall bar chart, light theme: Grouped gauge bars colored by intensity class, with the class key as the axis.

Gauge Rainfall

LightBar

Grouped gauge bars colored by intensity class, with the class key as the axis.

  • Pale aqua#A6E3DB
  • Aqua#5EC2C4
  • Ocean#2E91B8
  • Cobalt#2F57A3
  • Deep indigo#2A1E6C

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 "Gauge Rainfall" 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 flood warning service's daily gauge table turned into a chart. White, orderly and factual: rows grouped under quiet headers, each bar colored by the class its value falls in, and the class key doubling as the axis.

Colors (use these exact values):
- Page: #FFFFFF. Ink #172033, secondary text #667085, group header text #8A93A3, rules and guides #E4E7EC.
- Five intensity classes, light to heavy: #A6E3DB (pale aqua), #5EC2C4, #2E91B8, #2F57A3, #2A1E6C (deep indigo). Each bar takes the color of the class its value falls in.

Typography (Google Fonts):
- Mona Sans throughout. Title 700, 26px, -0.4px letter-spacing, ink, stating the finding. Subtitle 400, 14.5px muted with measure, unit and period.
- Group headers 600, 11px uppercase with 1.4px letter-spacing in #8A93A3 at the left, with a group summary ("mean 71 mm") 500 11.5px right-aligned at the far right.
- Row labels 500 13px ink, right-aligned against the bars. Value labels 600 13px ink 7px past the bar end. Key labels 500 11.5px muted; key numbers 11px muted.

Layout:
- 56px side margins; title baseline at 56, subtitle at 82.
- Rows 22.4px tall with 14px bars; each group gets a 26px header row, and a 1px #E4E7EC full-width rule separates groups.
- Bars start at x 212 against a 1.2px ink axis line; labels end at x 196.

Axes and grid:
- No numeric x axis above the bars. Instead the intensity key runs along the bottom on the bars' own scale: a 6px tall strip made of the five class colors, each segment spanning its class range, with tick marks and boundary numbers above and class names centered below.
- Faint 1px #E4E7EC vertical guides at each class boundary behind the bars.

Marks:
- Bar chart: horizontal bars with 3px rounded right ends only, colored by class, sorted within each group from largest to smallest.
- Line chart: a 2px #2E91B8 line per group with points colored by their class (r 5, 2px white ring), the class strip still running along the bottom of the chart as the key, and the value label on each point's right.

Avoid: a continuous gradient ramp (use discrete classes), a separate legend box, gridlines at arbitrary round numbers, bold group headers that compete with row labels.

When you're done, render the chart and check that every bar's color matches the class its value falls in, the key strip is exactly aligned with the bar scale, group means are computed from the data, and no value label collides with a neighbor.