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

Shade Finder bar chart, light theme: Foundation shade bars, each filled with its own skin tone, with undertone dots.

Shade Finder

LightBar

Foundation shade bars, each filled with its own skin tone, with undertone dots.

  • Page#FAF6F2
  • Fairest#F3D9C4
  • Medium#C58F6A
  • Deepest#5A3624
  • Warm undertone#D39A2E

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 "Shade Finder" 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 beauty brand's product page for a foundation range. Warm, inclusive and tactile: each mark is literally the color of its product, ordered like a shade card.

Colors (use these exact values):
- Page: #FAF6F2. Ink: #3A2A22. Secondary text: #8A7A70. Gridlines: #EADFD5.
- Mark fills: interpolate in RGB from #F3D9C4 (fairest) through #C58F6A (middle) to #5A3624 (deepest), one step per category in order. Each bar gets a 0.8px outline 25% of the way from its fill toward #5A3624 so the palest bars hold their edge.
- Secondary category dots: cool #C77D93, neutral #A8998A, warm #D39A2E.

Typography (Google Fonts):
- Gowun Batang 700 for the title (32px ink, naming the leader and its share).
- Josefin Sans for everything else: eyebrow 12px 600 uppercase with 3px letter-spacing in #8A7A70; subtitle 15px; value labels 13px (the leader 16px 700); category codes 12px 600 uppercase with 1.4px letter-spacing (the leader 700 in ink); key labels 12px 600 uppercase.

Layout:
- 56px margins; eyebrow y 56, title y 102, subtitle y 132. An undertone key right-aligned at y 176: "UNDERTONE" label then dot + word for each value, measured so the gaps between items are equal (about 40px).
- Plot from x 96 to 904, baseline y 452. Below the codes, a 6px fully rounded gradient strip (fairest to deepest) spanning the plot with "FAIREST" and "DEEPEST" captions, then the source line and a total at the bottom.

Axes and grid:
- Three 1px #EADFD5 gridlines labelled "10k" style at left, no y-axis line, a 1px ink baseline.

Marks:
- Bar chart: 46px bars (about 70% of the slot) with 8px rounded top corners only, filled with their own tone. Value label 10px above. Code 26px below the baseline and an r 4 undertone dot 44px below.
- Line chart: a 2.5px #C58F6A line with each point drawn as an r 9 swatch dot in that category's tone (0.8px outline as above), codes and undertone dots under the x axis exactly as for bars, plus a 10% #C58F6A area.

Avoid: a single uniform bar color, strong gridlines, cool grays, gradients inside bars, shadows.

When you're done, render the chart and check that the palest bar still has a visible edge, the tone ramp runs in the stated order, undertone dots align under their codes, and the title's share is right.