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

Calls for Service bar chart, light theme: Dispatch log view with filter chips and hourly columns stacked by call priority.

Calls for Service

LightBar

Dispatch log view with filter chips and hourly columns stacked by call priority.

  • Log gray#F3F4F6
  • P1 red#991B1B
  • P2 orange#EA580C
  • P3 slate#64748B
  • Ink#111827

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 "Calls for Service" 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 computer-aided dispatch report screen. Utilitarian and dense but tidy: a light gray canvas, a thin white filter band with chips, and hard-edged stacked columns keyed to call priority.

Colors (use these exact values):
- Page: #F3F4F6. Filter band: #FFFFFF with a 1px #D1D5DB bottom border and a 5px #991B1B stripe at its left edge.
- Series: #991B1B (P1 emergency, bottom of the stack), #EA580C (P2 urgent, middle), #64748B (P3 routine, top). Keep this order.
- Ink: #111827. Secondary text: #6B7280. Gridlines #E5E7EB, baseline #9CA3AF. Filter chips: #EEF2F7 (active) or white, 1px #D1D5DB border, 4px radius.

Typography (Google Fonts):
- Barlow 700 for the title (27px, ink, sentence case, naming the peak) and annotation headings (14 to 15px).
- Barlow Semi Condensed for everything else: band text 12.5px with 1.2px letter-spacing (agency name 700 ink, report name 500 gray, both uppercase); chip text 12.5px as "Key: <b>Value</b>" with the value 700 ink; subtitle 15.5px gray; legend 13.5px 600; axis labels 12.5 to 13px; footer 12.5px and a report code on the right in 600 with 1.2px letter-spacing.

Layout:
- Filter band 44px tall across the top: agency and report name on the left, chips (report period, district, source) right-aligned ending at x 904.
- 56px side margins. Title baseline around y 94, subtitle y 120 (include the total count and a share), a square-swatch legend row at y 146.
- Plot from about y 184 to y 504, x 96 to 904. Footer at y 578.

Axes and grid:
- Horizontal 1px #E5E7EB gridlines with comma-formatted labels on the left; no vertical gridlines.
- x labels every third category (12a, 3a, 6a ... in 13px 600 ink) with 5px tick marks for the unlabeled ones, plus a small axis caption "Hour call received".

Marks:
- Bar chart: square-cornered stacked columns with 7px gaps; a 1px page-colored hairline between segments. Mark the peak with a thin 1px ink leader (small dot on the bar top, vertical then horizontal) to a two-line label: bold "6 p.m. peak" and "1,014 calls, 91 of them P1". Mark the trough with a short vertical leader and a matching two-line label.
- Line chart: one 2.5px line per priority in the same colors with square 5px markers, or stacked areas with 1px page-colored separators; the same leader-style annotations for peak and trough.

Avoid: rounded bars, gradients, shadows, 3D, a legend that doesn't match the stack order, and colors outside the three priorities.

When you're done, render the chart and check that the stack order is P1 at the bottom, the chips fit inside the band without overlapping the report name, and the peak annotation does not touch neighboring bars.