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

Quiz Scores bar chart, light theme: Ruled gradebook histogram in cobalt with a dashed pass mark and pale failing bins.

Quiz Scores

LightBar

Ruled gradebook histogram in cobalt with a dashed pass mark and pale failing bins.

  • Soft sky#F2F8FD
  • Cobalt#2563EB
  • Failing blue#BFDBFE
  • Navy ink#0F1E3D
  • Margin red#F2A7A7

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 "Quiz Scores" 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 teacher's gradebook page. Soft sky-blue paper with ruled rows and a red margin line, cobalt ink for the results that count, and a clear pass mark.

Colors (use these exact values):
- Page: #F2F8FD (soft sky). Ruled rows: #D8E6F4. Vertical margin line: #F2A7A7.
- Main marks: #2563EB (cobalt). Below-threshold marks: #BFDBFE (pale blue) with a 1px #8DB8F2 outline; their big count summary uses #6A94CF.
- Ink: #0F1E3D for the title, pass-mark line and axis. Secondary text: #5A6B85. White text on the badge and pass pill.

Typography (Google Fonts):
- Lexend Deca throughout. Platform badge 11.5px 600 uppercase with 2px letter-spacing, white on a 24px cobalt rounded (5px) rectangle, followed by a 13px context line. Title 27px 600, -0.3px letter-spacing, stating the finding. Subtitle 14px 400 muted with measure, bin size, n and threshold.
- Value labels 11.5px 500 (cobalt above passing bars, muted above failing ones). Axis labels 12 to 12.5px; the threshold tick label 700 cobalt. Count summaries 28px 700 with 13px captions. Source 12px.

Layout:
- Ruled lines every 26px across the full width from y 150 to the bottom; a 1.2px margin line at x 72 running the full height. Content starts at x 96.
- Chart from about y 190 to a baseline at y 488, 136px left margin. Footer at y 574.

Axes and grid:
- The ruled rows act as the grid; no separate gridlines. Y-axis values with 6px ticks at the left and a small "learners" unit label above them.
- 1.2px ink baseline; x ticks every 10 points, 6px long, with a centered axis title under them.
- Threshold: a 1.6px ink dashed vertical line (6 on, 5 off) at the pass score, topped by a 76 x 22 fully rounded ink pill reading "PASS 70" in 11px 600 white with 1.2px letter-spacing.

Marks:
- Bar chart (histogram): bins touch with a 4px gap, 7px rounded top corners, cobalt for passing bins and pale blue with the thin outline for failing bins; count labels 8px above each bar.
- Count summaries flank the threshold near the top of the plot: failing total right-aligned 22px left of the line, passing total left-aligned 22px right of it, each with "below 70 · 37.6%" or "passed · 62.4%" underneath. Compute from the data.
- Line chart: a 2.5px cobalt line with 4px dots on the pass side of the threshold and a 2.5px #8DB8F2 line on the failing side, a pale #BFDBFE area under the failing part only, plus the same threshold line, pill and count summaries.

Avoid: gradients, shadows, more than two blues plus the margin red, gridlines on top of the ruled rows, and a legend (the threshold explains the tint).

When you're done, render the chart and check that the summaries add up to the total, the percentages are right, the ruled rows sit behind the bars, and no label touches the threshold pill.