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

Payroll Run line chart, light theme: Payroll register with pay-date calendar chips and a filled gross-to-net gap.

Payroll Run

LightLine

Payroll register with pay-date calendar chips and a filled gross-to-net gap.

  • Indigo#4F46E5
  • Sky#0EA5E9
  • Deduction band#E0E7FF
  • Deep indigo#3730A3
  • Ink#111827

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 "Payroll Run" 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 clean payroll register from a modern HR platform. Crisp white page, one confident indigo, calendar chips that make every pay date feel concrete, and a softly filled gap that shows where the money goes between gross and net.

Colors (use these exact values):
- Page: #FFFFFF. Primary ink #111827, secondary text #6B7280, gridlines and rules #E5E7EB.
- Primary series (gross, or the most important series): #4F46E5 (indigo). Darker indigo #3730A3 for annotation text and the header band of highlighted chips.
- Secondary series (net, or the comparison series): #0EA5E9 (sky); use the darker #0284C7 for its text label so it stays readable on white.
- Gap fill between the two series: #E0E7FF at 85% opacity.
- Pay-date ribbon background: #F5F6FF; chip borders #C7D2FE.

Typography (Google Fonts):
- Figtree: title 700 29px #111827 with -0.4px letter-spacing, stating the finding; subtitle 400 15px #6B7280 with measure and unit; series labels 700 14px in the series color; the gap label 600 14px #3730A3.
- Roboto Mono for every number and small label: eyebrow 500 11px uppercase with 1.4px letter-spacing in #6B7280 after an 8px indigo rounded square; axis labels 400 11px #6B7280; chip day numbers 600 12px; chip month headers 700 6.5px white; annotations 600 11px #3730A3; footer 11px.

Layout:
- 56px side margins. Eyebrow at y 42, title at y 80, subtitle at y 106.
- A pay-date ribbon directly under the subtitle: an 848 x 58 px rounded (8px) #F5F6FF band with a stacked "PAY / DATES" label (Roboto Mono 700 9px, #3730A3) at its left, then one calendar chip per period, each centered exactly over its data point's x position.
- Calendar chip: 24 x 34 px, 3.5px radius, white with a 1px #C7D2FE border, an 11px #4F46E5 header band holding the month abbreviation, and the day number below. Highlighted periods (bonus runs, special events) get a solid #4F46E5 chip with a #3730A3 header and white day number.
- Plot from about x 104 to 836, y 214 to 492; direct series labels in the right margin; a 1px #E5E7EB footer rule at y 542 with "Source: ..." on the left and a year-to-date summary in Roboto Mono 500 11px #111827 on the right.

Axes and grid:
- Horizontal 1px #E5E7EB gridlines at every tick, extending 12px beyond the plot on both sides; y labels right-aligned 20px left of the plot with thousands separators. No y-axis line.
- A 1px #111827 baseline with 5px tick marks at every period; label every fifth period ("R1", "R6"...) and add a small "RUN" unit label at the right end.

Marks:
- Line chart: the primary series a 4px #4F46E5 line with round joins and caps, straight segments. The secondary series a 2px #0EA5E9 line with 2.2px white dots ringed 1.4px in sky at every point. Fill the area between the two lines with #E0E7FF and write the gap's meaning ("Taxes and deductions") centered inside it with a mono value line beneath.
- Bar chart: slim 24px indigo #4F46E5 columns with a 3px top radius for the primary measure; the secondary measure as a narrower 10px #0EA5E9 column overlaid in the same slot, or as a sky tick at its value. Keep the pay-date chips above the plot aligned to each column, and the gap label on the difference.
- Special periods: a 20px #4F46E5 circular badge with a white five-point star, floating 24px above the point and joined to it by a 1px indigo stem; the point itself becomes a 4.5px indigo dot with a 2px white ring. Label the badge in Roboto Mono 600 11px #3730A3 ("Bonus run 2,248").

Avoid: gradients, drop shadows, more than two series colors, legends in boxes (label series directly), and chips that do not line up with their data points.

When you're done, render the chart and check that every calendar chip sits exactly above its point, the gap fill runs cleanly between the two lines, the star badges do not collide with the ribbon, and any percentage in the title matches the data.