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

Project Results bar chart, dark theme: A navy results framework with status dots, teal progress bars and target ticks.

Project Results

DarkBar

A navy results framework with status dots, teal progress bars and target ticks.

  • Deep navy#101828
  • Achieved teal#2DD4BF
  • Target white#FFFFFF
  • Baseline gray#98A2B3
  • Lagging red#F87171

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 "Project Results" 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 results framework dashboard for a mid-term project review on deep navy. Every row reads left to right: status, indicator, progress from baseline to target, percent achieved.

Colors (use these exact values):
- Background: #101828 (deep navy). Alternate row bands: #141E30 with 6px corners. Bar track: #1D2939.
- Achieved bars and over-target percentages: #2DD4BF (bright teal).
- End target tick and headline text: #FFFFFF. Baseline tick: #98A2B3.
- Status dots: #4ADE80 (90% of target or more), #FBBF24 (70 to 89%), #F87171 (below 70%; also the lagging note).
- Row text #E7ECF3, secondary text #8C98AD.

Typography (Google Fonts):
- Montserrat 700 for the title (27px white, stating the finding) and 800 for the percent achieved at the right of each row (17px, white, teal when 100% or more).
- Open Sans for everything else: eyebrow 11px 600 uppercase with 1.6px letter-spacing in teal; subtitle 14px #8C98AD; key 12px; column headers 10px 700 uppercase with 1.4px letter-spacing; indicator names 13.5px 600; detail lines 11px #8C98AD ("26,400 of 30,000 households, from 12,000").

Layout:
- 56px margins. Eyebrow, title, subtitle, then a key row showing the three mark types and the three status colors.
- Column headers: "OUTCOME INDICATOR" left, scale labels (0%, 50%, 100%) over the bars, "OF TARGET" right-aligned.
- Left column from x 56 to about 360: a status dot (r 5) then the indicator name with its detail line below. Bars from x 380 to 812 on a shared 0 to 120% of target scale. Percent achieved right-aligned at x 904.
- Rows 42px tall, every other row on a #141E30 band. Sort rows by percent achieved, highest first.
- Footer: a one-line red note naming the lagging indicator, source right-aligned.

Axes and grid:
- No gridlines and no axis lines: the full-width #1D2939 track (14px tall, 3px corners) and the white target tick give the scale.

Marks:
- Bar chart: the achieved share of target as a 14px teal bar with 3px corners over the track; the baseline as a 2.5px #98A2B3 tick 3px taller than the bar on each side; the end target as a 2.5px white tick 5px taller than the bar on each side at 100%. Bars past 100% continue across the target tick.
- Line chart: one small panel per indicator, a 2px teal line of achieved values against time, a dashed white target line, a gray baseline dot, and the percent achieved in Montserrat 800 at the right.

Avoid: color on the bars other than teal, gridlines, 3D, gauges or donuts, and more than three status colors.

When you're done, render the chart and check that every percent equals achieved divided by target, the status dot colors follow the thresholds, the count in the title matches, and long indicator names end before the bars begin.