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

Watchlist Sparks line chart, dark theme: A dark watchlist table of mint and red sparklines with rounded percent chips.

Watchlist Sparks

DarkLine

A dark watchlist table of mint and red sparklines with rounded percent chips.

  • Surface#121212
  • Mint#3DDC97
  • Soft Red#FF6B6B
  • Divider#262626

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 "Watchlist Sparks" 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: the watchlist of a dark brokerage app. A true dark gray surface, eight tidy rows reading as one table, thin mint and soft red sparklines and rounded percent chips. Dense but calm.

Colors (use these exact values):
- Surface: #121212. Row dividers: #262626, 1px. Selected row: #1D1D1F with 12px radius and a 3px accent bar at its left edge in the row's color.
- Up: #3DDC97 (mint). Down: #FF6B6B (soft red). Chips use the same color at 14% opacity with colored text; the selected row's chip is solid with #121212 text.
- Text: #F2F2F2 (tickers, prices, title), #8C8C8C (names, subtitle), #5E5E5E (column heads, source). Open reference line: #6A6A6A dotted.

Typography (Google Fonts):
- Manrope for words: title 23px 700 with -0.3px letter-spacing, stating the finding; subtitle 13.5px 500; column heads 11.5px 600 uppercase with 0.8px letter-spacing; company names 12px 500; status pill 12.5px 600; source 11.5px 500.
- IBM Plex Mono for tickers (15px 600), prices (15px 500) and chips (13px 600), with tabular figures.

Layout:
- 40px margins. Title and subtitle top left; a small "Market closed" (or open) status pill top right, 30px tall and fully rounded on #1C1C1C with a gray dot.
- Column heads: SYMBOL at left, TODAY above the sparklines, LAST and CHANGE right-aligned.
- Eight 54px rows: ticker with the company name under it on the left; a sparkline from x 372 to 700 about 32px tall; the last price right-aligned at x 808; an 84 x 26px fully rounded change chip right-aligned at x 920.

Axes and grid:
- No axes or gridlines. Each sparkline has a faint dotted (1 3) #6A6A6A line at its opening value, so rising and falling is read against the open. Each row uses its own vertical scale, noted in the source line.

Marks:
- Line chart: 1.5px straight-segment sparklines with round joins, mint when the period change is positive and soft red when negative, with a 2.5px dot at the last point. No area fill.
- Bar chart: keep the row layout, and in the middle column draw thin 6px-wide intraday bars (or one horizontal 10px bar per row with 5px rounded ends) in mint or soft red growing from a dotted zero or opening line; the price and chip columns stay the same.

Avoid: gridlines, big legends, color that doesn't encode direction, glows, gradients, pure black backgrounds and proportional digits.

When you're done, render the chart and check that each row's color matches the sign of its chip, the chip percentages match first and last values, the title count matches the number of rising rows, and the sparklines never touch the neighboring rows.