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

Open Data Portal bar chart, dark theme: A dark civic data portal with filter chips, soft stacked bars and a tooltip.

Open Data Portal

DarkBar

A dark civic data portal with filter chips, soft stacked bars and a tooltip.

  • Sage#86BC8C
  • Slate blue#5C84D0
  • Sand#E2C07E
  • Dusty rose#E07A86
  • Lavender#B592EA
  • Card#14171C

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 "Open Data Portal" 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 dataset page on a modern civic open data portal in dark mode. Product UI rather than print: breadcrumb, filter chips, a ghost download button, a chart card and a hover tooltip frozen in place.

Colors (use these exact values):
- Page: #0F1216. Chart card: #14171C with a 1px #262B33 border. Gridlines: #22272F. Baseline: #3A414B.
- Primary text: #E8EAED. Secondary text: #8B929C. Inactive chip text: #B7BDC6.
- Accent (active chip border, download button): #5C84D0.
- Series, bottom to top: #86BC8C (sage), #5C84D0 (slate blue), #E2C07E (sand), #E07A86 (dusty rose), #B592EA (lavender).
- Tooltip card: #20252D with a 1px #39404A border and a soft black drop shadow (offset 0 6, blur 9, 55% opacity).

Typography (Google Fonts):
- Hanken Grotesk throughout (400, 500, 600, 700), with tabular figures for numbers in the axis and tooltip.
- Breadcrumb 13px #8B929C ("Datasets / City services / 311"). Dataset title 26px 700, -0.3px letter-spacing. Summary line 15px #8B929C stating the total and the peak, computed from the data.
- Chips 13px (600 white when active, 500 #B7BDC6 otherwise). Button 14px 600 accent. Legend 13px 500. Axis labels 12.5 to 13px. Tooltip heading 14px 700, rows 13px. Footer 12px.

Layout:
- 40px side margins. Breadcrumb at y 38, title at y 74, summary at y 100.
- "Download CSV" ghost button at the top right: 143 x 36, 8px radius, 1.2px accent border, no fill, with a small download arrow icon.
- Filter chip row at y 120: 28px tall pills (14px radius), 10px apart, each with a chevron; the active one filled #1C2A40 with an accent border, the rest #171B21 with a #2E343D border.
- Chart card from y 166 to 552 with 12px radius. Legend row inside its top edge (11px swatches with 2.5px radius). Plot inside the card with axis labels on the left.
- Footer line under the card: "Source: ... Last updated <date>. License: ..." on the left and the table size on the right.

Axes and grid:
- Horizontal gridlines 1px #22272F, labels abbreviated ("1k", "2k"). No y-axis line. Month labels below a 1px #3A414B baseline, the highlighted month in 700 white.

Marks:
- Bar chart: stacked bars at 58% of the band, with 1.5px card-colored gaps between segments and 3px rounded top corners on the top segment only. Simulate a hover on the most important bar (the peak): its column gets a 6px-radius white highlight at 4.5% opacity behind it, it stays at full opacity while every other bar drops to 80%, and a pinned tooltip card sits to its right with a small left-pointing notch, showing the period and total on the first line, a divider, then one row per category (color dot, name, right-aligned value) in stack order from top to bottom.
- Line chart: 2px lines in the same five colors with 3px dots only on the hovered period, a 1px dashed #8B929C vertical hover rule through that period, and the same tooltip card pinned beside it.

Avoid: neon or saturated colors, gradients on bars, 3D, heavy borders, light mode, and tooltips that hide the hovered bar itself.

When you're done, render the chart and check that segments stack in legend order, the tooltip values and total match the data, the tooltip notch points at the hovered bar, and the chips and button do not collide with the title.