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

Ad Inventory bar chart, dark theme: Dark slate sales board with cyan stacked slots, dotted unsold tops and a target line.

Ad Inventory

DarkBar

Dark slate sales board with cyan stacked slots, dotted unsold tops and a target line.

  • Slate#161A20
  • Sold cyan#22D3EE
  • House gray#56606D
  • Unsold outline#8A94A3
  • Text#EEF2F6

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 "Ad Inventory" 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: an ad sales operations dashboard on a dark slate screen. Businesslike and scannable: one bright cyan for the money, neutral grays for everything else, and a clear target.

Colors (use these exact values):
- Background: #161A20. KPI chip: #1C2129 with a #2A313B border.
- Primary measure: #22D3EE (bright cyan). Secondary share: #56606D (gray). Empty capacity: dotted #8A94A3 outline with a 6% fill of the same color.
- Text: #EEF2F6 primary, #8B95A5 secondary, #626C7B footer. Gridlines: #252B34 (baseline #3A424E).

Typography (Google Fonts):
- Outfit throughout. Title 29px 600 #EEF2F6, -0.4px letter-spacing, stating the finding. Subtitle 15px 400 #8B95A5. Eyebrow 12px 600 uppercase with 2.2px letter-spacing after an 8px cyan rounded square. Legend 13px 500. Axis labels 12px. Percent labels above bars 15px 600. KPI label 10px 600 uppercase with 1.6px letter-spacing and value 24px 600 cyan.

Layout:
- 56px margins. Eyebrow at y 46, title at y 90, subtitle at y 116, a KPI chip top right (162 x 58, 10px radius) and a one-line legend at y 152.
- Plot from x 92 to 904, baseline 492, top 210. Footer at y 568: source left and a formula note right.

Axes and grid:
- 1px horizontal gridlines with labels right-aligned 12px left of the plot and a small unit caption above the top label. No vertical gridlines. Category labels 24px below the baseline.

Marks:
- Bar chart: stacked bars 40px wide. Bottom segment cyan (3px radius), then a gray segment with a 2px gap, then the remaining capacity as a dotted outline (1.4px, dash 1.5 gap 2.5, 3px radius). Periods that miss the target keep the same cyan at 62% opacity. A computed percentage sits 12px above each bar: cyan when at or above target, #8B95A5 when below. The target is a 1.5px #EEF2F6 dashed line (6 on, 4 off) across the whole plot.
- Line chart: a 2.5px cyan line with 4px cyan dots, a 1.5px gray line for the secondary series, a faint dotted band for capacity, the same dashed target line and the same colored percentage labels above each point.

Avoid: more than one bright color, gradients, glows, 3D, rounded pill bars, and a second y axis for percentages (write them as labels instead).

When you're done, render the chart and check that every stack reaches its full capacity, the target line sits at the right value, the count of periods above target in the title is correct, and the KPI matches the data.