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

Explain Plan line chart, light theme: A SQL console result pane with a line-numbered gutter and a comment title.

Explain Plan

LightLine

A SQL console result pane with a line-numbered gutter and a comment title.

  • Canvas#FAFBFC
  • Gutter#EEF0F3
  • Slate#475569
  • Violet#7C3AED
  • Ink#1E293B

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 "Explain Plan" 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 result pane of a SQL console. The chart looks like the output of a query you just ran: a gutter of line numbers, the title written as a SQL comment, the SELECT that produced the data, a "Chart" result tab and a status bar with the row count. Quiet, precise, developer-tool clean.

Colors (use these exact values):
- Editor canvas: #FAFBFC. Result pane: #FFFFFF.
- Gutter strip and status bar: #EEF0F3, separated by 1px #E2E6EC rules.
- First series (the reference, e.g. median): #475569 slate.
- Second series (the headline, e.g. p99): #7C3AED violet. Also used for SQL keywords, the active tab underline, the peak callout and a 10% opacity band between the two series.
- Primary text: #1E293B. Comment and axis text: #8A94A6. Faint line numbers: #B6BCC7 (the numbers beside the editor lines slightly darker, #98A1AF).
- Gridlines: #EDF0F4; baseline and ticks: #CBD2DB. Current-line highlight: #F1ECFD at 55% opacity. A small #16A34A status dot.

Typography (Google Fonts):
- Source Sans 3 for the two comment lines only: the title 22px 600 in #1E293B, prefixed with "-- " in 400 #8A94A6, stating the finding; the subtitle 15px 400 in #8A94A6, also prefixed with "-- ", giving measure, unit and period.
- JetBrains Mono for everything else: line numbers 11px right-aligned; the SELECT line 12.5px with keywords (SELECT, FROM, ORDER BY) in 700 violet; tabs 12px (active tab 700 #1E293B, others #8A94A6); axis labels 11px; end labels and callout 11px 700; status bar 11.5px.

Layout:
- A 48px #EEF0F3 gutter runs the full height on the left, with faint line numbers on a 24px rhythm (baselines at 36, 60, 84 ...).
- Editor lines start at x 64: line 1 the title comment (with the pale violet current-line highlight behind it, full width), line 2 the subtitle comment, line 3 blank, line 4 the SELECT statement that "produced" the chart.
- At y 142 the white result pane begins: a 32px toolbar with tabs "Result 1", "Chart" (active, 2px violet underline) and "Explain", and the legend plus the unit ("ms") at the right of the toolbar.
- Plot inside the pane with about 70px of left room for labels; a 40px status bar at the bottom spans the full width: green dot, "rows: N" in 700, "elapsed: 38 ms", the database name, and "Source: illustrative data" right-aligned.

Axes and grid:
- Horizontal gridlines only, 1px #EDF0F4, with a #CBD2DB baseline. Y labels right-aligned 12px left of the plot, the unit on its own line above the top label.
- Short ticks under every x step (5px on labeled ones, 3px otherwise), labels like "03:00" every third step.

Marks:
- Line chart: thin straight polylines, 1.75px, round joins, no smoothing. Each data point is a 4 x 4 px square marker with a white fill and a 1px stroke in the series color. Shade the area between the two series in violet at 10% opacity. Direct end labels like "p99 47" in 11px 700 mono in the series color, 12px right of the last point.
- Bar chart: slim square-cornered bars (about 45% of the band) in slate, with the headline series or highlighted bar in violet; value labels in 11px mono above the bars; the same square-marker language is not used on bars.
- Peak callout: a violet 116 x 24 px box (3px radius) with white 11px 700 mono text like "max 142 @ 14:00", joined to a solid 7px violet square on the point by a 1px violet stem.

Avoid: rounded or soft chart styling, gradients, drop shadows, smoothed curves, big colored legends, and any sans text other than the two comment lines.

When you're done, render the chart and check that the line numbers sit on the same baselines as the editor lines, the title reads as a SQL comment, the rows count in the status bar equals the number of data points, and the violet band sits exactly between the two lines.