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

Basket Histogram bar chart, dark theme: Lime histogram on a deep green card with dotted mean and median and a white threshold.

Basket Histogram

DarkBar

Lime histogram on a deep green card with dotted mean and median and a white threshold.

  • Deep green#0E2A20
  • Card green#133427
  • Lime#B5E550
  • Pale mint#D6F2E3
  • Threshold white#FFFFFF

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 "Basket Histogram" 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 product analytics card for a grocery team. Deep green, bright lime bars, pale mint text, and a single white threshold line that carries the key number.

Colors (use these exact values):
- Outer background: #0E2A20. Card: #133427, radius 18, inset 28px from the edges. Text: #D6F2E3 (pale mint). Secondary text: #8DB5A2. Gridlines: #22493A, baseline #3B6A57.
- Bars: #B5E550 (lime). Threshold and hero number: #FFFFFF. The region right of the threshold gets a #FFFFFF wash at 4% opacity.

Typography (Google Fonts): Onest throughout.
- Eyebrow 12px 600 uppercase with 1.8px letter-spacing, #8DB5A2. Title 27px 600, -0.4px letter-spacing, #D6F2E3, stating the finding. Subtitle 15px 400 #8DB5A2 with measure, bin size and count.
- Axis labels 12.5px #8DB5A2. Marker labels 13px 600 #D6F2E3. Hero share 36px 700 white with a 13.5px mint line and a 12px 600 gray line under it. Source 12px.

Layout:
- Content inset 56px. Eyebrow at y 64, title at y 102, subtitle at y 128.
- Plot from x 96 to 880, y 234 to 474, with about 50px of space above for marker labels. Source line at y 544 inside the card.

Axes and grid:
- 1px #22493A horizontal gridlines with comma-formatted counts right-aligned 12px left of the plot; the zero line #3B6A57. Currency labels every  below.

Marks:
- Bar chart (histogram): contiguous bins with 1.2px hairline gaps, square corners, all #B5E550. Mean and median are 1.6px #D6F2E3 dotted verticals (1.5 on, 4 off, round caps) from above the plot to the baseline, each topped by an r 2.5 dot, labeled above the plot ("Median $37.70" right-aligned to the left of its line, "Mean $45.84" left-aligned to the right). The threshold is a solid 2px white line from 50px above the plot to the baseline, with the share of observations at or above it printed large beside it.
- Line chart: a 2.5px #B5E550 line with a 12% lime area fill beneath, the same dotted mean and median verticals and the white threshold line with its share.

Avoid: gradients on bars, rounded bar tops, gaps wider than a hairline, extra colors, and labels inside the bars.

When you're done, render the chart and check that mean, median and the share above the threshold are computed from the data, the marker labels do not collide, and the note about any values off the axis is accurate.