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

Quota Uptake bar chart, dark theme: Dark bullet bars with pale quota rails, sea-green fills and amber warnings.

Quota Uptake

DarkBar

Dark bullet bars with pale quota rails, sea-green fills and amber warnings.

  • Blue-black#0B1A26
  • Sea green#3FB39A
  • Quota rail#C3CCD4
  • Warning amber#F2B233
  • Projection 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 "Quota Uptake" 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 quota board of a fishing cooperative's operations dashboard. Dark, orderly and decisive: pale rails for the allowance, solid sea-green fills for what is used, a white tick for where the year will land, and amber only where attention is needed.

Colors (use these exact values):
- Page: #0B1A26 (ocean blue-black).
- Used amount (landings): #3FB39A (sea green). Allowance rail (quota): #C3CCD4 at 90% opacity. Projection tick: #FFFFFF.
- Warning: #F2B233 (amber) for percentages above 90% and for overshoot labels.
- Text #E4EBF0, secondary text #8A9BAA, gridlines #1B2D3C, zero axis #4A5E70. Eyebrow in sea green.

Typography (Google Fonts):
- Epilogue throughout. Eyebrow 12px 700 uppercase with 2.4px letter-spacing. Title 800 28px with -0.4px letter-spacing, stating the finding. Subtitle 15px #8A9BAA.
- Category labels 15px 600. Column headers 11px 700 uppercase with 1.6px letter-spacing. Value columns 13.5px regular; percentage column 16px (600, or 800 amber when above 90%). Overshoot labels 12px 600 amber. Tick labels 12px.

Layout:
- 56px side margins. Eyebrow at y 54, title at 92, subtitle at 120. Category labels at x 56; bars from x 176 to 736 on one shared scale; a right-aligned "LANDED / QUOTA" column ending at x 826 and an "UPTAKE" column ending at x 904. Rows 40px apart starting at y 176, sorted by quota descending.
- Key row at y 524, a 1px rule at 552, source line at 576.

Axes and grid:
- Vertical 1px #1B2D3C gridlines every 1,000 units with labels above the first row, and a 1.2px #4A5E70 zero line. No bottom axis.

Marks:
- Bar chart (bullet): the quota as a 6px pale rail from zero with a 3 x 14px end cap; landings as a 16px sea-green bar with 2px radius drawn over it; the projected year-end as a 3 x 26px white tick. When the projection passes the quota, print "+220 t" in amber 8px right of the tick.
- Line chart: cumulative landings as a 2.5px sea-green line per series (or one highlighted series), the quota as a dashed 1.5px pale horizontal line, the projection continuing as a dotted white line to year-end with a white end tick, and amber value labels where uptake passes 90%.

Avoid: a legend of many colors, rounded rails, gradients, glows, percentages in any color but amber or white, and a second axis.

When you're done, render the chart and check that every percentage equals landed divided by quota, only rows above 90% are amber, the overshoot count in the title matches the ticks beyond their caps, and the right columns align on their right edges.