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

Rating Migration bar chart, dark theme: Navy 100% stacked grade bars ramping teal to red, with the default slice outlined.

Rating Migration

DarkBar

Navy 100% stacked grade bars ramping teal to red, with the default slice outlined.

  • Committee navy#0F1629
  • Upgrade teal#2BB3A3
  • Stable slate#4E5A74
  • Downgrade orange#E26A2C
  • Default crimson#B3123E

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 "Rating Migration" 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 credit committee pack on deep navy. Composed and quantitative: a diverging ramp from good news (teal) through neutral slate to bad news (orange, crimson), with the worst outcome outlined so it can't be missed.

Colors (use these exact values):
- Background: #0F1629 (dark navy).
- Outcome ramp, best to worst: #2BB3A3 (upgrade teal), #4E5A74 (stable slate), #F2B266 (down one notch, light orange), #E26A2C (down two or more, orange), #B3123E (default crimson). The default segment carries a 1.5px #FFFFFF outline.
- Eyebrow #2BB3A3. Title #F5F7FB, text #E6EAF2, dim text #8792AB, hairline #243052. Default figures of 4% or more in #FF6B7F.

Typography (Google Fonts):
- Tenor Sans 400 for the title (32px, stating the finding) and the row labels (grades, 18px).
- Mulish for everything else: eyebrow 700 11px uppercase, 2.2px letter-spacing, teal; subtitle 400 15px dim; legend 600 13px; column headers 700 10px uppercase, 1.6px letter-spacing, dim; stable share inside bars 700 14px white; upgrade shares 700 11px navy on teal; default column 800 14px; counts 400 13px dim; source 400 12px.

Layout:
- 48px margins. Eyebrow, title, subtitle, then a one-line legend of 14px rounded-2px swatches (the default swatch outlined in white).
- Rows start at y 200, 40px apart, 28px tall bars from x 118 to 780. Row labels centered in a 60px column to the left under a "FROM" header.
- Two figure columns to the right of the bars: "DEFAULT" (the default share, centered) and "LOANS" (count, right aligned at 912).

Axes and grid:
- No gridlines. A 1px #243052 axis line under the last row with 6px ticks and labels at 0, 25, 50, 75 and 100%.

Marks:
- Bar chart: 100% stacked horizontal bars, square corners, segments in ramp order left to right, 1px navy separators between segments. The stable share is printed centered inside the slate segment; upgrade shares as whole numbers when the teal segment is wide enough; the default segment is outlined in white.
- Line chart: one 2.5px line per outcome in the same ramp colors across the categories, the default line thicker (3px) with 5px white-ringed dots, stable line labeled with its values, and direct end labels instead of a legend where space allows.

Avoid: 3D, gradients, rounded bars, a rainbow palette, legends that repeat the colors in a different order from the bars, labels inside slivers too thin to hold them.

When you're done, render the chart and check that every bar sums to exactly 100%, segment order matches the legend, the default segment is outlined on every bar that has one, and the title's numbers match the stable shares.