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

Combined Ratio bar chart, dark theme: Aubergine results slide with coral and lilac stacks under a white 100 line.

Combined Ratio

DarkBar

Aubergine results slide with coral and lilac stacks under a white 100 line.

  • Aubergine#221626
  • Coral#F07167
  • Pale lilac#C8B6E2
  • White line#FFFFFF
  • Profit green#7FD1A4

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 "Combined Ratio" 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 quarterly results slide for an insurer's investor update. Dark aubergine, confident and friendly, with warm coral and soft lilac stacks and one bright white line that everyone reads first: 100.

Colors (use these exact values):
- Page: #221626 (dark aubergine).
- Loss ratio (bottom segment): #F07167 (coral). Expense ratio (top segment): #C8B6E2 (pale lilac).
- The 100 line, value labels and title: #FFFFFF.
- Profit zone tint and its legend: #7FD1A4 (fill at 10% opacity under the 100 line, text at full strength).
- Secondary text: #A897AE. Gridlines and year dividers: #3A2B3F.

Typography (Google Fonts):
- Manrope: eyebrow 11.5px 700 uppercase, 2.4px letter-spacing, in coral; title 800 at 30px white stating the finding; subtitle 14.5px #A897AE; legend 12.5px 600; tick labels 11.5px (the "100" tick 700 white); value labels 11.5px 800 white; quarter labels 11.5px 500; year labels 13px 700 white; folio 10px 600 uppercase with 1.6px letter-spacing.
- Newsreader italic for the notes: 14px explanatory note and 12.5px source, both #A897AE.

Layout:
- 56px margins. Eyebrow at y 52, title at y 92, subtitle at y 120, legend row at y 140 (12px swatches with 2px radius): loss, expense, and the green profit zone.
- Plot from x 96 to 904, y 186 to 484, y domain 0 to 115.
- Quarter labels 20px under the baseline, year labels centered under each group of four 42px below, with 1px #3A2B3F vertical dividers between years.
- Italic note at y 562, source at y 582 left, folio right.

Axes and grid:
- Horizontal 1px #3A2B3F gridlines at 0, 25, 50, 75; a bright 1px #FFFFFF hairline at 100 drawn above the bars. 1px #A897AE baseline.

Marks:
- Bar chart: stacked vertical bars 30px wide at 16 quarters, loss ratio on the bottom, expense ratio on top with 2px rounded top corners only. The combined total centered above each bar in bold white, 8px above; bars above 100 get a small coral up caret (10px wide, 7px tall) between the bar and its label.
- Line chart: a 2.5px coral line for the loss ratio and a 2.5px white line for the combined ratio, with the band between them filled lilac at 60% (the expense ratio), the same white 100 hairline and green tint below it, coral carets over points above 100, and values labeled in bold white.

Avoid: pure black backgrounds, gradients, shadows, a y axis line, more than one accent for "bad" quarters, and labels that sit on the 100 line.

When you're done, render the chart and check that every label equals loss plus expense, carets appear only above 100, the streak in the title counts correctly, and the white 100 line stays visible over the bars.