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

Portfolio Glance line chart, light theme: A retail investing app balance with an emerald area line and time range pills.

Portfolio Glance

LightLine

A retail investing app balance with an emerald area line and time range pills.

  • Emerald#0BA360
  • Deep Emerald#07804A
  • Mint Chip#E3F8EE
  • Ink#111827
  • Cool Gray#6B7280

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 "Portfolio Glance" 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 home screen of a friendly retail investing app. A clean white canvas, one fresh emerald series with a soft gradient beneath it, a big balance figure and cool gray for everything secondary. No gridlines, no chart furniture, just the shape of the money.

Colors (use these exact values):
- Canvas: #FFFFFF, edge to edge, no card or border.
- Primary series: #0BA360 (emerald). Area fill: a vertical gradient of #0BA360 from 22% opacity at the top of the plot, 7% at 60% down, to 0 at the bottom.
- Change chip: #E3F8EE background with #07804A (deep emerald) text and triangle.
- Selected time range pill: solid #0BA360 with white text.
- Text: #111827 (balance, tooltip value, finding), #6B7280 (labels, unselected pills), #9CA3AF (cents, month labels, dates, source).
- Scrubber rule and tooltip border: #E5E7EB. Previous-close dashes: #9CA3AF.
- Additional series if my chart has them: #6B7280 at 2px, then #9CA3AF dashed; the emerald stays reserved for the main series.

Typography (Google Fonts): Plus Jakarta Sans only, tabular figures everywhere (font-variant-numeric: tabular-nums).
- Account label 14px 500 #6B7280. Balance 52px 800 with -1.6px letter-spacing, the cents as a 30px 700 #9CA3AF tail. Chip text 13.5px 700. Finding sentence beside the chip 14px 600. Tooltip date 11.5px 600, tooltip value 16px 800. Month labels 12px 500. Pills 13.5px (700 selected, 600 otherwise). Source 11px 500.

Layout:
- 56px side margins. Top left: a one-line label naming the account, measure, unit and frequency ("Individual account · Total balance, US dollars, weekly close"); top right: "As of <date>" in #9CA3AF.
- Below it the balance (the latest value), then a 28px pill chip (fully rounded) with a small solid up triangle and "+$6,904.12 (+16.7%)", followed by a plain-language finding ("Your portfolio grew over the past year").
- The area chart fills the middle of the canvas, roughly y 200 to 500, full width between the margins.
- A centered row of six 52 x 30px pills beneath the chart (1D 1W 1M 3M 1Y All), 10px apart; only the selected one gets a fill. Source line bottom left.

Axes and grid:
- No gridlines, no axis lines, no y-axis labels at all: the balance, tooltip and previous-close label carry the numbers.
- Month abbreviations centered under the plot at 12px #9CA3AF.
- A dashed previous-close line across the full plot at the starting value: 1.2px #9CA3AF, dash 2 5 with round caps, labelled right-aligned just under it ("Previous close 1Y ago · $41,312") on a white knockout.

Marks:
- Line chart: a 2.75px smooth monotone line in #0BA360 with round caps and joins over the gradient area. A 4px emerald dot with a 2px white ring at the last point. A scrubber at one point of interest: a 1.5px #E5E7EB vertical rule through the plot, an 11px #0BA360 halo at 16% opacity, and a 5.5px white dot with a 3px emerald ring. Above it a floating white tooltip (150 x 50px, 10px radius, 1px #E5E7EB border, shadow 0 6px 18px #111827 at 10%) with the date in gray and the value in bold ink.
- Bar chart: slim #0BA360 bars (about 55% of the band) with 6px fully rounded tops over a soft #E3F8EE backdrop column for the selected bar only; no gridlines, the same dashed reference line at the comparison value, and the same scrubber tooltip above the selected bar. Other bars can drop to 45% opacity when one is selected.

Avoid: gridlines, axis boxes, a second saturated color, red unless the change is negative (then use #D93F3F on #FDECEC for the chip and line), heavy shadows on the chart itself, serif or condensed fonts.

When you're done, render the chart and check that the change chip's dollar and percent figures match first and last values, only one pill is selected, the tooltip sits fully inside the canvas without covering the line, and the previous-close label does not touch the area line.