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

Contents Page bar chart, light theme: Lollipops set as a table of contents, with dotted leaders and page-number values.

Contents Page

LightBar

Lollipops set as a table of contents, with dotted leaders and page-number values.

  • Book paper#FFFFFF
  • Ink#1A1A1A
  • Deep green#1E5B3F
  • Leader grey#9A9A9A

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 "Contents Page" 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: the table of contents of a well-made field guide. Bright white paper, black type, generous air and a single deep green for the chapter that matters. The chart should read like a list you could run your finger down.

Colors (use these exact values):
- Paper: #FFFFFF.
- Ink: #1A1A1A for titles, dots and values.
- Accent: #1E5B3F (deep green) for the "CONTENTS" heading and the one highlighted row (title, number, leader, dot and value).
- Secondary text: #6B6B6B. Dotted leaders: #9A9A9A. Scale rule #D6D6D6, reference line #E4E4E4.

Typography (Google Fonts):
- Crimson Pro for the title (500, 32px, stating the finding), row titles (400, 19px; 600 for the highlight), part titles (italic 17px, grey) and the reference note (italic 14px).
- Source Sans 3 with tabular lining figures for everything numeric and small: heading "CONTENTS" 600 13px with 7px letter-spacing in green; subtitle 15px grey; "PART I" labels 600 11px with 3px letter-spacing; row numbers 600 14px grey; values 15px right-aligned (700 for the highlight); scale labels 12px.

Layout:
- 76px left margin. Heading at y 58, title at y 98, subtitle at y 126.
- A quiet value ruler at y 160 spanning the value zone (about x 470 to 836): tick labels above a 1px #D6D6D6 rule with 5px ticks, and a "MIN" (unit) caption above the value column at x 900.
- Rows every 23px, grouped under Roman-numeral part headers with 23px after each header and an extra 8px before each new part.
- Each row: row number at x 76, title at x 104, the value right-aligned at x 900 like a page number.

Axes and grid:
- No gridlines. One 1px #E4E4E4 vertical reference line at the average, labelled in italic at the foot.

Marks:
- Bar chart: horizontal lollipops dressed as contents leaders. A round-capped dotted leader (1.2px, dash 0.1 on 5 off) runs from x 150 to the dot; the dot (5px radius, 6.5px for the highlight) sits at the value position. Draw the title over the leader with a 12px white stroke behind the text (paint-order: stroke) so the leader appears to start right after the words.
- Line chart: a thin 1.5px ink line with 4px dots at each point on a white page, a dotted leader-style baseline, the highlighted series in deep green at 2.5px; label points with tabular figures like page numbers and set the category axis in Crimson Pro.

Avoid: filled bars, colored backgrounds, boxes, heavy rules, more than one accent, and leaders that run through the text.

When you're done, render the chart and check that every dot sits to the right of its title, the values line up on their right edge, only one row is green, and the reference-line figure is arithmetically right.