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

Apparatus Hours bar chart, dark theme: Chrome framed bay board with metal unit plates and red and silver bars.

Apparatus Hours

DarkBar

Chrome framed bay board with metal unit plates and red and silver bars.

  • Charcoal#1A1A1A
  • Chrome#C0C0C0
  • Engine red#EF4444
  • Board white#F2F2F2

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 "Apparatus Hours" 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 fire station apparatus bay status board. Heavy, polished and utilitarian: deep charcoal inside a brushed chrome frame, metal unit plates bolted to the axis, bright red for work and silver for everything else.

Colors (use these exact values):
- Outer page: #101010. Board: #1A1A1A inside a 5px chrome frame (rx 10, 14px inset) stroked with a diagonal gradient #EDEDED, #8A8A8A, #C0C0C0, #7A7A7A, #E0E0E0, with small chrome screw heads at the four corners.
- Primary series: #EF4444 (bright red). Secondary series: silver, a vertical gradient from #D8D8D8 to #A8A8A8 (#C0C0C0 as the flat equivalent).
- Unit plates: vertical chrome gradient #F4F4F4, #C0C0C0, #8F8F8F, #D6D6D6 with a 1px #5A5A5A edge and two #6A6A6A rivets.
- Title text: #F2F2F2. Secondary text: #8E8E8E. Gridlines: #2C2C2C.

Typography (Google Fonts):
- Anton for the title (34px, #F2F2F2, uppercase, 0.5px letter-spacing, stating the finding) and the percent column (18px).
- Roboto Condensed for everything else: eyebrow 12px 700 uppercase with 2.4px letter-spacing in red; subtitle 16px #8E8E8E; legend 14px 700; plate labels 14px 700 uppercase with 1px letter-spacing in #1A1A1A; in-bar values 13px 700 (white on red, #1A1A1A on silver); axis labels 13px; small column heads 11px 700 uppercase with 1.6px letter-spacing; threshold chip 12px 700 uppercase.

Layout:
- 56px side margins inside the frame. Eyebrow at y 64, title at y 106, subtitle at y 134, legend (14px squares) at y 156.
- Plates 96 x 26 px at the left edge of each row, rx 3. Bars from x 168 to 790, 24px tall on a 38px row pitch.
- A right-hand column at x 836 to 898 with the percent busy for each row, headed "% BUSY"; rows over the threshold get a solid red chip (rx 3) behind white numerals.

Axes and grid:
- 1px #2C2C2C vertical gridlines at round values, labels below the last row, and a small "HOURS" unit label under the axis at the right.
- The threshold: a 1.5px #F2F2F2 dashed vertical line (6 on, 4 off) drawn behind the bars, with a chip on top (1px #F2F2F2 border, rx 3, board fill) naming it, for example "20% BUSY = 1,752 H".

Marks:
- Bar chart: stacked horizontal bars, square-cornered, red segment first then silver with a 1.5px gap between them. Each segment carries its value inside: red values right-aligned 8px from the segment end, silver values centered.
- Line chart: a 3px #EF4444 line for the primary series and a 2px #C0C0C0 line for the secondary, straight segments with 5px square markers, chrome plates as the category labels on the x axis and the dashed threshold as a horizontal line with the same chip.

Avoid: rounded bar ends, glows, color gradients on the red, more than two series colors, and a legend inside the plot.

When you're done, render the chart and check that the threshold line does not strike through any value label, the percent column is arithmetically right, and plate text is readable on the chrome.