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

Irradiance Day line chart, light theme: Sky gradient, a gold irradiance curve and a navy output line with hatched clipping.

Irradiance Day

LightLine

Sky gradient, a gold irradiance curve and a navy output line with hatched clipping.

  • Sky blue#D5E7F7
  • Sun gold#E3A416
  • Output navy#1B2A4A
  • Slate text#566781

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 "Irradiance Day" 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 engineering brief from a solar farm operator on a cloudless day. Bright, airy and exact: a white-to-sky page, one warm golden curve, one decisive navy line and a hatched patch that tells the story.

Colors (use these exact values):
- Page: a vertical linear gradient from #FFFFFF at the top to #D5E7F7 (soft sky blue) at the bottom, covering the whole canvas.
- Primary data (the constrained or headline measure) and all dark ink: #1B2A4A (deep navy).
- Secondary data (the driver or reference measure): #E3A416 (sun gold), with an area fill under it using a vertical gradient of the same gold from 30% opacity at the top to 2% at the bottom.
- Secondary text: #566781. Gridlines: #B8CDE3.

Typography (Google Fonts):
- Rozha One 400 for the title only: 31px, navy, sentence case, stating the finding with a computed number ("Ember Flats hit its inverter ceiling for 4 h 35 min").
- Mukta for everything else: subtitle 15px #566781 naming measure, unit and date; legend 14px 600 navy; axis labels 13px #566781; annotation headline 15px 700 navy with a 13px #566781 second line; event times 13px 600 navy; source 12px #566781.

Layout:
- 56px left margin. A 48 x 40 px sun-path icon at the top left: a 1.6px navy horizon line, a dashed (2.5 on, 3 off) gold half-ellipse arc rising from it, and a gold sun (r 6.5) at the arc's top with eight short 1.6px round-capped rays. The title starts 64px to the right of the icon's left edge, baseline about y 90; subtitle 28px below.
- A legend row about 40px under the subtitle, aligned with the title: 26px line swatches (3px, round caps) and a 22 x 14 hatched swatch with a thin navy border.
- Plot from about x 88 to x 900 and y 208 to y 500, with a footer source line at y 572.

Axes and grid:
- Y axis as percentages (0 to 100%) with dotted gridlines (0.8px #B8CDE3, 2 on 4 off) every 25; labels right-aligned 10px left of the plot. No vertical axis line.
- A 1.2px navy baseline with 5px navy tick marks at each labeled hour and labels ("6:00") centered 24px below.

Marks:
- Line chart: both series as 3px lines with round joins, the gold one drawn first over its gradient area fill, the navy one on top. Where the navy series is capped by a limit (inverter ceiling, quota, capacity), draw the limit as a full-width 1px navy dashed line (6 on, 4 off) at 55% opacity with a right-aligned 13px 600 navy label 8px above it, draw the uncapped potential as a 1.2px navy dashed curve (3 on, 3 off), and fill the area between the potential and the limit with fine diagonal hatching: 45-degree 1.1px navy lines every 5px over a 55% white wash. Mark where the cap starts and ends with a 3.5px navy dot ringed in white, a dotted (1 on, 3 off) 0.8px navy drop line to the axis, and the time in 13px 600 navy just above the baseline.
- Bar chart: navy bars about 55% of the band with square corners on the gradient page; the reference or driver value as a gold 3px horizontal tick across each bar; any portion of a bar above a limit drawn as a hatched segment (same hatch) instead of solid navy, with the limit as the same dashed navy line.

Labels and annotation:
- One callout for the hatched area: a 2.5px navy dot inside the hatch, a 1px navy leader to a two-line note placed in open sky ("6.6% of potential energy clipped" then a one-line explanation). Compute the share from the data.

Avoid: a second y axis (convert different units to a shared percent-of-rated scale instead), drop shadows, rounded bars, more than two data colors, dark backgrounds, and heavy gridlines.

When you're done, render the chart and check that the gradient runs white at the top to sky blue at the bottom, the hatch reads as fine diagonal lines at thumbnail size, the plateau times and clipped share are computed from the data, and the callout text sits in clear sky without touching either curve.