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

Draft Board bar chart, dark theme: Charcoal war-room board of ranked grade bars colored by position, picks struck.

Draft Board

DarkBar

Charcoal war-room board of ranked grade bars colored by position, picks struck.

  • Charcoal#1C1C1C
  • Guard teal#4FA3A0
  • Wing gold#D4A73A
  • Forward rust#C4623F
  • Center violet#9A86D0
  • Chalk#EDEAE4

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 "Draft Board" 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: the big ranked board in a team's war room on draft night. Charcoal, thin grid lines, tall condensed type, four muted category colors and picks crossed off as they go.

Colors (use these exact values):
- Page: #1C1C1C (charcoal). Board panels: #232323 with a 1px #4A4A4A frame and 0.8px #343434 row and grid lines.
- Category colors: #4FA3A0 (muted teal), #D4A73A (gold, also the eyebrow), #C4623F (rust), #9A86D0 (violet).
- Primary text and strike lines: #EDEAE4 (chalk). Secondary text: #8F8B85. Rank tiles: #3A3A3A; the highlighted row's tile is chalk with a charcoal number.

Typography (Google Fonts):
- Oswald: eyebrow 500 13px uppercase with 3px letter-spacing in gold; title 600 32px chalk; rank numbers 600 15px; names 500 15px; sub-labels (school or group) 400 9.5px uppercase with 1.3px letter-spacing in #8F8B85, like small caps; category codes 600 12px in the category color; values 500 14px chalk; key labels 500 12px uppercase.
- Source Sans 3 400 15px for the subtitle and 12.5px for the source line, #8F8B85.

Layout:
- 48px margins. Eyebrow and a category key (12px squares, uppercase labels) share the top line; the key is right-aligned at x 912.
- The ranked list splits into two board panels 420px wide (x 48 and x 492), ten 38px rows each, with a small head ("RANKS 1–10") and scale labels above.
- Each row: a 26px square rank tile, the name with its sub-label under it, the category code right-aligned just before the bars, then the bar area 180px wide starting 196px into the panel.

Axes and grid:
- Vertical grid lines every 2 units on a 0 to 10 scale (0.8px #343434, the zero line 1.2px), labels above the panel in 11px Oswald. No other axes.

Marks:
- Bar chart: square-cornered horizontal bars 14px tall from zero in the category color, value 7px past the end. Rows already taken are dimmed to 34% opacity and struck through with a 1.3px chalk line at 80% opacity across the row. The first remaining row gets a 1.5px chalk outline and a chalk rank tile.
- Line chart: thin 2px lines in the four category colors on the same charcoal board grid, each ending in a square 6px marker with a direct label; retired or finished series drop to 34% opacity with a strike line through their label.

Avoid: rounded bars, gradients, glows, bright saturated colors, and a y axis (rank tiles and names label the rows).

When you're done, render the chart and check that the title's counts match the struck rows, the outlined row is the first undimmed one, and the key labels don't touch their neighbours' swatches.