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

Pay Equity bar chart, dark theme: Purple-gray split layout pairing lavender and apricot bars with a signed gap column.

Pay Equity

DarkBar

Purple-gray split layout pairing lavender and apricot bars with a signed gap column.

  • Deep purple-gray#1A1726
  • Lavender#A78BFA
  • Apricot#FDBA74
  • Flag pink#F9A8D4
  • Panel#231F33

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 "Pay Equity" 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 thoughtful people-analytics review on a deep purple-gray page. A calm explanatory panel on the left, a clean paired comparison on the right, and the signed gap in its own column so the reader never has to do arithmetic.

Colors (use these exact values):
- Page: #1A1726. Left panel fill #231F33. Gridlines and row rules #2E2942.
- Text: #F4F1FA primary, #9C95B3 secondary.
- First group (women, or series A): #A78BFA (lavender). Second group (men, or series B): #FDBA74 (apricot).
- Flag color for large gaps and the headline gap figure: #F9A8D4 (pink).

Typography (Google Fonts):
- Epilogue: title 700 31px #F4F1FA with -0.6px letter-spacing, stating the finding; row codes 700 14px; gap figures 600 15px (800 17px pink when flagged); panel figures 800 40px and 26px.
- Work Sans for everything else: eyebrow 600 11.5px uppercase with 2px letter-spacing in lavender; subtitle 400 15px #9C95B3; column headers and panel section labels 600 10.5px uppercase with 1.8px letter-spacing in #9C95B3; row names 12px #9C95B3; value labels 500 11.5px in the bar's own color; panel body 13px on 19px leading.

Layout:
- 40px side margins; eyebrow at y 52, title at y 92, subtitle at y 118.
- Split layout: a left panel (x 40, y 146, 250 x 386, 10px radius, #231F33) holding the legend (26 x 10 px swatches with 2px radius), a thin rule, an "ADJUSTED GAP" section with a four-line explanation, the widest gap as a big pink numeral, and a second summary figure.
- Chart on the right: row labels at x 330 (code on top, name beneath), bars from x 452, a vertical 1px #2E2942 divider at x 846, and a narrow right column with signed gaps right-aligned at x 904 under a "GAP" header.
- Footer: source at the bottom left, a flag note at the bottom right.

Axes and grid:
- Vertical 1px #2E2942 gridlines at round values with "$100K" style labels below the last row; no axis lines. 0.8px #2E2942 rules between rows spanning the row labels through the gap column.

Marks:
- Bar chart: paired horizontal bars 13px tall with a 3px gap between them, right ends rounded 3px, lavender on top and apricot below, each with its value 6px past its end in its own color. The gap column shows (A / B - 1) as a signed percentage with a true minus sign (U+2212) and one decimal; gaps beyond 3% in bold pink.
- Line chart: two 2.5px lines in #A78BFA and #FDBA74 with 5px dots, the band between them filled #F9A8D4 at 12% where A is below B; the right column lists the signed gap at the last point of each row or period; the left panel is unchanged.

Avoid: pink and blue gender stereotypes, red-green, heavy borders around the panel, and computing gaps in the opposite direction from the explanation.

When you're done, render the chart and check that every gap in the right column equals the ratio of the two bars, the panel's headline figures match the column, and value labels never cross the divider.