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

Head Efficiency line chart, dark theme: Engineering test curves on slate with diamond optimum markers and a range band.

Head Efficiency

DarkLine

Engineering test curves on slate with diamond optimum markers and a range band.

  • Deep slate#141A1F
  • Cyan#5CC8F2
  • Sea green#3AA372
  • Pale gold#E8CF7A

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 "Head Efficiency" 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 performance-test plot from an engineering report, shown on a dark console. Precise and clean: three luminous curves, diamond markers at the optimum, and one quiet shaded range.

Colors (use these exact values):
- Page: #141A1F (deep slate).
- Series: #5CC8F2 (cyan), #3AA372 (sea green), #E8CF7A (pale gold), in that order.
- Ink: #E6EBEF. Secondary text: #8C99A5. Gridlines: #26303A. Baseline: #4A5663.
- Operating range band: #FFFFFF at 5% opacity, bounded by 1px #FFFFFF lines at 22% opacity dashed 3 3.

Typography (Google Fonts): Titillium Web for all text.
- Eyebrow 12px 600 uppercase, 2.4px letter-spacing, #8C99A5 (site / test name).
- Title 700, 32px, #E6EBEF, sentence case, stating the finding. Subtitle 400, 15px, #8C99A5, stating measure, unit and what the markers mean.
- Band label 11.5px 600 uppercase with 1.6px letter-spacing, #E6EBEF, centered 10px above the band. Axis numbers 13px #8C99A5; axis title 13px 600 #E6EBEF. Marker labels 14px 700 in the series color. Series labels 15px 700 in the series color with a 12.5px #8C99A5 note under them. Source 12px.

Layout:
- 56px margins. Eyebrow at y 50, title at y 90, subtitle at y 118.
- Plot from x 96 to 790, y 176 to 500, leaving the right 110px for direct series labels at the line ends, nudged apart to at least 34px.
- X-axis title right aligned under the axis numbers.

Axes and grid:
- Horizontal 1px #26303A gridlines with percentage labels right aligned 12px left of the plot; no vertical gridlines, only 6px ticks below a 1.2px #4A5663 baseline.

Marks:
- Line chart: 2.6px smooth curves with round caps, no point markers. Each series' optimum (maximum) gets a 7px-radius diamond in the series color with a 2px page-colored outline, labeled "93.4% at 94 m" style above or below wherever it clears the other curves. The operating range is a faint vertical band behind everything.
- Bar chart: square-cornered bars in the three series colors (grouped if there are several series), 2px page-colored gaps, starting at zero; mark each series' best bar with a small diamond above it and the same label; the operating range as the same faint band behind the bars.

Avoid: glows, gradients, area fills, a legend box, thick gridlines, and white data marks.

When you're done, render the chart and check that the sea green and cyan curves stay distinguishable where they cross, no diamond label sits on another curve, the right-hand labels are in the same vertical order as the line ends, and every optimum quoted is the true maximum of its series.