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

Precinct Reporting bar chart, dark theme: Hourly stacked reporting bars on plum with leader chips and a tally strip.

Precinct Reporting

DarkBar

Hourly stacked reporting bars on plum with leader chips and a tally strip.

  • Plum#1C1124
  • Lilac#C4B5FD
  • Still out#3B2F56
  • Aster peach#FDBA74
  • Marlow mint#6EE7B7

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 "Precinct Reporting" 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: election night after dark. A plum canvas, a strip of tiny precinct squares ticking across the top, wide geometric display type, and bars that fill with lilac hour by hour under a row of leader chips.

Colors (use these exact values):
- Background: #1C1124 (dark plum).
- Done or reported: #C4B5FD (lilac). Remaining: #3B2F56 (dim purple), which also serves for gridlines at 70% opacity.
- Competitor accents: #FDBA74 (peach) and #6EE7B7 (mint), used only in chips, the tally strip and the counts that name them.
- Primary text: #F5F0FA. Secondary text: #A594BF.

Typography (Google Fonts):
- Syne 800 for the title: 34px, -0.5px letter-spacing, in #F5F0FA, followed by a 20px continuation line in lilac.
- Space Grotesk for everything else: strip caption 12px uppercase in #A594BF with the counts 700 in their accent; place name 12px 700 uppercase with 1.6px letter-spacing; subtitle 15px; chips 12px (name 700, margin 500); in-bar values 13px 700 in plum; category labels 13px 600; percentages 12px; key and source 12px.

Layout:
- A tally strip at the very top: one 5.5px square (1px radius, 7px pitch) per unit, 120 per row, colored by outcome, with a caption line 34px below its top edge.
- Title at y 118, continuation at 146, subtitle at 174.
- A row of chips at y 238 above the plot, one per category. Plot from x 96 to 904, y 268 to 512. Category labels 22px below the baseline with a percentage line 17px under them; key and source on one line at y 574.

Axes and grid:
- 1px #3B2F56 horizontal gridlines at 70% opacity at even steps up to the total, numbers on the left in #A594BF. A 1px #A594BF baseline. No vertical gridlines.

Marks:
- Bar chart (stacked to total): each 60px bar reaches the total with the remaining part in #3B2F56 (6px top radius) and the reported part in lilac below it, separated by a 2px plum seam. Print the reported count 16px below the lilac top, centered, in plum.
- Line chart: the cumulative count as a 3.5px lilac stepped line over a #3B2F56 area that fills up to the total line, with chips floating above each step.
- Leader chips: 88 x 26 px fully rounded pills in the leader's accent color with plum text ("MARLOW +0.6"). Circle the chip where the lead changes with a 1.5px ring in the same accent, 5px outside the pill.

Avoid: gradients, glows, a third competitor color, text on the dim remainder, and chips that sit at different heights.

When you're done, render the chart and check that each stacked bar sums to the total, the chip where the lead first changes is the one that is ringed, the counts in the strip caption match the squares, and the title's hour matches the data.