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

Level Curve bar chart, light theme: A game design doc progression chart with mint-to-teal bars and outlined milestone rewards.

Level Curve

LightBar

A game design doc progression chart with mint-to-teal bars and outlined milestone rewards.

  • Warm paper#F2F0EC
  • Mint#9EE6C4
  • Deep teal#0F5E5A
  • Ink#141414
  • Burnt orange#C0532E

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 "Level Curve" 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 page from a game designer's progression doc. Warm paper, a wide expressive display title, monospaced figures, bars that deepen from mint to teal as the curve climbs, and milestones called out like design notes.

Colors (use these exact values):
- Page: #F2F0EC (pale warm gray). Ink: #141414. Secondary text: #66625C. Faint labels: #9A958D. Gridlines: #DCD8D1.
- Bar ramp: interpolate each bar's fill linearly in RGB from #9EE6C4 (mint, first category) to #0F5E5A (deep teal, last category). Show the ramp as a small 120 x 8px rounded gradient key top right with its end labels.
- Secondary measure strip: #C0532E (burnt orange) line on an #EAE7E1 band.

Typography (Google Fonts):
- Syne 700 for the title (32px, -0.5px letter-spacing, stating the finding) and for milestone names (12.5px).
- DM Mono for everything else: eyebrow 500 11px uppercase with 1.4px letter-spacing ("SKYFORGE / PROGRESSION / XP CURVE v4"), subtitle 400 13px, tick labels 11 to 11.5px, milestone values 10.5px, strip labels 10.5 to 11.5px.

Layout:
- 40px side margins. Eyebrow, title, subtitle stacked at top left; gradient key at top right.
- Main plot from about y 176 to y 420, full width from x 96 to x 912.
- Below it, a separate 58px-tall strip sharing the same x positions for a second measure (here cumulative hours), with its own small 0 / 50 / 100 scale and a 11.5px orange heading above it. Never put a second measure on a right-hand axis.
- Source line in 11px mono at the bottom left.

Axes and grid:
- Horizontal gridlines 1px #DCD8D1 at round values with short labels ("5k", "10k"); a 1.2px ink baseline. Unit label ("XP") above the y labels.
- X labels only at the first category and every fifth, milestones in 500 ink, others in #9A958D.

Marks:
- Bar chart: bars 68% of the band, 2px top radius, ramp-colored. Milestone bars get a 1.6px #141414 outline and a 1px ink leader rising 26px from the bar top to a two-line label: the reward in Syne 700 12.5px and the value in DM Mono 10.5px #66625C.
- Line chart: a 2px line colored by the same mint-to-teal gradient along x (use a horizontal linearGradient stroke), small r 3 ramp-colored dots, and the same outlined milestone points (r 5 with a 1.6px ink ring) with leader and two-line label.
- Secondary strip: a 1.5px #C0532E line with r 3 hollow dots (page fill, 1.5px orange ring) at milestones, each labeled in 10.5px 500 orange just above-left.

Avoid: dual axes, drop shadows, 3D, rainbow palettes, labels on every bar, and heavy borders around the plot.

When you're done, render the chart and check that the ramp runs light to dark left to right, milestone labels clear each other and the title, the strip lines up with the bars above it, and the title's multiple is computed from the data.