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

Autoscaling line chart, light theme: A teal step line of instances with tooltips over a CPU lane and target band.

Autoscaling

LightLine

A teal step line of instances with tooltips over a CPU lane and target band.

  • Console gray#F5F6F8
  • Dark teal#0F6E6E
  • CPU orange#E8772E
  • Target band#DCEFEA
  • Tooltip slate#1F2A36

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 "Autoscaling" 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 monitoring tab of a cloud autoscaling group. Pale gray console, one white card, a confident dark teal step line and small dark tooltips that explain what the scaler did and why.

Colors (use these exact values):
- Canvas: #F5F6F8. Card: #FFFFFF with a 1px #DFE3E8 border and 10px radius.
- Primary series (capacity, instance count, or the main measure): #0F6E6E (dark teal), with an 8% opacity fill of the same color under it.
- Driving metric (utilization or the second measure): #E8772E (orange), in its own lane.
- Target band: #DCEFEA. Tooltips: #1F2A36 with white text and #B7C2CC secondary text.
- Ink #1A2230, secondary text #5F6977, axis labels #8C95A1, gridlines #ECEEF1, baselines #CDD3DA.

Typography (Google Fonts):
- Manrope everywhere, tabular figures.
- Eyebrow: resource name 13px 700 teal with 0.4px letter-spacing, followed by its settings in 13px 500 #8C95A1 separated by middle dots.
- Title 24px 800, -0.4px letter-spacing, #1A2230, stating the range or the finding. Subtitle 14px 500 #5F6977.
- Lane labels 11px 800 uppercase with 1.4px letter-spacing, in the lane's series color, followed by a unit note in 12px 500 #8C95A1.
- Tooltip title 12px 700 white, detail 11px 500 #B7C2CC. Axis labels 12px 500. Footer 12px 500.

Layout:
- 48px side margins for the header. The card runs from 134px down to 44px above the bottom, 32px from each side.
- Inside the card two stacked lanes share one time axis: the primary lane (about 176px tall) on top and a shorter lane (about 86px) for the second measure below, separated by 30px with its own lane label. Never put two measures on one plot with left and right scales.
- Summary chips at the top right of the card: pill-shaped (24px tall, 12px radius, #F5F6F8 fill, 1px #DFE3E8 border), label 11.5px 600 #5F6977 on the left and value 12.5px 800 #1A2230 on the right.
- Footer outside the card: "Source: ..." on the left, a one-line note on the right.

Axes and grid:
- Horizontal gridlines only, 1px #ECEEF1, 1px #CDD3DA baselines. Y labels right-aligned 12px left of each lane; the lower lane shows only 0, 50 and 100% (or its own three round values).
- Time labels (24-hour clock every 3 hours) only under the bottom lane; the first left-aligned, the last right-aligned.

Marks:
- Line chart: the primary series as a stepped line (horizontal then vertical, never diagonal), 2.5px teal with a soft 8% teal fill to the baseline. Each change in the step gets a hollow marker (r 4, white fill, 2px teal stroke). The second measure is a thin 1.5px orange line with straight segments, over a full-width #DCEFEA band showing its target range, labeled with how much of the time it held in the band.
- Bar chart: slim teal bars (about 60% of the band, 2px top radius) for the primary measure in the top lane, and the second measure as orange 1.5px line or small orange bars in the lower lane with the same target band.
- Link the lanes: a 5px teal tick below the lower lane's baseline at the time of every step change.

Labels and annotation:
- Tooltip callouts on two or three key events only (the first change, the largest change, one notable later change): a #1F2A36 rect 138 x 38px with 6px radius sitting just above the marker with a 6px triangular pointer down to it; first line "Scale out 14 to 17" in 12px 700 white, second line the time and the driving value ("12:10 · CPU 70%") in 11px #B7C2CC. Place each so it never covers another marker.

Avoid: dual y axes, smoothing the step line, drop shadows, more than three tooltips, saturated backgrounds, and legends that repeat the lane labels.

When you're done, render the chart and check that no tooltip hides a marker or collides with another, every step change has a tick in the lower lane, the summary chips do not overlap, and the numbers in the title match the data's minimum and maximum.