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

Docs Page line chart, light theme: A developer docs page with nav, Note callout and a violet line tagged by release.

Docs Page

LightLine

A developer docs page with nav, Note callout and a violet line tagged by release.

  • Violet line#7C3AED
  • Violet tint#F3EEFF
  • Note blue#2563EB
  • Budget amber#D97706
  • Ink#111827

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 "Docs Page" 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 page from a well-made developer documentation site. Calm, neutral and precise: a slim left nav, a breadcrumb, a blue Note callout, then one chart with a single violet line whose points carry release tags as small rounded badges.

Colors (use these exact values):
- Page #FFFFFF. Nav column #F8FAFC with a 1px #E5E7EB right border. Other rules and borders #E5E7EB.
- Ink #111827 for headings, body #374151, muted #6B7280 for breadcrumb, axis labels and source.
- Data line and active states: #7C3AED (violet). Tint #F3EEFF for badges and the active nav item, with a #DDD0FB badge border and #5B21B6 badge text.
- Note callout: #EFF6FF fill, 4px #2563EB left bar, #2563EB title and info icon.
- Budget or target line: #D97706 dashed, with its badge on #FFFBEB, #FCD34D border and #B45309 text.
- Values over the budget: point stroke #DC2626, badge #FEF2F2 with #FCA5A5 border and #B91C1C text.
- Gridlines #F1F2F4, baseline #D1D5DB.

Typography (Google Fonts):
- IBM Plex Sans for prose: H1 600 26px with -0.3px letter-spacing stating the finding; lead paragraph 400 15px #374151 with the measure and unit; nav links 13px (active 600 violet); nav section headers 600 10.5px uppercase with 1px letter-spacing; Note title 600 13.5px; Note body 13px; source 12px.
- IBM Plex Mono for the breadcrumb (12px, "Docs  /  Section  /  Page"), every axis label (11.5px), release badges (500 11px) and value callouts (500 11.5px).

Layout:
- Left nav 196px wide: a 20px violet rounded-square logo with the product name, a search field with a "/" key hint, grouped section links with the current page highlighted (tinted 24px row, 3px violet left bar).
- Main column from x = 236 to 920: breadcrumb at the top, H1, lead, then the Note callout (52px tall, 6px radius), then the chart, then a 1px rule with "Source: ..." on the left and a violet "Edit this page" link on the right.

Axes and grid:
- Horizontal gridlines only, 1px #F1F2F4, with a #D1D5DB baseline. Y labels right-aligned in mono with the unit ("KB") above the axis. X labels in mono under each point, with the year on a second line under the first point of each year. No axis lines on the sides.

Marks:
- Line chart: one 2.5px #7C3AED straight-segment line with a 6% violet area wash down to the baseline. Points are r 4 white circles with a 2px violet stroke; the latest point is a filled r 5 violet dot. Each point carries a pill badge (50 x 19 px, fully rounded) with its release tag, sitting 13px above the point, or below or beside it where the line would cross it. The latest badge is solid violet with white text. Direct value callouts only for the peak and the latest point.
- Bar chart: slim vertical bars in #7C3AED at 45% of the band with 4px top corners, the release tag badge above each bar, bars over the budget with the red badge treatment, and the same dashed budget line and badge.
- Budget line: 1.5px #D97706 dashed 6 on 4, labeled with a small rounded badge "budget 50 KB" in mono, placed where it does not touch the data.

Avoid: multiple series colors, heavy borders, shadows, gradients beyond the faint area wash, serif fonts, and any badge overlapping another badge or label.

When you're done, render the chart and check that every badge is fully legible and clear of the line, the Note callout reads as documentation rather than an alert, the budget badge touches nothing, and the H1's numbers match the data.