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

Screening Hits bar chart, dark theme: Charcoal lab table with cyan hit bars, a screened column and amber hit rates.

Screening Hits

DarkBar

Charcoal lab table with cyan hit bars, a screened column and amber hit rates.

  • Charcoal#181A1F
  • Soft cyan#5CC6D0
  • Amber#F2B54A
  • Screened gray#646A76

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 "Screening Hits" 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 high-throughput screening dashboard on a charcoal lab screen. Cool cyan bars, small warm amber rates, a faint column of denominators; a scientist should read counts, rates and effort in one pass, row by row like a lab table.

Colors (use these exact values):
- Background: #181A1F. Primary text: #E9ECEF. Secondary text, the header rule and the bar origin line: #858B96. Gridlines and row separators: #2A2D34.
- Bars: #5CC6D0 (soft cyan), the leading bar at full opacity and the rest at 82%.
- Rate values and their column head: #F2B54A (amber). Denominator column: #646A76.

Typography (Google Fonts): Gantari.
- Eyebrow: 600 12px uppercase, 2px letter-spacing, #858B96, after a 4px cyan dot. Title: 700 30px, -0.4px letter-spacing, #E9ECEF, stating the finding. Subtitle: 400 15.5px #858B96 with totals.
- Column heads 600 11px uppercase with 1.4px letter-spacing, each in its column's color ("TARGET CLASS" #858B96, "CONFIRMED HITS" cyan, "SCREENED" #646A76, "HIT RATE" amber).
- Category names 500 14px #E9ECEF, horizontal and left-aligned (700 for the leading row). Count labels 700 14px #E9ECEF; denominators 500 13px #646A76; rates 600 13.5px amber (700 for the leading row); tick labels 12px.

Layout:
- 56px margins. A table of rows 36px tall starting at y 170, divided by 0.8px #2A2D34 lines, with a 1px #858B96 rule under the column heads (heads at y 158).
- Each row: the category name at x 56, a horizontal bar from x 216 (bars end by about x 700), and two right-hand value columns, right-aligned: the denominator (e.g. compounds screened, "120k") at x 808 and the amber rate at x 904.
- Count ticks under the table; a footer at y 578 with the rate definition left and "Source: ..." right.

Axes and grid:
- Linear x from zero, vertical 1px #2A2D34 gridlines every 100 through the rows with labels under the table, and a 1px #858B96 line at the bar origin. No second axis.

Marks:
- Bar chart: horizontal bars 20px tall with 3px corners on the right end only, sorted descending, count 8px past the bar end. The denominator and rate are labeled values in their own columns, never a second axis.
- Line chart: a 2.5px cyan line with 4px cyan dots and the count above each dot, with the denominators and amber rates as a two-row value table under the time axis, labels horizontal.

Avoid: a secondary y axis, gradients, glows, bars in several colors, and rotated or angled category labels.

When you're done, render the chart and check that each rate equals count divided by its denominator, the value columns line up on their right edges, no count label runs into the SCREENED column, and the title's claim holds for both counts and rates.