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

Vote Share Bars bar chart, dark theme: Broadcast results rows with party chips, ghost bars and signed change.

Vote Share Bars

DarkBar

Broadcast results rows with party chips, ghost bars and signed change.

  • Studio black#0B0B0B
  • Magenta#DB2777
  • Lime#84CC16
  • Sky#0EA5E9
  • Amber#F59E0B

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 "Vote Share Bars" 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 television results board. Pure black, bold condensed uppercase type, colored party chips, and bars that sit on faint ghosts of the last result so the change is visible before you read the number.

Colors (use these exact values):
- Background: #0B0B0B. Top strap: #161616. Row dividers and dotted gridlines: #262626.
- Party hues in order: #DB2777 (magenta), #84CC16 (lime), #0EA5E9 (sky), #F59E0B (amber). An "Others" row uses #5C5C5C.
- Text: #FFFFFF; secondary text #8A8A8A. Change up: #4ADE80. Change down: #F87171.

Typography (Google Fonts):
- Oswald for the strap brand (700, 20px, 1.5px letter-spacing), the title (600, 36px, uppercase, stating the result with the number), chip codes (700, 17px), bar values (600, 26px white) and change figures (600, 26px).
- Roboto Condensed for labels: strap subtitle 14px 500 uppercase with 2px letter-spacing; subtitle 16px #8A8A8A; column heads 12px 700 uppercase with 1.8px letter-spacing; party names 18px 700 uppercase white; axis labels 12px; key and notes 13px; source 12px.

Layout:
- A full-width 46px strap at the top in #161616 with an 8px bar in the leading party color at the far left, the brand, a 1px #3A3A3A divider, the strap subtitle, and a white status box at the right ("ALL 64 SEATS DECLARED" in black 13px 700).
- Title at y 106, subtitle at 136, column heads at 176 ("PARTY", "VOTE SHARE", "CHANGE" right-aligned) over a 1px divider.
- Rows 60px apart with 1px #262626 dividers. Party column: a 52 x 36 px chip in the party color with its three-letter code in black (white on the Others chip), then the name. Bars start at x 300 and scale 0 to 40% across 440px. The change column is right-aligned at x 904 with a small triangle 60px to its left.

Axes and grid:
- Vertical 1px #262626 gridlines dashed 2 on 4 every 10%, labelled under the last row. No y axis line.

Marks:
- Bar chart: the previous result as a 40px tall ghost bar in white at 7% opacity, closed by a 2px white tick at 55% opacity at its end; the current result as a 26px bar in the party color centered inside it. The value label sits 12px beyond whichever bar is longer.
- Line chart: each party as a 3.5px line in its hue over its previous-period line drawn at 25% opacity, with a chip-colored square end marker, the code and value in Oswald at the right, and the change figure in the right column.
- Change figures signed with a true minus, one decimal, colored green up or red down, with a matching 16px triangle (up or down).

Avoid: gradients, rounded corners, lowercase headlines, more than one accent per row, and legends inside the chart area (use the small key below).

When you're done, render the chart and check that the shares and previous shares each add up to 100, each change equals current minus previous, the ghost tick sits exactly at the previous value, and the strap text does not collide.