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

Cobalt Magenta line chart, light theme: Cobalt and magenta index lines on butter yellow, anchored by a bold line at 100.

Cobalt Magenta

LightLine

Cobalt and magenta index lines on butter yellow, anchored by a bold line at 100.

  • Butter#FFF4C7
  • Cobalt#1F3FD8
  • Magenta#E0187A
  • Black#111111

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 "Cobalt Magenta" 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 bright, graphic economics feature. Butter-yellow paper, two punchy ink colors, a serif headline with a thick underline and a heavy black reference line everything is measured against.

Colors (use these exact values):
- Page: #FFF4C7 (pale butter yellow).
- Cobalt: #1F3FD8 for the leading series, its end marker and flag, its growth note, and the thick headline underline.
- Magenta: #E0187A for the second series, its marker, flag and note.
- Black: #111111 for the headline, the reference line at 100, the baseline and its ticks. Secondary text: #5E5540. Faint gridlines: #E9DBA4. Flag text: #FFFFFF.

Typography (Google Fonts):
- DM Serif Display 400 for the headline: 40px, black, sentence case, stating the finding.
- DM Sans for everything else: subtitle 400 18px #5E5540 (measure, base period = 100, frequency); axis labels 400 15px #5E5540, with the "100" label 700 black; series labels 700 17px in the series color; flag values 700 19px white; growth notes 700 14px in the series color; source 400 13px.

Layout:
- 56px left margin. Headline baseline y 80. A 7px cobalt bar 210px long directly under the headline (top at y 94), then the subtitle at y 134.
- Plot from x 88 to 872, y 196 (top) to 520 (baseline). The last data point sits at x 800 so the value flags fit to the right.
- Source bottom left at y 580.

Axes and grid:
- Horizontal gridlines 1px #E9DBA4 every 20 index points; y labels right-aligned at x 76.
- The reference line at 100 is a 3px solid black line across the full plot width.
- A 1px black baseline at the bottom of the plot with 6px ticks down at each year; year labels centered below.

Marks:
- Line chart: index lines rebased to 100 at the first period, straight segments, 3.5px strokes with round joins and caps. A filled circle r 7 on the last point. A value flag to the right: a pennant shape in the series color starting 12px right of the dot, a notched point toward the dot, 28px tall, 60px wide, with the value centered in white. The percentage change since the base ("+68%") sits above the top flag and below the bottom flag. Series names are direct labels near the middle of each line (above the upper line, below the lower one).
- Bar chart: vertical bars in cobalt (second series magenta, grouped side by side with a 4px gap), square corners, bars start from the 100 reference line upward or downward when showing an index, so the black line is the visual anchor; value flags on the final pair only.

Avoid: gradients, shadows, area fills, legends in boxes, smoothing the lines, and more than two data colors.

When you're done, render the chart and check that both series start exactly at 100, the black reference line is the heaviest line on the chart, the flags don't overlap each other or the plot edge, and the headline's comparison matches the data.