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

Obsidian Glass bar chart, dark theme: Glossy black glass bars, a cool rim light and a mirror-polished floor.

Obsidian Glass

DarkBar

Glossy black glass bars, a cool rim light and a mirror-polished floor.

  • Background#050608
  • Glass#1C1F25
  • Rim light#7CC8FF
  • Text#EDEFF3
  • Muted#8A909C

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 "Obsidian Glass" 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 luxury showroom. Polished black glass bars under one cool light, standing on a mirror floor, with thin, expensive type.

Colors (use these exact values):
- Background: a radial gradient centered at 50% x, 62% y: #14171D to #0A0B0F (60%) to #050608. Below the floor line a vertical gradient #101318 to #050608.
- Glass: a horizontal gradient across each bar: #07080A 0%, #2A2E36 7%, #0C0D10 18%, #050608 60%, #0E1014 88%, #1C1F25 100%, with a 1px #2A2E36 outline.
- Rim light (the only color): #7CC8FF.
- Text: #EDEFF3 for the title and the lead value, #C9CCD3 for other values, #8A909C for the subtitle and labels, #5C626E for the scale and source.

Typography (Google Fonts):
- Cormorant Garamond: title 40px weight 300; values 24px weight 400 (the lead value 30px weight 500). Its old-style figures are part of the look.
- Jost: subtitle 12px 300 uppercase with 3px letter-spacing; category labels 11px 400 uppercase with 2.2px letter-spacing; scale labels 12px 300; source 10px 300 uppercase with 2.4px letter-spacing.

Layout:
- Title and subtitle top left (x 56). Floor line at about 70% of the height (y 420). Category labels 30px below the floor. Source bottom left, a small finding note ("34% of $1,028M") bottom right in the rim color, uppercase Jost 11px.

Axes and grid:
- Three hairline gridlines in #FFFFFF at 6% opacity with right-aligned labels left of the plot. No axis lines. The floor line is a 1px horizontal gradient of #7CC8FF, transparent at both ends and 80% in the middle.

Marks:
- Bar chart: bars about half the band width (66px), 3px top radius. Over the glass: a vertical sheen (#FFFFFF 12% at the top to 0 by 35%), a 7px specular streak 9px from the left edge (#FFFFFF 60% at the top fading to 0), and a 2px secondary streak beside it at 60%. Rim light on the right edge: a 1.8px line in #7CC8FF fading from 95% at the top to 12% at the floor, a 12px inner band fading from #7CC8FF at 40% to 0 toward the center, and a 1px line on the top edge at 70%, all with a 3.5px glow. The lead bar gets the full rim; others get it at 55%. Add a small blurred pool of rim light on the floor at each bar's right corner.
- Line chart: a 2px #7CC8FF line with the same 3.5px glow, drawn over a glass area fill (the vertical sheen gradient over #050608, outlined in 1px #2A2E36) so the area reads as a slab of black glass; points are 5px #050608 circles with a 1.5px #7CC8FF ring. Label the last point with a Cormorant value.
- Reflection: mirror the bars (or the area) across the floor line, blur 0.8px, and fade with a mask from 34% to 0 over 130px.

Avoid: any second color, pure white text, bold weights, thick strokes, gradients in hue, and visible glow halos larger than a few pixels.

When you're done, render the chart and check that the reflection is visible but never competes with the bars, labels sit cleanly over it, and the rim light reads on every bar at thumbnail size.