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

Archive Share bar chart, dark theme: Edit suite report of 100% stacked bars in amber, archive blue and soft gray.

Archive Share

DarkBar

Edit suite report of 100% stacked bars in amber, archive blue and soft gray.

  • Suite black#111111
  • Original amber#F2C57C
  • Archive blue#7D93B0
  • Graphics gray#D6D6D6

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 "Archive Share" 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 report printed from a documentary edit suite. Near-black, a wide contemporary grotesque, soft amber for what the crew shot and a desaturated archival blue for bought-in footage. Calm, modern and editorial.

Colors (use these exact values):
- Background: #111111.
- Series 1 (the primary share, e.g. original footage): #F2C57C (pale amber).
- Series 2 (e.g. archive footage): #7D93B0 (desaturated blue).
- Series 3 (e.g. graphics or other): #D6D6D6 (soft gray).
- Primary text: #F4F1EA. Secondary text: #8E8C88. Rules: #2A2A2A. In-bar labels: #111111. Non-highlighted side values: #C9C6C0; their proportional rules #4A4A4A.

Typography (Google Fonts):
- Syne throughout. Title 700 34px with -0.6px letter-spacing, stating the finding; second line 400 18px #8E8C88. Eyebrow 600 12px uppercase with 2.4px letter-spacing. Legend 600 13px. Row labels: a 700 11px uppercase kicker with 1.6px letter-spacing ("EP 4") over a 500 15px name (700 for the highlighted row). In-bar percentages 700 13px. Side values 600 16px (700 19px for the highlight). Axis ticks 600 11px. Source 12px.

Layout:
- Eyebrow, title and second line at top left (x 56). A legend row at y 172 starting over the bar column, with a small uppercase column header ("LICENSING") right-aligned at x 904; a 1px #2A2A2A rule under it.
- Row labels in the left column (x 56 to about 250), bars from x 262 to 762, a side value column right-aligned at x 904. Rows 48px apart, bars 30px tall.
- A footer rule near the bottom with a one-line note and the source on the left, a bold total on the right.

Axes and grid:
- No y axis. A single dotted 50% reference line (1px #8E8C88, 2 on 4 off) through all rows, with 0%, 50% and 100% labeled under the last row.

Marks:
- Bar chart: 100% stacked horizontal bars, square-cornered, with 3px gaps (background showing) between segments. Print the percentage centered in each segment of 8% or more, dark on the light fills. Outline the most notable row with a 1px #F4F1EA box 5px outside the bar and color its kicker amber.
- Line chart: stacked 100% area bands in the same three fills separated by 2px #111111 lines, with percentages printed inside the bands at the last point and the same outlined highlight on one period.
- Side column: a second measure printed as text (e.g. "$62k") with a thin 2px proportional rule under it, right-aligned; never a second axis.

Avoid: rounded bars, gradients, glows, saturated colors, pure white text, gridlines other than the 50% reference, and a dual axis.

When you're done, render the chart and check that each bar sums to exactly 100%, in-bar labels fit their segments, the highlighted row is the one the title names, and the side column total is correct.