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

Return Reasons bar chart, dark theme: Slate page with cream reason bars, a terracotta top reason and quoted comments.

Return Reasons

DarkBar

Slate page with cream reason bars, a terracotta top reason and quoted comments.

  • Slate blue#162029
  • Soft cream#E8DCC4
  • Muted terracotta#C9765B
  • Slate gray text#8C9AA6

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 "Return Reasons" 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 customer-insight page from an online furniture store. Deep slate blue, soft cream bars, one warm terracotta highlight and a human voice in small italic quotes under each label.

Colors (use these exact values):
- Background: #162029 (deep slate blue).
- Bars: #E8DCC4 (soft cream) at 90% opacity. The top category in #C9765B (muted terracotta) at full opacity, with its label and value in terracotta too.
- Primary text: #F1EADC. Secondary text and quotes: #8C9AA6. Guides: #2B3A47. Header rule and value axis: #E8DCC4 at 35% and 60% opacity.

Typography (Google Fonts):
- DM Serif Text 400 for the title (34px, #F1EADC, stating the finding).
- Mulish for everything else: eyebrow 12px 700 uppercase with 2.6px letter-spacing in terracotta; subtitle 15px #8C9AA6 including the sample size; category labels 15px 600 (800 for the highlighted one); quotes 12.5px italic #8C9AA6 in curly quotation marks; tip values 15px 800 (17px for the highlight); axis labels and footer 12px.

Layout:
- 52px margins. Eyebrow at y 56, title at y 100, subtitle at y 128, then a thin 1px rule across the page at y 150 separating the header block.
- A label column from x 52 to about 360: each row holds the category label with a short representative comment 18px below it. Rows are 46px apart from y 172.
- Bars start at x 380 and scale to x 860. Footer at y 578: source note on the left and "Shares sum to 100%" on the right.

Axes and grid:
- A 1px vertical value axis at the bar start in cream at 60%. Faint 1px #2B3A47 vertical guides at round values, with percent labels 12px under the last row. No horizontal gridlines.

Marks:
- Bar chart: 18px tall horizontal bars with 3px rounding on the right end only, sorted from largest to smallest, the percentage in bold at each tip 10px past the end.
- Line chart: cream 2px lines with the highlighted series in 3px terracotta, a 4px dot at each end with the value beside it, and a one-line italic comment under each series name in the label column.

Avoid: more than one highlight color, gradients, shadows, boxed legends, and long quotes that wrap or collide with the bars.

When you're done, render the chart and check that only the top category is terracotta, the shares add up as stated, each quote fits on one line inside the label column, and the percentage labels never touch the gridlines' labels or the canvas edge.