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

CSAT by Channel bar chart, light theme: Diverging Likert bars beside a white rail of outline channel icons.

CSAT by Channel

LightBar

Diverging Likert bars beside a white rail of outline channel icons.

  • Deep Red#B91C1C
  • Rose#EC8A8A
  • Neutral Gray#D1D5DB
  • Mint#66BB86
  • Deep Green#15803D
  • Cloud#F7F8FC

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 "CSAT by Channel" 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 help-center insights panel in a modern support product. Airy pale page, a white rail of channel icons, and a crisp diverging Likert display where unhappy spreads left in red and happy spreads right in green.

Colors (use these exact values):
- Page: #F7F8FC pale cloud. Rail card: #FFFFFF with a 1px #E6E8F0 border and radius 16; icon tiles #EEF0FB.
- Five ordered levels: #B91C1C very dissatisfied, #EC8A8A dissatisfied, #D1D5DB neutral, #66BB86 satisfied, #15803D very satisfied.
- Segment label ink: white on #B91C1C and #15803D; #5B1010 on #EC8A8A; #374151 on #D1D5DB; #0B3B1E on #66BB86.
- Ink #1E2233, secondary text #6B7085, eyebrow #4F5BD5, gridlines #E6E8F0.

Typography (Google Fonts):
- Outfit for the title (600, 27px, #1E2233, stating the finding), channel names in the rail (500, 16px) and the percent satisfied figures (700, 21px, #15803D).
- Figtree for the eyebrow (600, 11.5px uppercase, 1.6px letter-spacing, #4F5BD5), subtitle (15px #6B7085), legend (500 13px), rail sublabels ("3,120 ratings", 12px), segment values (600 12.5px), axis ticks (12px), the "SATISFIED" column header (700 11px, 1.2px letter-spacing) and notes (12px).

Layout:
- 40px margins. Eyebrow, title, subtitle, then a one-line legend of five 14px rounded squares (radius 3) in level order.
- Left rail: a 200px white card with one row per category: a 36px rounded icon tile (radius 10) holding a simple 22px outline icon (1.8px strokes, round joins: envelope, chat bubble with three dots, phone handset, smartphone, document), then the name and a small count line. 1px #E6E8F0 dividers between rows.
- Bars to the right of the rail, one per rail row, 30px tall, rows 62px apart. Percent satisfied right-aligned at the far right under a small "SATISFIED" header.

Axes and grid:
- Diverging scale with zero at the middle of the neutral segment: bars are offset left by very dissatisfied + dissatisfied + half of neutral.
- Vertical 1px #E6E8F0 gridlines every 20 points labeled with absolute percents, and a 1.4px #1E2233 zero line drawn behind the bars. Under the axis, "Dissatisfied" in #B91C1C and "Satisfied" in #15803D (600 12px) on each side.

Marks:
- Bar chart: segments with radius 4 and a 2px gap between them (1px inset each side), values printed inside segments of 7 points or more. Sort categories by percent satisfied, best at the top.
- Line chart: plot the net or percent satisfied per category over time as 2.5px lines, green #15803D for the leader and #B91C1C for the laggard, the others in #D1D5DB, with the same icon rail labeling each line at its end and 4px dots at each point.

Avoid: a legend in a box, 3D, gradients, rainbow palettes, uncentered stacks, labels in tiny segments, and more than five levels.

When you're done, render the chart and check that each row sums to 100, the zero line runs through the middle of every neutral segment, the printed percent satisfied equals satisfied plus very satisfied, and the icons line up with their bars.