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

Pay Bands bar chart, dark theme: Steel salary ranges on graphite with light cores and apricot median dots.

Pay Bands

DarkBar

Steel salary ranges on graphite with light cores and apricot median dots.

  • Steel#3E5A78
  • Light steel#86AED6
  • Apricot#FFB079
  • Panel#1D2025
  • Graphite#16181C

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 "Pay Bands" 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 compensation committee chart on a dark product surface. Cool steel ranges, a lighter core, one warm apricot dot per row, and salaries in a crisp monospace.

Colors (use these exact values):
- Background: #16181C (deep graphite). Plot panel: #1D2025 with 8px radius.
- Full range bars and whisker caps: #3E5A78 (steel blue).
- Interquartile core: #86AED6 (light steel blue).
- Median dot and median labels: #FFB079 (apricot), with a 2.5px ring in the panel color.
- Text: #ECEEF1 primary, #8A919C secondary. Gridlines: #2A2E35. Market reference line: #ECEEF1 at 45% opacity.

Typography (Google Fonts):
- Hanken Grotesk for words: eyebrow 11.5px 600 uppercase with 2.2px letter-spacing in #8A919C; title 30px 700 with -0.5px letter-spacing, stating the finding; subtitle 15px #8A919C; legend 13px 500; row names 15px 600.
- DM Mono for every number: level codes 13px 500 #8A919C, median labels 12.5px 500 apricot ("$181k"), range end values 11.5px 400 #8A919C, axis labels 12px, the market tag 11px.

Layout:
- 56px margins. Eyebrow, title, subtitle, then a one-line legend (whiskered bar, core swatch, median dot, dashed market line).
- Row labels on the left: level code, then the role name 32px to its right. The plot panel starts at about x 200 and runs to the right margin.
- Rows ordered junior at the bottom to senior at the top, about 54px per row.

Axes and grid:
- Vertical 1px #2A2E35 gridlines at round salary steps with DM Mono labels ("$120k") below the panel. No horizontal gridlines, no axis lines.
- One dashed (3 on, 3 off) 1.2px market reference line crossing all rows and slightly overhanging the panel, tagged at the bottom in DM Mono.

Marks:
- Bar chart (floating range): an 8px tall steel bar from minimum to maximum, a 22px tall 2px whisker cap at each end, an 18px tall interquartile core with 4px radius on top, and a 7px radius apricot median dot. Median value centered 16px above the dot; min and max values 9px outside the caps.
- Line chart: draw the median as a 2.5px apricot line with 7px ringed dots, the interquartile range as a #86AED6 band at 35% opacity and the full range as a #3E5A78 band at 30% opacity behind it, with the same mono labels on the dots and the dashed market reference as a horizontal line.

Avoid: rounded ends on the steel bars, gradients, glows, more than one warm color, proportional fonts for numbers, and pure black.

When you're done, render the chart and check that every median sits inside its interquartile core, the title claim about the market line is true for the data, whisker caps line up with the min and max values, and no median label collides with a neighbouring row.