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

Numbered Callouts line chart, light theme: Warm paper, one thick teal line and coral numbered badges keyed to margin notes.

Numbered Callouts

LightLine

Warm paper, one thick teal line and coral numbered badges keyed to margin notes.

  • Oatmeal#F3EDE2
  • Teal#0F766E
  • Coral#E4572E
  • Ink#2B2A28
  • Rule#DCD3C4

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 "Numbered Callouts" 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 editorial explainer graphic from a thoughtful regional newsroom. Warm paper, one confident line, and a numbered story told in the margin: the reader follows badges 1 to 4 along the line and reads the matching captions on the right.

Colors (use these exact values):
- Page: #F3EDE2 (warm oatmeal paper) for the whole canvas.
- The data line: #0F766E (deep teal). Area beneath it: a vertical gradient of the same teal from 22% opacity at the top of the plot to 4% at the baseline.
- Annotation accent: #E4572E (coral). Used only for the numbered badges, their leader lines, the pinned point markers and the dashed event rule. Never for data.
- Ink (title, caption headings, baseline): #2B2A28. Secondary text (deck, axis labels, caption bodies, source): #756E63. Gridlines and the caption column divider: #DCD3C4.
- Badge numerals: #FFFFFF.

Typography (Google Fonts):
- DM Serif Display 400 for the title only: 34px, #2B2A28, sentence case, stating the finding with its number ("Ferry ridership settled 45% higher after the fare cut").
- Karla for everything else: deck 16px 400 #756E63 (what, measure, unit, period); axis labels 13px 400 #756E63; caption headings 15px 700 #2B2A28; caption bodies 13.5px 400 #756E63 with 19px line spacing; badge numerals 13 to 14px 700 white; source and notes 12px.

Layout:
- 56px side margins. Title baseline at y 70, deck at y 100.
- The plot takes the left 60% (x 88 to 628, y 150 to 494). A 1px #DCD3C4 vertical rule at x 652 separates it from a caption column (x 672 to 904).
- The caption column holds one entry per badge, 90px apart, starting level with the top of the plot: a coral circle (r 11) with its white number, then the heading on the same line 21px to the right of the circle's edge, then two short body lines beneath the heading.
- Footer at y 568: "Source: ..." left, a one-line note on the right.

Axes and grid:
- Horizontal gridlines only, 1px #DCD3C4, at round values (0, 5, 10, 15, 20); the zero line is a 1.2px #2B2A28 baseline. Y labels 16px left of the plot, right-aligned; the top label carries the unit ("20k").
- No y-axis line, no x-axis ticks. X labels (months) centered under the plot, 24px below the baseline.

Marks:
- Line chart: one smoothed line (monotone cubic, no overshoot), 4px #0F766E, round caps and joins, with the pale teal area wash under it down to the baseline. No markers anywhere except at the annotated moments. If there are several series, keep the lead series in teal and draw the others as 2px #756E63 lines without a wash, labeled directly at their ends.
- Bar chart: vertical bars in #0F766E at 85% opacity with 2px top corner radius and about 30% gaps; annotated bars get a 2px #E4572E outline and a badge above them. No bar value labels except in captions.

Labels and annotation:
- Pick up to four turning points (a policy change, the peak, a sudden dip, where the series settles). At each, draw a coral point marker (r 5, with a 2.5px #F3EDE2 ring) on the line, a 1.2px coral leader 35 to 60px long, and a coral badge (r 13, 2.5px #F3EDE2 ring) with its white number. Place badges above peaks and below troughs so they never sit on the line.
- Each caption heading states the fact with its number ("Summer peak: 21.2k trips"); the body gives context in two lines. Numbers in captions must be computed from the data.
- An event that starts a new regime gets a 1px coral dashed (3 on, 4 off) vertical rule through the full plot height.

Avoid: coral on any data mark, legends, more than four badges, drop shadows, gridline clutter, markers on every point, and text on top of the line.

When you're done, render the chart and check that badges 1 to 4 run left to right, every badge matches its caption number, no badge or leader crosses the line, and each caption's numbers agree with the data and the title.