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

Commodity Mix bar chart, dark theme: Bright 100% stacked columns on dark slate with commodity codes in rounded tags.

Commodity Mix

DarkBar

Bright 100% stacked columns on dark slate with commodity codes in rounded tags.

  • Dark slate#161B22
  • Intermodal cyan#06B6D4
  • Grain gold#EAB308
  • Chemicals lilac#A78BFA
  • Coal gray#6B7280
  • Automotive red#EF4444

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 "Commodity Mix" 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 freight railroad's traffic dashboard on dark slate. A punchy condensed headline, bright commodity colors, and short commodity codes in rounded tags like waybill codes.

Colors (use these exact values):
- Page: #161B22 (dark slate). Tag and pill panels: #1F2630.
- Series, in stack order from the bottom: #06B6D4 (intermodal, cyan), #EAB308 (grain, gold), #A78BFA (chemicals, lilac), #EF4444 (automotive, red), #6B7280 (coal, gray).
- Primary text: #E6EDF3. Secondary text: #8B949E. Gridlines: #2D3540. Dark text on bright fills: #0D1117; white #FFFFFF on the gray.

Typography (Google Fonts):
- Anton 42px uppercase for the title, #E6EDF3, 0.8px letter-spacing, stating the finding.
- Roboto Condensed for everything else: eyebrow 700 13px uppercase with 2.4px letter-spacing in cyan; subtitle 400 17px #8B949E; axis labels 500 14px; period labels 600 14px; values inside segments 700 14px; tags 700 12px with 1px letter-spacing; legend names 500 14px.

Layout:
- 48px margins. Eyebrow, title, subtitle, then the plot from x 96 to 764 and y 196 to 480.
- A right column (from x 784) of legend entries aligned to the middle of each segment of the last column: a rounded tag (38 x 20px, fully rounded, filled with the series color, the code such as "IMX" in dark or white text) followed by the full name.
- Years grouped under the period labels with a 1.5px #2D3540 line and a rounded #1F2630 pill holding the year.
- Footer: "Source: ..." left and a short definition of the measure right, 12.5px #8B949E.

Axes and grid:
- Horizontal 1px #2D3540 gridlines at 0, 25, 50, 75 and 100%, labels 500 14px #8B949E right-aligned.
- No vertical axis line; the highlighted period's label turns #E6EDF3.

Marks:
- Bar chart: 100% stacked columns 58px wide, square corners, segments separated by a 2px #161B22 stroke. Print each segment's value centered in it when the segment is at least 18px tall.
- Callout: above the column where the lead changes, a rounded pill (#1F2630 fill, 1.2px cyan stroke, 26px tall) reading "IMX 30% PASSES COL 29%" in 700 13px, with a short 1.2px stem down to the column.
- Line chart: one 2.5px line per series in the same colors (or a 100% stacked area with 2px #161B22 seams), with the rounded code tags as end labels at the right edge and the same pill callout at the crossover.

Avoid: gradients, glows, rounded bar corners, a boxed legend, thin hairline text on bright fills, and more than five series colors.

When you're done, render the chart and check that every column sums to 100%, value text is readable on every fill (dark on bright, white on gray), the right-column tags line up with the last column's segments, and the callout names the right period.