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

Beam Time bar chart, light theme: Scheduled outlines with delivered bars inside and hatched, captioned losses.

Beam Time

LightBar

Scheduled outlines with delivered bars inside and hatched, captioned losses.

  • Pale gray#F3F4F6
  • Slate blue#43628F
  • Ink#1F2937
  • Lost brick#B5654F
  • Note gray#6B7280

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 "Beam Time" 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: a facility operations report for a run cycle. Orderly, tabular and matter-of-fact: pale gray page, one slate blue, and a hatched brick shortfall that tells you exactly what went wrong.

Colors (use these exact values):
- Page: #F3F4F6. Bar interiors and hatch background: #FFFFFF.
- Delivered bars and scheduled outlines: #43628F (slate blue).
- Lost hours: #B5654F brick, as 1.6px diagonal hatch lines on white (5px pattern rotated 45 degrees) and for the lost-hours number.
- Primary text and header rules: #1F2937. Secondary text, reasons and axis labels: #6B7280. Row separators and vertical gridlines: #D8DCE3.

Typography (Google Fonts):
- Tauri throughout (single weight 400). Title 27px #1F2937 stating the totals; subtitle 15px #6B7280 with measure, unit and the overall percentage.
- Experiment codes 15px #1F2937 set bold by adding a 0.55px stroke in the same color with paint-order: stroke. Names 13px #6B7280. Column heads 11px uppercase with 1.6px letter-spacing in #6B7280. Values and reasons 13px. Axis labels 12px.

Layout:
- 56px side margins. Title baseline 58, subtitle 86, a key row at about 116 (outline swatch "Scheduled", outlined swatch with an inset bar "Delivered", hatched swatch "Lost, with cause").
- A table below: column heads "EXPERIMENT" at left and "DELIVERED" right-aligned at 904, a 1px #1F2937 rule under them and another under the last row.
- One 31px row per experiment: bold code at x 56, name at x 116, bars starting at x 300, and a right column "delivered / scheduled h" right-aligned at 904 (in #1F2937 when short, #6B7280 when complete). 0.6px #D8DCE3 separators between rows.
- Footer: source on the left, total lost hours in brick on the right.

Axes and grid:
- Horizontal value axis from 0 with ticks every 40 hours labeled "0 h", "40 h" below the table; 1px #D8DCE3 vertical gridlines through the rows. No y axis line.

Marks:
- Bar chart: each row has a 20px tall scheduled bar drawn as a 1px #43628F outline with a white fill, and inside it a 12px delivered bar in solid #43628F, both starting at zero. Where delivery fell short, the gap between the delivered end and the scheduled end is filled with the brick hatch, and right after the scheduled end (10px gap) print the lost hours in brick ("-26 h") followed by a short cause in #6B7280 ("RF cavity trip").
- Line chart: plot scheduled as a 1.2px #43628F dashed line and delivered as a 2.2px solid #43628F line with 3.5px dots; shade the gap between them with the brick hatch where delivered falls below scheduled, and label each shortfall with the lost amount in brick and a cause in #6B7280.

Avoid: rounded bars, gradients, shadows, legends that repeat what direct labels say, more than one accent color, and colored text other than the brick lost-hours numbers.

When you're done, render the chart and check that totals and percentages in the title are arithmetically right, every short bar has a hatched gap and a cause, the outlines stay visible around the delivered bars, and cause text never collides with the right-hand column.