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

Flame Graph bar chart, dark theme: A profiler flame graph of warm stacked frames with one outlined frame and tooltip.

Flame Graph

DarkBar

A profiler flame graph of warm stacked frames with one outlined frame and tooltip.

  • Ember red#D9412B
  • Flame orange#F07F22
  • Amber#F4A42C
  • Yellow#F7C548
  • Near black#0D0D0F

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 "Flame Graph" 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 CPU profiler in a dark viewer. Warm stacked frames rising from the bottom, labels truncated to fit, and one frame selected with a crisp white outline and a light tooltip.

Colors (use these exact values):
- Background #0D0D0F; toolbar #17171B; rules #2A2A30.
- Frame fills from a warm set: #D9412B, #E8591A, #E86A33, #F07F22, #F4A42C, #F7C548. Pick per frame by a stable hash of the name plus depth, so neighbors vary slightly in hue. Hue carries no meaning.
- Frame labels #1A0E08. Text #F2EFEA, muted #8E8A86.
- Selection: 2.5px #FFFFFF outline. Tooltip #F2EFEA with #1A0E08 heading, #5A534C details and the key figure in #C2410C.

Typography (Google Fonts):
- Inter for the title (700 24px, -0.3px letter-spacing, stating the finding), subtitle (400 14px muted, with measure, unit and total) and the footnote (12px).
- JetBrains Mono for the toolbar (12px), frame labels (500 12px, 6px inset), tooltip (600 12.5px heading, 11.5px details) and axis labels (11px).

Layout:
- A 40px toolbar across the top: profile name and endpoint in muted mono, a search field on the right showing the searched term.
- Title and subtitle below, then the flame graph from x = 40 to 920 with its base at y = 500 and 36px rows (2px gaps) stacking upward.
- A time axis under the base with ticks every 50 ms and "ms" at the right end. Footer: six small warm swatches with the note "Hue varies by frame only; width is CPU time", and "Source: ..." at the right.

Axes and grid:
- No gridlines. A single 1px #2A2A30 axis line under the base with 5px ticks.

Marks:
- Bar chart (flame graph or horizontal bars): rectangles with 2px radius and a 1px gap on each side, widths proportional to time, children placed left to right inside their parent. Labels truncated with ".." to fit; drop the label entirely when fewer than 5 characters fit.
- Highlight: exactly one frame with the white outline, a dotted 1px white leader line up to a 250 x 58 px tooltip (6px radius, small pointer) reading the qualified name, then time, share of total and depth.
- Line chart: CPU time over a trace as a 2px #F07F22 line with a warm gradient area (#F7C548 at 30% to transparent), the selected moment outlined with a white ring and the same tooltip.

Avoid: cool colors, legends that imply hue meaning, labels spilling out of their frame, and gridlines.

When you're done, render the chart and check that every child fits inside its parent, the highlighted frame's share in the title and tooltip matches its width, truncated labels never overflow, and the tooltip clears the frames.