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

Unit Dispatch bar chart, light theme: Hourly stacks in industrial safety colors under a black stepped dispatch line.

Unit Dispatch

LightBar

Hourly stacks in industrial safety colors under a black stepped dispatch line.

  • Safety blue#1F5FA8
  • Safety green#3B8C4A
  • Machine gray#9CA1A6
  • Safety orange#E07A1F
  • Line black#16181A

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 "Unit Dispatch" 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 power station's daily dispatch log, printed clean on white. Industrial safety colors, one hard black line, bold totals, no ornament.

Colors (use these exact values):
- Background: #FFFFFF.
- Series, in stack order from the bottom: #1F5FA8 (safety blue), #3B8C4A (safety green), #9CA1A6 (machine gray), #E07A1F (safety orange). Use them in this order; add no other hues.
- Target or demand line, totals and title: #16181A. Secondary text and tick labels: #5C6166. Gridlines: #E3E5E7.

Typography (Google Fonts):
- Archivo for everything. Eyebrow 11px 600 uppercase with 1.6px letter-spacing in #5C6166. Title 24px 700 with -0.3px letter-spacing in #16181A stating the finding. Subtitle 14px 400 #5C6166 with measure, unit and what the line means.
- Legend unit names 11px 700 uppercase with 1px letter-spacing; ratings under them 11px 400 #5C6166. Tick labels 11px. Stack totals 9.5px 700 #16181A.

Layout:
- 48px side margins. A 5 x 46 px black bar at the top left beside the eyebrow and title.
- A narrow capacity legend bar (7px tall) spanning the full chart width under the subtitle: one segment per series in its color, each segment's width proportional to that unit's rating, 2px gaps, with the name and "400 MW coal steam" under each segment's left edge.
- The legend for the line (a small black step glyph plus "DISPATCH TARGET") sits top right, level with the eyebrow.
- Chart from about x 80 to 912, footer rule at y 560 with "Source: ..." on the left and a one-line summary on the right.

Axes and grid:
- Y axis from zero, labels right-aligned 10px left of the plot, unit ("MW") above the top label. Horizontal gridlines 1px #E3E5E7, no vertical gridlines, no y-axis line.
- A 1.2px #16181A baseline. Category labels (two-digit hours) 11px centered under each bar; highlight the categories the title talks about in 700 #16181A. An axis note ("Hour beginning") right-aligned under the labels.

Marks:
- Bar chart: stacked vertical bars 72% of the slot width, square corners, 1px white separators between segments. A 1.5px #16181A stepped line for the target runs across the stack tops, flat across each full slot with vertical risers between slots. Each stack's total sits 7px above the higher of the bar top and the line, centered.
- Line chart: 2.25px lines in the same four colors with straight segments and small square markers (5px) at each point, the target or demand as a 1.5px black stepped line, and direct labels at the right end of each series in 11px 700 uppercase.

Avoid: rounded bars, gradients, shadows, pastel tints, a boxed legend, gridlines in color, and more than one line style.

When you're done, render the chart and check that the totals don't collide with the stepped line, the capacity legend segments are proportional to ratings, stack order matches the legend order, and the title's claim is true for the data.