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

Microsite bar chart, dark theme: A near-black studio microsite with pixel labels, dotted rules and one hot orange.

Microsite

DarkBar

A near-black studio microsite with pixel labels, dotted rules and one hot orange.

  • Black#111111
  • Hot orange#FF6A00
  • Silver#A7A7A7
  • Graphite#5E5E5E
  • Dotted rule#3A3A3A

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 "Microsite" 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 design studio's fixed-width microsite from the early 2000s. Near-black, pixel type, dotted rules, one hot orange accent and a lot of discipline.

Colors (use these exact values):
- Page: #111111. Panel: #151515. Dotted rules and panel border: 1px #3A3A3A dashed 1/2.
- Accent: hot orange #FF6A00 for the primary segment, the active nav link and the enter link only. Secondary segments: silver #A7A7A7, then graphite #5E5E5E.
- Highlight edges: #FF9A4D on orange, #D6D6D6 on silver, #8A8A8A on graphite.
- Text: #F2F2F2 heading, #CFCFCF legend, #8A8A8A axis, #7A7A7A meta, #555555 footer. Registration marks: #6E6E6E.

Typography (Google Fonts):
- Silkscreen for all small labels, caps: nav 11px, meta and axis 10px, legend 10px, footer 8 to 9px.
- Arimo 700 for the single heading: 26px, -0.3px letter-spacing, a sentence stating the finding.

Layout:
- A 5px loading strip across the very top: #1C1C1C track, an orange gradient fill (35% to full) to about 72% and a trail of fading orange blocks, with a "LOADING DATA 72%" label at the right.
- Centered nav row of bracketed links, "[ STATS ]" style, the active one orange; a dotted rule under it.
- A centered fixed-width panel (about 690px) with a dotted border and crosshair registration marks (6px circle plus 22px cross) just outside each corner.
- Inside: breadcrumb meta at left and a tiny version number at right, heading, pixel subtitle with measure and unit, a legend row of 10px square swatches, the chart, then a dotted rule and a footer row with "[ ENTER ]", the source and a build number.

Axes and grid:
- Dotted #3A3A3A horizontal gridlines, a solid #6E6E6E baseline, compact labels (5K) in Silkscreen, right-aligned 10px left of the plot. Month labels in caps below; the latest one orange.

Marks:
- Bar chart: stacked columns with square corners, 30px wide, 1px dark gaps between segments, a 1px highlight line along the top edge of each segment and a 60% highlight on its left edge. The total over the latest bar in #F2F2F2 and the primary share printed inside its orange segment in #111111.
- Line chart: 2px square-cornered polylines (miter joins), orange for the primary series and silver or graphite for the rest, 5px square markers with a 1px highlight edge, the latest value labeled in Silkscreen.

Avoid: rounded corners, gradients on data, glows, more than one accent color, large pixel text, and em dashes.

When you're done, render the chart and check that orange appears only on the primary series and the two navigation accents, the pixel labels stay crisp, and the registration marks sit outside the panel corners.