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.

Show more styles

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

Liquid Metal line chart, light theme: A thick liquid chrome line and glossy spheres in a bevelled silver pill panel.

Liquid Metal

LightLine

A thick liquid chrome line and glossy spheres in a bevelled silver pill panel.

  • Mist#E6ECF3
  • Silver Blue#C9D3DE
  • Chrome Edge#5E6E84
  • Core White#FFFFFF
  • Ink#1F2A3A

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 "Liquid Metal" 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: turn-of-the-millennium chrome futurism, like the product sheet for a media player skin. Cool, polished and optimistic: brushed metal, liquid chrome and glossy ball bearings on a pale silver-blue stage, still clean enough for a real report.

Colors (use these exact values):
- Background: a vertical gradient from #E6ECF3 (top) to #C9D3DE (bottom) over the whole canvas.
- Panel: a vertical gradient from #F4F7FA to #DDE4EC.
- Chrome line layers, bottom to top: #4B5A70, #8B9BB0, #C8D3DF, #FFFFFF.
- Chrome edge and accent ink: #5E6E84. Specular highlights: #FFFFFF.
- Title and value ink: #1F2A3A. Secondary text: #5B6B80. Gridlines: #B3BFCD with a #FFFFFF line 1px below; baseline #8795A8.
- Brushed aluminium strip: horizontal gradient #AEB8C4, #D9DFE6, #B7C1CC, #E3E8EE, #A9B4C1; text on it #34414F.
- If a second series is unavoidable, make it a thinner (6px) chrome line tinted #5E6E84 and label it directly; never add a second bright color.

Typography (Google Fonts):
- Michroma 400 for the title (25px, #1F2A3A, sentence case, 0.5px letter-spacing, stating the finding) and the small footer tag (11px, 2px letter-spacing, uppercase).
- Exo 2 for everything else: eyebrow 12px 600 uppercase with 3px letter-spacing in #5E6E84; subtitle 15px 500 #5B6B80 with measure, unit and period; axis labels 13px 500; year or category labels 14px 700 with 2px letter-spacing in #1F2A3A; callout pills 13px 700; source 13px 600.

Layout:
- 48px left margin. Eyebrow at y 62, title at y 100, subtitle at y 128.
- The plot sits in a pill-shaped panel (x 36, y 152, 888 x 374, corner radius 56) with a soft drop shadow (dy 8, blur 10, #4A5A70 at 22%), a 1.5px bevel stroke graded #FFFFFF to #B4C0CE to #7F8EA2 top to bottom, and a 1px inner #FFFFFF line (70% opacity) inset 4px.
- Plot area inside the panel from x 118 to 872 and y 196 to 470.
- A full-bleed brushed aluminium strip from y 552 to the bottom: the gradient above plus 1.5px-spaced horizontal hairlines (0.7px) alternating #FFFFFF and #7D8898 at random 6 to 28% opacity, with a 1.5px #FFFFFF top edge over a 1px #7F8EA2 line. "Source: illustrative data" at the left, the footer tag at the right.

Axes and grid:
- No axis lines except the baseline (1.2px #8795A8 with a 1px #FFFFFF line under it, an engraved look). Three or four engraved gridlines (1px #B3BFCD plus 1px #FFFFFF directly below).
- Y labels right-aligned 14px left of the plot ("500k", "1,000k"). Period labels centered under their span, with 6px #8795A8 tick marks at period starts.

Marks:
- Line chart: one thick liquid chrome tube drawn as stacked strokes on the same smooth monotone path, round caps and joins: 13px #4B5A70, 10px #8B9BB0, 6.5px #C8D3DF shifted up 0.8px, then a 2.6px #FFFFFF core shifted up 1.8px so the highlight rides the top edge. Underneath, a blurred drop shadow (12px #3A475A at 35%, offset 9px down, blur 6). A faint area wash under the line (#8FA3BC from 28% to 0% opacity). Every sixth point gets a glossy sphere (r 7): radial gradient #FFFFFF, #C6D1DE, #5E6E84, #3E4B5E from an upper-left focus, 0.8px #475569 outline, a small #FFFFFF highlight dot up and left of center, and a 25% dark shadow disc 2px below. The latest point gets a larger sphere (r 10).
- Bar chart: vertical bars as chrome tubes with fully rounded tops (radius half the bar width, about 40px wide): a horizontal gradient #4B5A70, #8B9BB0, #FFFFFF near 35% of the width, #C8D3DF, #5E6E84, a thin 3px #FFFFFF highlight stripe down the left third, the same soft drop shadow, bars starting at zero on the engraved baseline. Value labels in chrome pills above the bars; highlight the key bar with a glossy sphere cap on its top.

Labels and annotation:
- Callouts are chrome pills: 26px tall, fully rounded, a vertical gradient #FFFFFF, #D5DDE7, #B9C5D3 (hard break at the middle), #E9EEF4, a 1px #8795A8 outline and a 9px #FFFFFF gloss bar at 55% across the top half, with Exo 2 13px 700 #1F2A3A text. Connect them to points with 1px #8795A8 leader lines.
- Label the latest value and one milestone (for example the first month past a round number). Put a small bold #5E6E84 value beside the first point.

Avoid: saturated colors, neon glow, dark backgrounds, flat 2px lines, square panel corners, more than two callout pills, and a legend for a single series.

When you're done, render the chart and check that the chrome highlight sits on the top edge of the line along its whole length, the pills stay clear of the panel's rounded corners, the aluminium strip reads as brushed metal without heavy noise, and the title claim is arithmetically true.