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

Heat Rate bar chart, dark theme: Graphite bullets with steel actuals, green design ticks, amber tolerance and red gaps.

Heat Rate

DarkBar

Graphite bullets with steel actuals, green design ticks, amber tolerance and red gaps.

  • Graphite#1B1D20
  • Pale steel#B7C2CC
  • Design green#6CD37A
  • Gap red#F2645A
  • Tolerance amber#94702C

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 "Heat Rate" 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 plant performance review on a graphite screen. Serious and engineered: every unit gets a quiet bullet column, the design target is a bright green tick, and only the shortfalls speak in red.

Colors (use these exact values):
- Background: #1B1D20. Gridlines and panel rules: #2E3237, 1px.
- Qualitative range bands, a visible ramp: #26292D (zero to target, near-background), #4F565F (mid gray, within 3% worse than target), #94702C (muted amber, 3 to 6% worse). The three must be easy to tell apart in the legend and behind each bar.
- Actual bar: #B7C2CC (pale steel). Target or design tick: #6CD37A (bright green), also used for the eyebrow and target figures.
- Shortfall figures: #F2645A (red). Primary text: #E6E9EC. Secondary text: #8B9199.

Typography (Google Fonts):
- Exo 2 throughout. Eyebrow 12px 600 uppercase with 2px letter-spacing in green. Title 27px 700 #E6E9EC stating the finding. Subtitle 15px 400 #8B9199 with measure, unit, period and which direction is better.
- Category names 15px 700, descriptors 12px #8B9199, and a value line "10,120 vs 9,650" in 12px with the actual in steel 600 and the target in green 600. Shortfall figures 18px 700 red ("+470"); better-than-target figures 15px 600 #8B9199 with a minus sign.

Layout:
- 56px margins. A legend row under the subtitle: steel swatch "Actual", a 22 x 3 px green bar "Design", then the three range swatches with their meanings.
- Chart from about x 120 to 904 and y 186 to 486, categories in equal slots. Footer "Source: ..." left and a measurement note right, 12px.

Axes and grid:
- Y axis from zero with thousands separators, labels right-aligned, 1px #2E3237 gridlines extending 16px left of the plot. A 1px #8B9199 baseline. No y-axis line.

Marks:
- Bar chart (vertical bullets): per category a 64px wide range column built from the three bands (from zero, to target x 1.03, to target x 1.06), a 24px wide #B7C2CC actual bar from zero, square ends, and a 44 x 3 px green target tick centered on the column. Place the gap figure 12px above whichever is higher, the bar or the range column. For horizontal bullets use the same widths as heights and put the figure past the bar end.
- Line chart: a 2.5px #B7C2CC actual line with 5px steel dots, a 2px #6CD37A stepped target line, and the tolerance bands as horizontal #4F565F and #94702C strips just above the target; label shortfall points in red and leave good points unlabelled.

Avoid: truncated axes (bars start at zero), gradients, glows, rounded bars, colored bars other than steel, range bands so close in tone they read as one, and green used for anything except the target.

When you're done, render the chart and check that the red figures equal actual minus target, the title count matches the number of red figures, labels clear the range columns, and the green ticks are visible against the steel bars.