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

Key Usage bar chart, dark theme: Near-black API console card with yellow lollipops sized by errors and quota ticks.

Key Usage

DarkBar

Near-black API console card with yellow lollipops sized by errors and quota ticks.

  • Canvas#0A0A0A
  • Card#111111
  • Electric yellow#FDE047
  • Border#262626
  • Soft gray#A3A3A3

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 "Key Usage" 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 API console card on a near-black screen. Sparse and technical, with one electric yellow for the data and a masked secret key in the header as decoration.

Colors (use these exact values):
- Canvas: #0A0A0A. Card: #111111 with a 1px #262626 border and 14px radius; header strip #0E0E0E. Gridlines #1C1C1C.
- Data: #FDE047 (electric yellow) for every bar and marker.
- Quota or target ticks: #FAFAFA at 55% opacity.
- Text: #FAFAFA titles and highlighted names, #D4D4D4 other names, #A3A3A3 values and legend, #737373 labels.

Typography (Google Fonts):
- Space Grotesk for the product name (700, 14px), section name (500, 13px), title (700, 27px, -0.6px letter-spacing, stating the finding), subtitle (400, 14.5px), row names (500, 13px) and source (400, 12px).
- Ubuntu Sans Mono for the masked key (500, 12.5px), the date chip, legend (400, 12px), axis labels (400, 11px), key suffixes (400, 11.5px, "…4f2a") and percentages (500 to 700, 12.5px).

Layout:
- The card is inset 20px from the canvas edges. A 46px header strip with a 1px bottom rule: product and section names at left; at right a 218 x 24 dark pill with a yellow status dot and "sk_live_" followed by asterisks, then a date chip.
- Title and subtitle at x 44, then a legend row: a yellow line swatch, a white quota tick, and three reference circles for the size key.
- Rows about 27px apart: name at x 44, key suffix right-aligned just before the plot, plot from x 262 to 792, and the percent of quota right-aligned at x 916 under an "OF QUOTA" head.
- Footer rule inside the card with the source at left and a mono total at right.

Axes and grid:
- Vertical gridlines at even steps in #1C1C1C (the zero line #262626) with mono labels above the plot ("2M"). No horizontal gridlines.

Marks:
- Bar chart: lollipops. A 2px yellow stem from zero to the value, ending in a circle whose area shows a second measure (radius 2.5 + 0.95 x sqrt(value)), with an 18 to 22% yellow fill and a 1.3px yellow ring. Each row has its own 16px white quota tick at 55% opacity. Rows over their quota get a solid yellow circle with a 3px glow and a yellow 70 x 20 badge (4px radius) with the percent in black 700 mono.
- Line chart: 2px yellow lines with round joins over the same card, circles at each point sized by the second measure, the quota as a faint white dashed line, and the over-quota points filled solid with the glow.

Avoid: more than one data hue, thick bars, gradients on the bars, light backgrounds, and showing a real-looking full key (always mask it).

When you're done, render the chart and check that circles don't collide between rows, the glow isn't clipped, the footer sits inside the card, and every percent equals value divided by quota.