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

HUD Meters bar chart, dark theme: A shooter HUD squad panel of slanted segmented meters for health, shield and energy.

HUD Meters

DarkBar

A shooter HUD squad panel of slanted segmented meters for health, shield and energy.

  • Gunmetal#1A1D21
  • Health red#FF4D4D
  • Shield blue#4DB8FF
  • Energy yellow#FFD24D

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 "HUD Meters" 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 squad status panel of a sci-fi shooter's heads-up display. Gunmetal, angular clipped corners, and bars built from slanted glowing blocks like health and shield meters.

Colors (use these exact values):
- Background: #1A1D21 (gunmetal). Panel: #20242A with a 1.2px #343A42 border. Primary text: #E8EBEE. Secondary text: #8C949D. Faint labels: #5C646E.
- Series: #FF4D4D (health red), #4DB8FF (shield blue), #FFD24D (energy yellow).

Typography (Google Fonts):
- Chakra Petch throughout, tabular figures for numbers.
- Eyebrow 500 12px uppercase with 2.4px letter-spacing and // separators; title 700 28px stating the finding; subtitle 400 15px #8C949D with measure and unit.
- Row names 700 16px uppercase with 1.2px letter-spacing, a 12px #5C646E sub-label below. Series keys ("HP", "SH", "EN") 700 11px in the series color. Values 700 19px at the right: the first series in #E8EBEE, the others in their series color. Column headers 600 12px uppercase with 2px letter-spacing in #5C646E.

Layout:
- 40px margins. Eyebrow, title, subtitle at top left. One 880 x 410px panel with its top-left and bottom-right corners clipped at 45 degrees (16px), plus a 2px #8C949D accent bracket hugging the top-left clipped corner.
- Each row: an angular badge (a 36 x 52px outline with two clipped corners holding a two-letter code), the row name, then three stacked meters 20px apart, each with its key to the left, and the values right-aligned at the panel's right edge. Rows 72px apart, separated by 1px #343A42 dotted (2 4) dividers.

Axes and grid:
- No axes or gridlines. A "0" and "100" at the two ends of the meters in the header row, and a "NOW" header over the values.

Marks:
- Bar chart: each value is a segmented meter of 20 blocks (5 points per block), each block a 19 x 14px parallelogram slanted 5px to the right, 4px apart. Filled blocks are solid series color with a glow (Gaussian blur 2.2 merged under the source, filterUnits userSpaceOnUse over the whole canvas). The partial block is filled proportionally. Depleted blocks remain as 1px outlines in the series color at 22% opacity. Bars always start at zero.
- Line chart: draw each series as a 2px line with the same glow, and replace point markers with small slanted 8 x 6px parallelogram ticks; put a faint row of outlined blocks along the baseline as a segmented x axis.

Labels and annotation:
- Footer legend: a slanted swatch per series plus an outlined swatch labeled with the block value ("Depleted, 5 pts per block"); source on the right in 12px #5C646E.

Avoid: rounded corners, gradients across bars, smooth unsegmented bars, more than three series colors, and glow filters clipped to their bounding boxes.

When you're done, render the chart and check that filled blocks match the values (value / 5 blocks), depleted outlines stay visible but quiet, the glow is not clipped, and the right-hand values align on one column.