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

Cost Curve bar chart, dark theme: Indigo deck builder with violet bars, a dotted target curve and hexagon cost gems.

Cost Curve

DarkBar

Indigo deck builder with violet bars, a dotted target curve and hexagon cost gems.

  • Deep Indigo#1A1638
  • Cool Violet#8E7CFF
  • Deep Violet#6A58E8
  • Pale Violet#C4B9FF
  • Target White#FFFFFF

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 "Cost Curve" 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: the deck builder screen of a digital card game. Deep indigo, a soft violet glow, one cool violet for your data, a dotted white outline for the target, hexagonal gems on the axis and a summary badge in the corner.

Colors (use these exact values):
- Page: #1A1638, with a radial glow of #3B2F8F at 55% opacity centered at 80% x, 10% y, fading to transparent at 70% radius.
- Panel: a rounded card 32px in from the edges, 16px radius, #221D48 at 55% opacity with a 1px #3A3374 border.
- Data: a vertical gradient from #8E7CFF at the top to #6A58E8 at the bottom.
- Target or reference: #FFFFFF, dotted.
- Highlights (values over target, the badge's secondary figure): #C4B9FF. Primary text: #F2F0FF. Secondary text: #9C97C8. Gridlines: #302A5E; baseline #4A4390.

Typography (Google Fonts):
- Exo 2 throughout. Kicker 12px 600 uppercase, 2.4px letter-spacing, #8E7CFF; title 30px 700 #F2F0FF, -0.3px letter-spacing, stating the finding; subtitle 15px 400 #9C97C8.
- Value labels 16px 700 (#C4B9FF when over target, with a "+1" delta 11.5px 700 #8E7CFF above); y labels 12.5px 500; gem labels 14px 700; badge label 11px 600 with 1.8px letter-spacing; badge figure 30px 800; legend 13px 600.

Layout:
- Kicker at y 76, title at y 114, subtitle at y 142, 64px left margin. Legend at y 186: a 14px violet rounded square "This deck" and a 14px dotted white square "Recommended ...".
- Summary badge at the top right: 154 x 70 px, 14px radius, #1A1638 fill, 1.5px #8E7CFF border, with the label on top, the big figure bottom left and the target in #C4B9FF bottom right.
- Plot from x 112 to 880, baseline at y 470; source bottom left.

Axes and grid:
- Horizontal gridlines 1px #302A5E, labels 12.5px #9C97C8 right-aligned. No vertical grid or axis line.
- Category labels inside hexagonal gems 30px below the baseline: pointy-top hexagons of 17px radius, #1A1638 fill, 1.5px #8E7CFF stroke, label centered.

Marks:
- Bar chart: 60px bars with 6px rounded top corners in the violet gradient. The target drawn over them as a stepped outline per band (inset 8px from the band edges, rising from the baseline to the target value, across, and back down) in 1.8px #FFFFFF dotted 1.5 on 4 with round caps. Each value label sits 10px above the higher of the bar and its target.
- Line chart: a 3px #8E7CFF smooth line with a violet area gradient beneath (#8E7CFF at 35% to 0%), 5px dots ringed 2px in #1A1638, and the target as a 1.8px dotted white line with no markers. Values over target labeled in #C4B9FF.

Avoid: neon glows on the marks, multiple hues, 3D, thick borders, cluttered HUD decorations, and square-cornered badges.

When you're done, render the chart and check that the dotted target outline stays visible over every bar, the badge's average is computed from the data, value labels clear both bar and outline, and each gem label is centered.