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

Skills Matrix bar chart, dark theme: A midnight competency framework with slim paired bars and orange shortfall flags.

Skills Matrix

DarkBar

A midnight competency framework with slim paired bars and orange shortfall flags.

  • Deep blue#1D3F8F
  • Blue#2566C4
  • Sky#1FA0DC
  • Cyan#45DDF2
  • Gap orange#FF9447
  • Midnight#0B1430

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 "Skills Matrix" 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 competency framework from a talent platform on midnight blue. Structured like a rubric, with a cool blue-to-cyan proficiency scale and one warm orange that only ever means "short of the bar".

Colors (use these exact values):
- Background: #0B1430 (midnight blue). Bar tracks: #16224A. Section rules: #1F2C58.
- Sequential proficiency ramp, low to high: #1D3F8F, #2566C4, #1FA0DC, #45DDF2. The scale strip uses all four; required values use #2566C4; current values use #45DDF2; section headers and eyebrow use #1FA0DC.
- Gap flags: #FF9447 (orange) with #0B1430 text.
- Text: #E8EEFA primary, #8C9AC0 secondary.

Typography (Google Fonts):
- Sora 600 for the title (27px, -0.4px letter-spacing, stating the finding) and section headers (11px uppercase, 2px letter-spacing).
- Karla for everything else: eyebrow 11.5px 700 uppercase with 2px letter-spacing; subtitle 15px #8C9AC0; legend 13px 600; row labels 14.5px 500 indented 16px under their section; scale labels 11.5px 600 #8C9AC0; gap values 13px with tabular figures.

Layout:
- 56px margins. Eyebrow, title, subtitle, a one-line legend (pill swatches for current and required, a flag swatch for shortfall).
- A scale strip above the rows spanning the bar area (about x 248 to 808): four 4px rounded segments in the ramp, each labeled at its right end ("1 Awareness", "2 Working", "3 Practitioner", "4 Expert"), and a "GAP" column header at about x 856.
- Rows grouped under section headers (section name followed by a 1px rule to the right margin), 28px per row, 6px extra space between sections.

Axes and grid:
- No axis lines or gridlines: the full-length tracks and the scale strip carry the scale.

Marks:
- Bar chart (grouped horizontal): per row, two slim 8px bars with fully rounded ends, current on top and required 3px below, each over its own full-scale #16224A track. In the gap column, rows that fall short get an orange flag (44 x 20 with a 6px notch cut into the right end) with the shortfall printed as "−1.2" in bold midnight; rows at or above the bar show "+0.1" in #8C9AC0.
- Line chart: plot each series as a 2.5px line (current #45DDF2, required #2566C4 dashed 5 on 4 off) with 4px dots over horizontal #16224A track bands, and hang an orange flag at the right end of the chart for each period where current is below required.

Avoid: orange anywhere except shortfalls, gradients on bars, square bar ends, thick bars, gridlines, and a separate numeric axis.

When you're done, render the chart and check that every flagged row really falls short, the gap numbers equal current minus required, the section groupings are intact, and the four-step scale strip reads light to dark in the right direction.