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

Admin Panel line chart, light theme: A back-office card with nav rail, KPI pills and a pinned crosshair tooltip.

Admin Panel

LightLine

A back-office card with nav rail, KPI pills and a pinned crosshair tooltip.

  • App gray#F3F4F6
  • Primary blue#2563EB
  • Previous gray#9CA3AF
  • Delta green#15803D
  • 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 "Admin Panel" 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 analytics page of a light SaaS back office. Quiet gray app chrome, one crisp white card, a primary blue series against a dashed gray comparison, and a pinned hover tooltip, as if a product manager just stopped the cursor on an interesting day.

Colors (use these exact values):
- App background: #F3F4F6. Nav rail, header bar, card and tooltip: #FFFFFF.
- Borders and the zero line: #E5E7EB. Gridlines: #F0F1F4.
- Primary ink: #111827. Secondary text: #6B7280. Axis labels and the source line: #9CA3AF.
- Primary series: #2563EB (blue), with an area fill from #2563EB at 12% opacity at the top to 0% at the baseline. The active nav item sits on #EFF6FF.
- Comparison (previous period) series: #9CA3AF, dashed.
- Positive deltas: #15803D text on a #DCFCE7 pill.

Typography (Google Fonts):
- Inter throughout, with tabular figures (font-variant-numeric: tabular-nums) for every number.
- Page title 21px 600, -0.4px letter-spacing, #111827, stating the finding. Subtitle 13px 400 #6B7280 naming the product, measure, unit and both periods.
- KPI labels 12.5px 500 #6B7280; KPI values 26px 600, -0.6px letter-spacing; delta pills 12px 600.
- Breadcrumb 13px (parent 500 #6B7280, current page 600 #111827), legend 12.5px 500, axis labels 12px 400 #9CA3AF, tooltip title 12.5px 600, tooltip rows 12px.

Layout:
- App chrome frames the chart: a 64px white nav rail on the left (1px #E5E7EB right border) with a 32px #2563EB rounded-square logo (8px radius) at top, five 1.8px outline icons in #9CA3AF 48px apart, the active one in #2563EB on a 40 x 36 #EFF6FF tile (8px radius) with a 3 x 24 blue indicator bar at the rail edge, and a 28px avatar circle at the bottom.
- A 60px white header bar with a 1px bottom border: breadcrumb ("Analytics > Signups") at left; at right a date-range picker (216 x 32, 8px radius, 1px border, calendar icon, "Aug 1 – Aug 28, 2026", chevron) and a dark #111827 "Export CSV" button (8px radius, white 12.5px 600 text).
- Title and subtitle sit on the gray background above the card, aligned with the card's left edge.
- One white card (12px radius, 1px #E5E7EB border, shadow 0 1px 1.2px rgba(17,24,39,0.06) plus 0 4px 8px rgba(17,24,39,0.04)) holds a KPI row (four stats about 208px apart, separated by 1px vertical rules), a 1px divider, the legend row, the plot, and a footer with the source at left and "Updated 5 min ago" at right.

Axes and grid:
- Horizontal gridlines only, 1px #F0F1F4, with the zero line in #E5E7EB. No axis lines, no ticks.
- Y labels right-aligned 14px left of the plot; x labels 24px below the baseline, first label left-aligned and last right-aligned.
- Five y gridlines at round values; five date labels.

Marks:
- Line chart: current period as a 2.5px #2563EB monotone-smoothed line with round caps over its soft area fill; previous period as a 2px #9CA3AF line dashed 5 on 4 off, no fill. No point markers except at the crosshair.
- Bar chart: grouped bars per category, current period #2563EB and previous period #9CA3AF at 45% opacity (or outlined with a 1.5px dashed #9CA3AF border), 6px top corner radius, 4px gap within a pair; highlight the hovered category with a #F3F4F6 column behind it instead of a crosshair.
- Legend in the card above the plot: an 18px line swatch per series (dashed for the comparison) and its label; "Signups per day" style unit label right-aligned on the same row in #9CA3AF.

Labels and annotation:
- KPI row: each stat has a label, a big value and a green delta pill right after the value (22px tall, fully rounded, #DCFCE7 fill, a small #15803D up triangle and the percentage in #15803D). Compute every delta from the data against the previous period.
- Pinned crosshair on one interesting point: a 1px #111827 line at 25% opacity through the full plot height, a 5px blue dot with a 2.5px white ring on the current line and a hollow 4.5px dot with a 2px #9CA3AF stroke on the comparison line.
- Tooltip beside the crosshair: 178px wide white card, 8px radius, 1px border, shadow 0 6px 16px rgba(17,24,39,0.14); a bold date, one row per series (swatch, label, right-aligned 600 value), a 1px divider and a "Change" row with the green percentage.

Avoid: dark mode, gradients other than the soft area fill, heavy borders, more than one accent color, vertical gridlines, legends placed outside the card, and red unless a delta is actually negative (then use #B91C1C on #FEE2E2).

When you're done, render the chart and check that the nav rail and header read as app chrome without competing with the card, every pill's percentage matches the data, the tooltip does not cover the pinned points, and the dashed comparison line is clearly quieter than the blue line.