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

Record Sources bar chart, dark theme: Charcoal stacked columns of four record types with file-box legend glyphs.

Record Sources

DarkBar

Charcoal stacked columns of four record types with file-box legend glyphs.

  • Charcoal#1C1C1E
  • Census amber#E0A34A
  • Parish teal#4EA59C
  • Newspaper slate#5E6B86
  • Military rose#C97C8A

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 "Record Sources" 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 genealogist's research log on a dark screen. Geometric, tidy and archival: stacked columns of record types, file-box legend glyphs and totals set bold on top.

Colors (use these exact values):
- Background: #1C1C1E (charcoal).
- Series, in stack order from the bottom: #E0A34A amber (census), #4EA59C teal (parish), #5E6B86 slate (newspaper), #C97C8A dusty rose (military). The rose series also carries a 45-degree hatch of 2px #A95E6D lines every 6px, so it separates from the teal for color-blind readers.
- Primary text: #F2F0EA. Secondary text: #9A9A9F. Gridlines: #34343A. Eyebrow: #E0A34A.
- Segment values: #1C1C1E on amber, teal and rose; #F2F0EA on slate.

Typography (Google Fonts):
- Josefin Sans for all type: eyebrow 600 11px uppercase with 2.6px letter-spacing; title 700 27px stating the finding; subtitle 15px #9A9A9F with measure and total; legend names 600 12.5px uppercase with 1.8px letter-spacing; segment values 600 12.5px; bar totals 700 14px (17px for the highlighted maximum); category labels 13px (700 in primary text for the maximum); axis numbers and source 12px.

Layout:
- 56px side margins. Eyebrow, title, subtitle, then the legend row at about y 146.
- Legend of small file-box glyphs: a 20 x 16 box in the series color (hatched for the rose series), a 23 x 4 lid strip on top outlined in the background color, and an 8 x 4 label-holder outline centered on the front, then the uppercase name. 34px between items.
- The plot from about y 196 to y 520. Source bottom-left and a note on the value threshold bottom-right.

Axes and grid:
- Horizontal 1px #34343A gridlines at a few round values, y numbers left and right-aligned, a 1px #9A9A9F baseline. No vertical gridlines.

Marks:
- Bar chart: stacked columns, 46px wide at 11 categories (about 63% of the band), square corners, with 1.5px background-colored gaps between segments. Print each segment's value centered inside it when the segment is at least 17px tall; skip smaller ones. Bold totals 9px above each column.
- Line chart: a stacked area chart in the same four colors and order, with 1.5px background-colored seams between layers, the rose layer hatched, values printed inside wide layers at their thickest point and bold totals above the top edge at each category.

Avoid: rounded corners, gradients, glows, a legend with plain squares (use the file-box glyphs), and values crammed into thin segments.

When you're done, render the chart and check that the stack order matches the legend order, every printed total equals the sum of its segments, and the hatch keeps the rose segments readable.