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

Spotlight Noir bar chart, dark theme: Charcoal sorted bars with a single amber bar carrying the story.

Spotlight Noir

DarkBar

Charcoal sorted bars with a single amber bar carrying the story.

  • Page#0E0E0E
  • Bar#2B2B2B
  • Spotlight#F5B700
  • Text#F2F2F2
  • Muted#8A8A8A

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 "Spotlight Noir" 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 dark editorial chart where everything is quiet except the one mark the headline is about.

Colors (use these exact values):
- Background: #0E0E0E. Default marks: #2B2B2B. The spotlight mark: #F5B700 (amber).
- Text: #F2F2F2 for the title, the spotlight label and its value. #BDBDBD for other category labels, #8A8A8A for the subtitle and other values, #5C5C5C for axis labels and the source.
- Gridlines: #1E1E1E. Callout pill: #F5B700 at 14% opacity with #F5B700 text.

Typography (Google Fonts): Inter Tight only.
- Title 34px 700, letter-spacing -0.6px, written as the finding and naming the spotlight item ("Mystery is the most borrowed genre").
- Subtitle 17px 400. Category labels 17px 500 (600 for the spotlight). Values 15px 600. Callout 12px 600. Axis labels and source 12px.

Layout:
- Title and subtitle top left with 48px margins. The category labels form a left-aligned column at x 48; bars start at a shared left edge around x 196.
- Source bottom left.

Axes and grid:
- Faint vertical gridlines at round values with small labels below the last row. No axis lines, no baseline.

Marks:
- Bar chart: horizontal bars sorted from largest to smallest, 30px tall with 16px between rows. Round only the end of each bar (4px radius); the start stays square on the shared edge. Values sit 10px past the end of each bar.
- Line chart: every series in #3A3A3A at 2px, the spotlight series in #F5B700 at 3px drawn last, with a 6px amber dot on its latest point and its name and value labeled there in #F2F2F2.
- Next to the spotlight value, a small fully rounded pill with the supporting fact ("+18% vs 2024").

Avoid: any second accent color, legends, gradients, shadows, and bold weights on non-spotlight items.

When you're done, render the chart and check that your eye lands on the amber mark first and that the pill fits inside the chart without clipping.