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

Top Sheet bar chart, light theme: Budget ledger with green actual bars inside gray budget bars and a mono grid.

Top Sheet

LightBar

Budget ledger with green actual bars inside gray budget bars and a mono grid.

  • Sheet white#FFFFFF
  • Actual green#1B4332
  • Budget gray#DADDDA
  • Overrun red#B3261E
  • Under green#2D6A4F

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 "Top Sheet" 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 top sheet of a film production budget, the one-page summary a producer hands the financiers. A ledger: boxed monospace header cells, a serif title, account codes, right-aligned figures and a double-ruled total. Sober and accountable.

Colors (use these exact values):
- Page: #FFFFFF.
- Actual spend bars and section labels: #1B4332 (dark green).
- Budget container bars and legend swatch: #DADDDA (light gray).
- Overrun segment and positive variances: #B3261E (red). Negative (under budget) variances: #2D6A4F (green). Zero variance: #5F6660.
- Ink for text, header grid and rules: #1C1F1D. Secondary text: #5F6660. Section divider rules: #C9CDC9.

Typography (Google Fonts):
- Libre Caslon Text 700 for the title (30px, stating the result), 400 italic 16px #5F6660 for the subtitle, 400 14px for line descriptions and 700 14px for the total description.
- Roboto Mono for the ledger: header grid captions 9.5px uppercase with 1px letter-spacing in #5F6660 and values 13px 700 uppercase; column headers 10.5px 700 uppercase with 1px letter-spacing; section labels 9.5px 700 uppercase in #1B4332; account codes 12px #5F6660; figures 13px (actual and variance 700), totals 14px 700; legend and footer 10.5px.

Layout:
- Title and subtitle at top left (x 40). Below them a boxed header grid, 880 x 44px with a 1.2px border and 0.8px dividers, holding four or five caption/value cells (production, format, status, currency, page).
- Ledger columns: section, account code, description, a bar column about 290px wide, then right-aligned budget, actual and variance columns ending at x 920.
- Column header row with a 1.2px #1C1F1D rule beneath it. Rows 30px tall; a 1px #C9CDC9 rule between sections; each section name appears once, on its first row.
- Total row under a double rule (two 1px #1C1F1D lines 4px apart) with the legend sitting in the bar column, closed by a single 1px rule. Source note bottom left, "TOP SHEET" folio bottom right.

Axes and grid:
- No axis or gridlines. The figures columns carry the values; the bar column is a pure visual.

Marks:
- Bar chart: each row has a 16px-tall #DADDDA budget bar starting at zero with the actual as an 8px #1B4332 bar centered inside it. Where actual exceeds budget, the part beyond the budget end is #B3261E. A 1.4px #1C1F1D tick, 20px tall, marks the budget end. Square corners throughout.
- Line chart: each series drawn as a 2px #1B4332 line with a dashed 1.4px #1C1F1D budget or target line; stretches above target shaded #B3261E at 20% opacity; the ledger columns to the right hold the latest budget, actual and variance.

Labels and annotation:
- Variances read actual minus budget with an explicit sign (+26, true minus sign for negatives), colored red above budget and green below. The total variance also shows its percentage.

Avoid: rounded bars, gradients, shadows, bright fills, a y-axis, and any variance without a sign.

When you're done, render the chart and check that the totals sum the rows, every variance equals actual minus budget, overruns start exactly at the budget tick, and the monospace columns align on their right edges.