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

Relief Pipeline line chart, light theme: Humanitarian sitrep page with key figures, a stepped target and access flags.

Relief Pipeline

LightLine

Humanitarian sitrep page with key figures, a stepped target and access flags.

  • Reached blue#0077B6
  • Funding orange#F4A261
  • Target gray#8A949E
  • Constraint red#D62828
  • Header band#E9ECEF

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 "Relief Pipeline" 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: page 3 of a humanitarian situation report. Plain white, sober and scannable: a gray header band with the report number, a strip of four key figures, then one well-labeled chart that tracks delivery against target and flags what got in the way.

Colors (use these exact values):
- Page: #FFFFFF. Header band: #E9ECEF.
- Primary series and the report-number badge: #0077B6 (blue).
- Secondary series in its own small panel: #F4A261 (soft orange) for the line; its text and axis labels use the darker #B85C1E so they stay readable.
- Target or reference line: #8A949E (gray), with its labels in #56616B.
- Constraints, incidents and warnings: #D62828 (red).
- Ink #1F2933, secondary text #5F6B76, gridlines and cell dividers #E3E7EB.

Typography (Google Fonts):
- Noto Sans throughout. Title 700 23px ink, stating the finding with the numbers. Subtitle 400 13px #5F6B76 with measure, units and which panel holds each series.
- Badge text "SITREP 14" 700 14px white with 1.2px letter-spacing; header line 600 14px ink; issue date 13px muted, right-aligned.
- Key figure values 700 28px in their series color; labels 12.5px muted directly beneath.
- Axis labels 12px (main panel in #0077B6, funding panel in #B85C1E); panel captions "PEOPLE" and "FUNDING RECEIVED" 700 10px with 1px letter-spacing above each panel's axis.

Layout:
- Header band full width, 56px tall, flush to the top. Inside it at 40px from the left: a #0077B6 badge 98 x 28 px with "SITREP 14", then the crisis and cluster name; the issue date on the right at 40px from the edge.
- Title at y 96, subtitle at y 120, 40px margins.
- Key figures strip: a 1.5px ink rule on top, four equal cells 220px wide with 1px #E3E7EB vertical dividers, a 1px #E3E7EB rule 74px below. Figures: the latest primary value, the target, funding received with "of $X funded (N%)", and the count of constraints in red.
- Two side-by-side panels sharing y 250 to 486, never one plot with a right-hand second axis: the main panel from x 88 to 632 for the primary series, then about 80px of clear space, then a small secondary panel from x 712 to 912 with its own left axis labels (right-aligned 10px from it) and a 700 10px letter-spaced caps title in #B85C1E ("FUNDING RECEIVED") above it. The small panel's x-axis shows every period as a tick but labels only every fourth.
- Footer: a 1px #E3E7EB rule, then an "ACCESS CONSTRAINTS" key (700 10.5px red) listing each numbered marker with its description, then the source line 11px muted and a page folio "Page 3 of 8" on the right.

Axes and grid:
- Horizontal 1px #E3E7EB gridlines at every axis tick in each panel (0 to 400K in the main panel, $0M to $40M in the funding panel). Both start at zero.
- A 1.2px ink baseline under each panel with 5px tick marks for every period and "Wk 0, 1, 2..." labels 12px muted.
- No vertical axis lines.

Marks:
- Line chart: the primary series is a 4.5px #0077B6 line with round caps and joins, straight segments, drawn over an 8px white halo so it cuts through the other marks, ending in a 6px dot with a 2px white ring and a bold 14px label ("322K reached"). The target is a stepped 2px #8A949E line dashed 6 4, each step labeled "Phase N target 380K" 600 11.5px just above its left end. The secondary series lives in the small panel as a 2.5px #F4A261 line with a 4px end dot and a two-line #B85C1E label above its end (700 13px value, 600 11.5px "61% funded"), read against its requirement as a 2px #8A949E dashed line labeled "Required $32.0M".
- Bar chart: bars in #0077B6 (about 60% of the band, square corners), the target drawn as a 2px #8A949E dashed step or tick across each bar's slot, and the secondary series in its own small panel as described above, never over the bars. Value labels 600 12px above the bars in blue.
- Constraint markers: red #D62828 triangles 18px wide with a 1.5px white stroke and a white 700 10px number inside, sitting on the baseline at the affected period, each with a 1px red dotted vertical line (dash 2 3, 45% opacity) up through the plot.

Avoid: dual axes, gradients, shadows, rounded bars, more than one accent color per series, legends boxed in the plot, and text in the soft orange (use #B85C1E for orange text).

When you're done, render the chart and check that the key figures match the data, the percentages in the title and strip are arithmetically correct, the two panels have clear space between them, and no end label touches a line.