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

Usage Meter bar chart, light theme: Soft cards, stacked tier bars, a dashed quota line and hatched red overages.

Usage Meter

LightBar

Soft cards, stacked tier bars, a dashed quota line and hatched red overages.

  • Indigo#4F46E5
  • Sky#38BDF8
  • Mint#22C28E
  • Over quota#EF4444
  • Ink#0F172A

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 "Usage Meter" 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 usage and billing page of a developer platform. Airy near-white page, soft-shadowed rounded cards, friendly geometric type, and a quota line that makes overages impossible to miss without shouting.

Colors (use these exact values):
- Page: #F7F8FC. Cards: #FFFFFF with a 1px #E8EBF2 border.
- Ink: #0F172A. Secondary text: #64748B. Axis labels and source: #94A3B8. Gridlines: #EEF0F6; baseline #DDE1EA. Tracks and the segmented control well: #EEF0F7.
- Series, bottom to top of the stack: #4F46E5 (indigo), #38BDF8 (sky), #22C28E (mint).
- Over quota: #EF4444, used for the hatch over the part of a bar above the quota, the 2px cap on those bars, the overage value label and the legend entry.

Typography (Google Fonts):
- Plus Jakarta Sans throughout, tabular figures for all numbers.
- Eyebrow 11.5px 700, uppercase, 1.4px letter-spacing, #4F46E5 ("FERRITE MAPS · USAGE" pattern). Title 23px 700, -0.5px letter-spacing, stating the finding. Subtitle 13.5px 500 #64748B with measure, unit and period.
- Card titles 13px 700; card notes 11.5px 500 #64748B; legend 12.5px 600; axis labels 11.5px 500 #94A3B8; big numbers 20 to 21px 800 with -0.4px letter-spacing.

Layout:
- 32px outer margin. Header block at top left; a Day / Week / Month segmented control at top right: 36px tall well in #EEF0F7 with 10px radius and 4px inset, the selected 64 x 28 segment white with 7px radius and a 0 1px 2.4px rgba(15,23,42,0.12) shadow, labels 13px (selected 700 #0F172A, others 600 #64748B).
- Main chart card on the left (about two thirds of the width), 16px radius, soft shadow: 0 1px 2px rgba(15,23,42,0.05) plus 0 10px 28px rgba(79,70,229,0.07). Legend row inside the top, plot below, source line in the card's bottom-left.
- A right column of two smaller cards with the same radius and shadow: a billing-period card with a ring meter (radius 44, 12px stroke, #EEF0F7 track, #4F46E5 progress with round cap, starting at 12 o'clock, percentage in the center) and "Used / value / of quota" beside it; and a breakdown card with one 8px rounded track bar per series (#EEF0F7 track, series-colored fill) under a name and "total · share" row.

Axes and grid:
- Horizontal gridlines only, 1px #EEF0F6, labels right-aligned 12px left of the plot ("0", "0.5M", "1.0M"...). Skip the gridline at the quota value so the quota line owns it.
- X labels only every seventh day plus the last day, centered under the bars.

Marks:
- Bar chart: stacked vertical bars 62% of the band wide, square except for a 4px radius on the top of the stack, with 1.5px white gaps between segments. The quota is a 1.5px #0F172A line dashed 6 on 5 off across the plot, labelled by a dark #0F172A pill (22px tall, fully rounded, white 11.5px 700 text) sitting just above it where the bars are low. Any part of a bar above the quota gets a diagonal hatch (45 degrees, 6px period: white at 62% plus #EF4444 at 16% as the base, 2.2px #EF4444 stripes at 75%) and a 2px #EF4444 round-capped line on its top edge. Label the single biggest overage above its bar in #EF4444 11.5px 700 ("+416K").
- Line chart: one 2.5px line per series in the same colors with 3.5px dots at each point, the quota as the same dashed dark line, and any line segment above the quota filled beneath (down to the quota) with the same red hatch.
- Legend: 12px rounded squares (3.5px radius) with labels, plus a hatched "Over quota" swatch with its label in #EF4444.

Avoid: dark backgrounds, hard drop shadows, borders heavier than 1px, gradients on bars, red anywhere except overages, and 3D.

When you're done, render the chart and check that the over-quota count in the title matches the bars above the line, the quota pill does not sit on top of a bar, the three series stay distinguishable at thumbnail size, and the ring percentage equals used divided by quota.