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

Score Journey line chart, light theme: Credit app card with pastel score-tier bands, numbered events and a big score pill.

Score Journey

LightLine

Credit app card with pastel score-tier bands, numbered events and a big score pill.

  • Score indigo#312E81
  • Poor rose#FBE3E6
  • Fair peach#FDEBD8
  • Good green#E6F4E1
  • Excellent mint#D5F2EA
  • Tier green ink#1F7A63

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 "Score Journey" 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 friendly consumer credit app explaining your score. Soft, reassuring and clear: a white card, pastel tier bands, one deep indigo line and plain-language event notes.

Colors (use these exact values):
- Page: #EEF0F4 (pale gray). Card: #FFFFFF with 18px corner radius and a soft shadow (0 6px 10px blur, #1E1B3A at 8% opacity).
- Data line and event markers: #312E81 (deep indigo).
- Tier bands behind the plot: Poor #FBE3E6 (rose), Fair #FDEBD8 (peach), Good #E6F4E1 (pale green), Excellent #D5F2EA (mint). Tier label inks: Poor #B4424F, Fair #AD5F22, Good #3F7D3A, Excellent #1F7A63.
- Text: #1E1B3A for the title and list items, #6B6F85 for secondary text. Divider hairline #E3E5EC.
- Positive deltas #1F7A63, negative deltas #B4424F.

Typography (Google Fonts):
- Lexend for everything. Title 600, 27px, -0.4px letter-spacing, stating the finding in second person ("Your score climbed 136 points in two years"). Subtitle 300, 15px, #6B6F85 with measure, period and scale.
- Small uppercase section labels ("CURRENT SCORE", "WHAT MOVED IT") 500, 11px, 1.6px letter-spacing, #6B6F85. Tier names in the bands 600, 11px uppercase, 1.4px letter-spacing, in the tier ink.
- Axis labels 400, 12px, #6B6F85. List items 500, 13px; their dates 300, 11px.

Layout:
- Card inset 24px from the page edges. Title and subtitle top left at 56px.
- Plot on the left (about 530px wide, from y 148 to 492), a 1px #E3E5EC vertical divider, then a side panel about 236px wide on the right.
- Side panel: "CURRENT SCORE", then a fully rounded pill (236 x 84, radius 42) filled with the current tier's band color and a 1.5px slightly darker stroke (#A9E2CF for Excellent), holding the score in Lexend 700 50px in the tier ink and the tier name (600 17px) with its range (400 12px) beside it. Below: a small up triangle in the tier ink and "136 points since Oct 2024" in 500 13px. Then "WHAT MOVED IT" and a numbered list of events: indigo numbered circle, event name, month underneath, and the one-month delta right aligned (+34 green, -27 rose).
- Source line in 300 11px #6B6F85 at the bottom left of the card.

Axes and grid:
- No gridlines: the tier bands are the grid. The plot area is a rounded rectangle (10px radius) filled by the bands, separated by 2px white lines at each tier boundary.
- Y labels only at the tier boundaries (580, 670, 740) and the top, right aligned 12px left of the plot. Tier names sit inside each band at the top right.
- X axis: small 5px ticks under the plot at every six months plus the last month, labels like "Oct 2024" 26px below the plot.

Marks:
- Line chart: a 3.2px indigo line, monotone smoothed, round caps and joins, no area fill. Events are 9.5px-radius indigo circles with a 2px white ring and a white 600 11px number, centered on the data point. The latest point is a 9px white circle with a 3.2px indigo stroke, its value in indigo 600 14px 18px above.
- Bar chart: slim indigo columns (about 40% of the band, 4px top corners) over the same tier bands, event numbers as the same circles sitting on top of the relevant bars, the latest bar labeled in indigo.

Avoid: gridlines, legends in boxes, harsh reds, more than one line color, drop shadows on marks, jargon in the event list.

When you're done, render the chart and check that the tier bands match the real tier boundaries, every numbered marker appears in the side list with the right month and delta, the pill color matches the current score's tier, and the title's point change equals last minus first.