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

Ferry Terminal bar chart, dark theme: Capsule-topped harbour sign panels on deep teal, with ferries and wave lines.

Ferry Terminal

DarkBar

Capsule-topped harbour sign panels on deep teal, with ferries and wave lines.

  • Harbour teal#0B3C43
  • Sign white#FFFFFF
  • Signal orange#F26B1D
  • Foam#8CC7C4
  • Board dark#072A2F

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 "Ferry Terminal" 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: harbour terminal signage. Deep teal water, capsule-topped white sign panels standing in the sea, one orange panel for the headline category, little white ferry pictograms and a departure-board strip in the header.

Colors (use these exact values):
- Background: #0B3C43. Departure-board strip: #072A2F with #F9B27C text.
- Panels: #FFFFFF; the single highlighted panel and the big header number: #F26B1D.
- Wave lines: #FFFFFF (front) and #8CC7C4 (at 70% and 35% opacity behind). Secondary text: #8FB3B3. Gridlines: white at 10% opacity.

Typography (Google Fonts):
- Barlow for the title (700, 29px white, two lines, stating the finding), values (700, 22px), category names (600, 14.5px white; the highlighted one #F9B27C), sub-labels (400, 12.5px #8FB3B3) and axis labels (12.5px).
- Barlow Condensed 600 for the header count label ("ROUTES", 13px, 3px letter-spacing) and the departure-board strip (14px uppercase, 2.2px letter-spacing, sections separated by " | ").
- The big header number: Barlow 700, 92px, #F26B1D.

Layout:
- Header: the count at x 40 (baseline y 104) with "ROUTES" under it; a 1px white 25% vertical divider at x 114; the title at x 136 on two lines (y 66, 100); the board strip under the title (26px tall, rx 4) sized to its text.
- Plot from x 64 to 896, baseline y 470. Category names 46px below the baseline, sub-labels 18px lower. Footer at y 576, 12.5px #8FB3B3.

Axes and grid:
- Faint white 10% gridlines at round values, labels right-aligned 10px left of the plot. No axis lines.
- The baseline is water: three wavy lines (quadratic waves, 22px wavelength) at +2, +10 and +17px below the baseline, 1.6px white, 1.2px #8CC7C4 at 70% and 1px #8CC7C4 at 35%, with a background-colored strip behind them so the waves cut across the foot of every panel.

Marks:
- Bar chart: vertical panels 56px wide with a fully round top (radius = half the width) and a flat foot in the water. A 1.2px inner outline inset 5px (teal at 25% on white panels, white at 60% on the orange one). The value in 700 22px inside the top, 37px below the panel top, in #0B3C43 (white on orange). A white ferry pictogram (hull, deck cabin, bridge and funnel, about 44 x 23 px) floating 10px above each panel. Only the busiest category is orange.
- Line chart: a 3px white line with round joins; each point is a small white capsule (22 x 30 px, fully round top) with the value above it, the headline point orange with a ferry pictogram above. Keep the wave baseline and departure-board header.

Avoid: more than one orange mark, gradients, shadows, square-topped bars, blue-gray water, and pictograms that touch the values.

When you're done, render the chart and check that the shortest panel still shows its round top and value, the waves cross every panel foot, and the orange mark is the one the title talks about.