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

Exchange Board bar chart, dark theme: A matte black rates board with paired buy and sell bars and one green best row.

Exchange Board

DarkBar

A matte black rates board with paired buy and sell bars and one green best row.

  • Matte black#0B0C0E
  • Panel#15161A
  • Warm white#EDE6D6
  • Warm gray#8B867B
  • Best rate green#4CC38A

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 "Exchange Board" 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 rates board of a currency exchange counter. Matte black stacked panels, thin gray dividers, crisp mono codes, flat warm white bars and one green highlight for the best row. Functional, precise and calm; no LEDs, no glow.

Colors (use these exact values):
- Background: #0B0C0E. Panels: #15161A (rows at 70% opacity, the highlighted row at 100%).
- Dividers and scale ticks: #34373D.
- Primary bars and text: #EDE6D6 (warm white).
- Paired secondary bars: #8B867B (warm gray).
- Highlight: #4CC38A (green) with #2F7F58 for the highlighted row's secondary bar.
- Secondary text: #9097A1.
- Identity chips beside each category: small muted colors such as #C9A34A, #5A8FC7, #B55F5F, #7FA66A, #9B7BC0, #C7834E, #4FA3A0, #A9A9A9 (identity only, never data).

Typography (Google Fonts):
- IBM Plex Sans for the title (700 29px warm white, stating the finding), the subtitle (400 15px #9097A1) and category names (400 14px #9097A1, warm white on the highlighted row).
- IBM Plex Mono for codes (600 18px, 1px letter-spacing), values at the bar ends (11.5px, 500 warm white for primary, 400 gray for secondary), the right-hand metric column (600 17px), column heads and board labels (600 11 to 12px uppercase, 2 to 3.5px letter-spacing, #9097A1), and scale labels (11px).

Layout:
- A header panel from (24, 24) to (936, 140): board name at y 54 in mono, an "OPEN" status with a 4px green dot on the right, title at y 94, subtitle at y 122, all from x 44.
- Column heads at y 172: CODE at x 44, name column at x 128, a small legend of two 12 x 7 px swatches over the bar column (primary, then secondary), and the metric column head right-aligned at x 916.
- Rows 44px tall from y 184, each a full-width panel with a 1px #34373D divider under it. In each row: an 11px identity chip at x 44, the code at x 64, the name at x 128, the paired bars from x 300 to 776, and the metric right-aligned at x 916.
- Scale labels under the last row at y 554; a formula note on the left and "Source: ..." on the right at y 578, both 12px #9097A1.

Axes and grid:
- No axis lines. Vertical scale ticks through all rows at each major value, 0.8px #34373D dashed 2 on 4, labelled once at the bottom in mono.

Marks:
- Bar chart: horizontal paired bars, square corners, 10px tall each: primary on top (row y + 9), secondary below (row y + 25), values in mono 7px past each bar end. The single best row lights green: both bars (#4CC38A and #2F7F58), its code, values and metric in green, a 3px green bar on the row's left edge, and its panel at full opacity.
- Line chart: draw each series as a 2px flat line (primary warm white, secondary warm gray dashed 4 on 3) with 3px square markers, over panels split into horizontal bands by the same dividers; the best series or point lights green with its value in mono beside it.

Avoid: glows, LED dot-matrix effects, gradients, rounded corners, flags or real currency symbols, more than one green highlight, and any color on the bars other than warm white, gray and the one green.

When you're done, render the chart and check that the paired bars in each row are clearly primary on top and secondary below, only one row is green, the values at the bar ends never collide, and the metric column is right-aligned.