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

Incident Types bar chart, light theme: Annual report bars colored by category beside a ruled key table.

Incident Types

LightBar

Annual report bars colored by category beside a ruled key table.

  • Sandstone#F4EEE6
  • Deep red#9B1C1C
  • Ochre#C2851A
  • Dark teal#115E59
  • Alarm gray#9CA3AF

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 "Incident Types" 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: an operations page from a municipal fire department's annual report. Calm, bookish and civic: sandstone stock, a double rule under the running head, a serif headline and a small ruled key table beside the chart.

Colors (use these exact values):
- Page: #F4EEE6 (pale sandstone). Key table panel: #EDE4D8.
- Category colors: #9B1C1C (deep red, fires), #C2851A (ochre, rescues), #115E59 (dark teal, medical), #9CA3AF (gray, false alarms or the least important category).
- Ink: #2A211C for the title, labels, values and rules. Secondary text: #6F6359. Light rules: #D8CCBD.

Typography (Google Fonts):
- Vollkorn for the title (600, 32px, #2A211C, sentence case, stating the finding), the key table heading (600 italic, 19px) and the folio number (600, 14px).
- Asap for everything else: running head 11px 600 uppercase with 2.4px letter-spacing (organization name in #9B1C1C at left, report section in #6F6359 at right); subtitle 15px #6F6359; category labels 14px ink; value labels 14px with the count 700 in ink and the share 400 in #6F6359, 6px apart; table column heads 10px 600 uppercase with 1.6px letter-spacing; table rows 14 to 15px.

Layout:
- 56px side margins. Running head at y 46 above a double rule (1.5px then 0.6px, 4px apart, ink). Title at y 108, subtitle at y 136.
- Chart column on the left: labels left-aligned at x 56, bars starting at x 248 from a 1px ink axis line. Rows 38px apart, bars 22px tall.
- Key table at the right in a 280px #EDE4D8 panel (no border, no radius): an italic heading, column heads (CATEGORY, CALLS, SHARE), a 1px ink rule, one row per category with a 14px square swatch, name, bold count and share, 1px #D8CCBD rules between rows, then a 1px ink rule and a bold Total row.
- Footer: 1px #D8CCBD rule, "Source: illustrative data" at left in 12px, folio page number at right.

Axes and grid:
- No gridlines and no value axis: every bar carries its count and share.
- Only the vertical 1px ink axis line at the bar origin.

Marks:
- Bar chart: horizontal, square-cornered bars sorted from largest to smallest, each colored by its category (not by rank). Value label 8px past the bar end: bold count, then share in muted text.
- Line chart: one 2.5px line per category in the category colors, straight segments, no dots except a 4px dot at the last point, with the category name and last value as a direct label at the right end in the line's color. Keep the key table panel at the right with the latest totals.

Avoid: gradients, shadows, rounded bars, a legend inside the plot, gridlines, and coloring bars by magnitude.

When you're done, render the chart and check that bars are sorted, colors follow categories, the table totals equal the sum of the bars, the shares add to 100%, and no table cell collides with its neighbor.