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

Displacement Trend line chart, dark theme: Blue-black monitor with a numbered event timeline over amber and green trend lines.

Displacement Trend

DarkLine

Blue-black monitor with a numbered event timeline over amber and green trend lines.

  • Night#0B1623
  • Pale amber#FCD34D
  • Return green#86EFAC
  • Rule white#F1F5F9

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 "Displacement Trend" 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 crisis monitoring dashboard on a deep blue-black screen. Serious and legible: a numbered timeline of what happened sits above the chart so every turn in the lines can be read against its cause.

Colors (use these exact values):
- Background: #0B1623.
- Primary series: #FCD34D (pale amber) for the line, its dots, peak callout and end label; its area is a vertical gradient of the same amber from 34% opacity at the top to 4% at the baseline.
- Secondary series: #86EFAC (pale green).
- Title and header rule: #F1F5F9 (the rule at 70% opacity). Event circle strokes and numbers white-ish #F1F5F9; event labels #C7D2DE.
- Secondary text and axis labels #8FA1B5; timeline track #2A3B50; gridlines #1C2A3A; zero line #3A4B60.

Typography (Google Fonts):
- Merriweather Sans 700 for the title (24px #F1F5F9, stating the finding with numbers).
- Roboto Condensed for everything else: eyebrow 600 12.5px uppercase with 1.8px letter-spacing muted; subtitle 15px muted; timeline year labels 600 12px; event numbers 700 12.5px; event labels 12.5px; axis labels 12 to 12.5px (January of each year 700 in #F1F5F9); end values 700 20px with a 13px descriptor under them.

Layout:
- 40px margins. Eyebrow at y 46, title at y 84, subtitle at y 110, then a 1px header rule at y 128 across the full width.
- Timeline strip centered at y 172 spanning the plot width: a 2px #2A3B50 track, 12px year ticks with year labels above, and numbered event circles (r 10.5, filled #0B1623, 1.5px #F1F5F9 stroke) at each event date, each with a short label 15px right of the circle and 25px below the track.
- Plot from x 64 to 820, y 236 to 500. Reserve about 120px on the right for end labels.
- Source line at y 568, 12.5px muted.

Axes and grid:
- Horizontal 1px #1C2A3A gridlines, #3A4B60 zero line, left labels with a K suffix.
- Quarterly x labels 20px below the baseline, January labelled "Jan '23" in bold white.
- Each event also drops a 0.8px #F1F5F9 dotted line (dash 2 4, 35% opacity) from the timeline to the baseline.

Marks:
- Line chart: primary series a 4px #FCD34D line (round caps and joins, straight segments) over its translucent amber gradient area; secondary series a thin 2px #86EFAC line with no area. Mark the peak with a 5px amber dot with a 2px background ring and a 700 13px amber label, and end each series with a dot and a direct label (value plus descriptor) to the right.
- Bar chart: primary series as columns in #FCD34D at 85% opacity with 1px gaps, secondary series as a 2px #86EFAC line with small dots over the columns; the event timeline and dotted drop lines stay the same.

Avoid: a legend box (label ends directly), glows, more than two data colors, dense gridlines, bright white fills, and event labels that collide with each other or the chart.

When you're done, render the chart and check that event circles line up with their dates on the x axis, the end labels do not overlap each other, and the title's comparison is true for the last data point.