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

Corridor Costs bar chart, light theme: Peach explainer with teal and coral stacked bars, drawn arrows and a 3% target.

Corridor Costs

LightBar

Peach explainer with teal and coral stacked bars, drawn arrows and a 3% target.

  • Peach#FCEBDD
  • Deep teal#0E5E63
  • Coral#EE6A4E
  • Ink#2B1D17

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 "Corridor Costs" 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 warm consumer-advocacy explainer about what money transfers really cost. Friendly peach page, two confident colors, plain-spoken labels and one target everyone can see.

Colors (use these exact values):
- Background: #FCEBDD (peach).
- First component (transfer fee): #0E5E63 (deep teal). Second component (exchange-rate markup): #EE6A4E (coral).
- Ink: #2B1D17. Secondary text and arrows: #7A5F52. Gridlines: #EDCDB6. In-bar values: #FFFFFF.

Typography (Google Fonts):
- Rubik for all text, tabular figures on numbers.
- Eyebrow 12px 600 uppercase, 2.4px letter-spacing, coral. Title 30px 700, -0.3px letter-spacing, ink, stating the finding. Subtitle 15px #7A5F52.
- Legend 13.5px 500; category labels 15px 500 ink; in-bar values 12px 500 white; totals 16px 700 ink; percent of amount 12.5px 500 (teal when under target, coral when over); axis 12.5px; source 12px.

Layout:
- 56px margins. Eyebrow, title, subtitle, then a legend row of 14px rounded (3px) swatches.
- Category labels as a two-part column: origin right aligned, a small drawn arrow (1.6px #7A5F52 stroke, 14px shaft, open chevron head), destination left aligned, so every arrow lines up vertically. Draw the arrow as a path, not a font glyph.
- Bars start at x 290 and use about 510px for the full range; leave room at the right for totals.

Axes and grid:
- Vertical 1px #EDCDB6 gridlines, value labels under the plot, unit word ("units") under the last label. No axis lines.
- Target: a 1.6px ink line dashed 5 on 4 through all rows, drawn over the bars but under the end labels, topped by a 22px ink pill with peach text ("3% target = 6.00").

Marks:
- Bar chart: horizontal stacked bars 26px tall on a 41px pitch, sorted by total (cheapest first). Teal segment first, coral second, a 1.5px peach separator between them, only the outer end rounded (5px). Segment values in white inside when the segment is wider than 40px. Bold total 10px past the bar end and the percent of the amount sent after it, both with a 5px peach halo (paint-order stroke) so the target line never cuts them.
- Line chart: two 3px lines (teal and coral) for the two components or a 3px teal total line with coral dots, round joins, 5px dots with a 2px peach ring, the same dashed target line as a horizontal reference with its pill, and bold end labels.

Avoid: dark backgrounds, gradients, shadows, arrow glyphs from fonts, more than two data colors, truncated axes (bars start at zero).

When you're done, render the chart and check that the rows are sorted by total, the totals equal the segment sums, the target line position matches its value, and no label collides with the target line or the next label.