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

Read Lengths bar chart, dark theme: Orchid histogram on aubergine with a dashed amber N50 rule and run summary.

Read Lengths

DarkBar

Orchid histogram on aubergine with a dashed amber N50 rule and run summary.

  • Aubergine#1C1320
  • Pale orchid#D6A6E8
  • Tail orchid#B07CC6
  • Bar edge#8E5AA6
  • N50 amber#F2C46D

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 "Read Lengths" 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 long-read sequencing run report. Dark and elegant rather than technical: aubergine ground, soft orchid bars, one amber reference line and a tidy summary card.

Colors (use these exact values):
- Page: #1C1320 (deep aubergine). Summary card: #26192B with a 1px #3E2E45 border.
- Bars: #D6A6E8 (pale orchid) with a 1px #8E5AA6 edge; bars past the reference value in #B07CC6.
- Reference line and its flag: #F2C46D (amber).
- Text: #F3E9F6. Secondary text: #A493AB. Gridlines: #34263A.

Typography (Google Fonts):
- Ysabeau for everything, with lining tabular figures (font-variant-numeric: lining-nums tabular-nums; its default figures are oldstyle). Eyebrow 700 12px uppercase with 2.4px letter-spacing in #D6A6E8. Title 600 31px stating the finding. Subtitle 16px #A493AB with measure and bin width.
- Tick labels 13px #A493AB; axis titles 600 13px; flag label 700 12px amber with 1.6px letter-spacing plus a 500 13px detail line; italic 13.5px note in #B07CC6.
- Card: uppercase label 700 11px with 2px letter-spacing, the headline figure 700 42px orchid with its unit as an 8px-offset 500 16px suffix, then rows of 14px label (#A493AB) and 600 14px value (right-aligned).

Layout:
- 56px margins. Eyebrow, title, subtitle, then the plot from x 88 to x 904.
- A 264 x 158 summary card with 6px radius in the empty upper-right of the plot, with a 1px divider under the headline figure.
- "Source: ..." at the bottom left in 12.5px.

Axes and grid:
- Horizontal 1px #34263A gridlines at round steps with labels right-aligned left of the plot; the y title above the top label; a 1px #A493AB baseline; x labels with units ("20 kb") 22px below.

Marks:
- Bar chart: a histogram with touching bins (1.5px gaps only), square corners, #D6A6E8 fill with a 1px #8E5AA6 stroke; bins at or beyond the reference value in #B07CC6. The reference (here N50) is a 1.6px amber vertical line dashed 5 on 4 off, with a 118 x 42 flag (page fill, 1px amber border, 4px radius) to its right at the top, and an italic note under the flag.
- Line chart: a 2.5px #D6A6E8 line with a soft area fill of #D6A6E8 at 18% opacity to the baseline, the area past the reference value in #B07CC6 at 30%, the same dashed amber reference line and flag, and the summary card.

Avoid: gradients, glow, rounded bars, more than one accent color, and oldstyle figures.

When you're done, render the chart and check that the reference value and every figure on the card are computed from the data, the tallest bar fits under the top gridline, and the card covers no bars.