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

Night City bar chart, dark theme: Bars as lit towers under a moon, values on rooftop signs, a wet-street reflection.

Night City

DarkBar

Bars as lit towers under a moon, values on rooftop signs, a wet-street reflection.

  • Sky#0B1026
  • Facade#151A33
  • Warm window#FFD27A
  • Cool window#8FD3FF
  • Neon#FF7AB6
  • Moon#F4F1E1

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 "Night City" 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 skyline at 2 am. Every bar is a tower of lit windows under a starry sky and a full moon, and the whole city reflects in a wet street.

Colors (use these exact values):
- Sky: a vertical gradient #05081A (top) to #0B1026 (55%) to #2A2F6B (horizon).
- Tower facade: a horizontal gradient #10142A to #151A33 (80%) to #232A52 at the right, moonlit edge; a 1px #3A4478 line down the right edge; a 5px #262D57 roof ledge 3px wider than the tower on each side.
- Windows: lit #FFD27A (80% of lit windows) or #8FD3FF (20%), opacity 0.55 to 1, with a 2.2px blur glow; dark windows #1E2447.
- Moon: #F4F1E1 halo (radial, 35% to 0, radius 92px) around a 32px disc shaded from #FFFDF2 to #D9D3BC with three faint #CFC8AE craters.
- Accent for the highlighted tower: #FF7AB6. Title #F4F1E1, subtitle #A9B0DA, labels #C9CFF2, source #6D74A3.
- Street: gradient #0D1024 to #05060F. Haze above the street: #7B4FA8 at 0 rising to #B0629A at 38% over the bottom 130px of the towers. A 1.5px #E9A7D0 street edge at 55%.

Typography (Google Fonts):
- Barlow Condensed for display: title 40px 700, letter-spacing 0.4px; sign values 18px 700; district labels 14px 600 uppercase, letter-spacing 1.4px; source 12px 500 uppercase, letter-spacing 1.8px.
- Barlow for prose: subtitle 15px 400; a one-line finding under it in 13px 500 in the accent pink.

Layout:
- Title block top left in the sky; keep stars out of it. Moon top right (center about 846, 92).
- Street line at y 458. District labels on a band 26px below the street (34px tall, #05060F at 55%) so they read over the reflection. Source bottom left.

Axes and grid:
- No axes or gridlines; the towers stand directly on the street and every value is printed on a rooftop sign. Heights stay proportional to the data from the street line.

Marks:
- Bar chart: towers 82px wide with 34px gaps. Fill with a window grid inset about 7px from the sides, starting 16px below the roof and stopping 10px above the street. Vary the window shape per tower (7x8 squares on a 12x15 grid, 16x5 strips on 20x12, 5x11 slots on 10x18). Light about half the windows with a seeded random generator (about 72% on the highlighted tower). On each roof, a sign on two 2px #2E3666 struts: a 60x24px #0A0D20 plate, 3px radius, 1.5px #FFD27A border and value text, both with a 4px glow; the highlighted tower's sign is #FF7AB6.
- Line chart: draw the series as a skyline: each data point becomes a thin tower (width = spacing minus 6px) of the same facade and windows, and trace the rooftops with a 2px #FFD27A line with the glow, points as 5px lit dots; a second series is a #8FD3FF rooftop line over its own shorter, dimmer towers drawn behind. Keep the rooftop sign only on the latest and the peak value.
- Stars: about 150 seeded points, radius 0.7px (12% at 1.3px), opacity 0.25 to 0.85, in the upper 360px.
- A low distant skyline in #111536, 10 to 44px tall, along the street for depth, well below the shortest tower.

Effects:
- Reflection: mirror the towers across the street line, run them through feTurbulence (fractalNoise, baseFrequency 0.004 0.18) plus feDisplacementMap scale 9 and a 1.2px horizontal blur, and fade them with a mask from 42% to 0 over 150px.

Avoid: daylight colors, flat gray buildings, text placed over busy window grids, a visible value axis, and more than one accent color.

When you're done, render the chart and check that every sign value is readable at thumbnail size, the tallest sign clears the subtitle, labels don't collide, and tower heights are still proportional to the data.