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

Thermal line chart, dark theme: An infrared camera frame with a line colored by heat and a crosshair on the max.

Thermal

DarkLine

An infrared camera frame with a line colored by heat and a crosshair on the max.

  • Background#07060B
  • Cold Purple#57106E
  • Ember Red#D44842
  • Hot Orange#F57D15
  • Flame Yellow#FAC127
  • White Hot#FCFFA4

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 "Thermal" 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 frame grabbed from an infrared camera. The data is colored by its own value on an inferno heat ramp, it shimmers like hot air, and camera UI sits on top: viewfinder brackets, a crosshair on the hottest point, a temperature scale bar.

Colors (use these exact values):
- Background: #07060B, with a dim false-color "scene" behind the chart: a low-frequency feTurbulence fractalNoise (baseFrequency 0.004 x 0.007, 3 octaves) mapped to deep purple blotches at 55% opacity, a fine white grain (feTurbulence baseFrequency 0.9) at 8%, and a black radial vignette to 60% at the edges.
- Heat ramp (inferno), cold to hot: #1B0C41 (0), #57106E (0.12), #9C2964 (0.35), #D44842 (0.55), #F57D15 (0.72), #FAC127 (0.87), #FCFFA4 (1). Map it onto the value axis, from the bottom of the plot (0) to the top (1).
- UI white #F2F2F2 for the title, crosshair, brackets and readout. UI gray #9A93A8 for the subtitle, labels and status text. A #FF3B30 record dot.
- Accent one key word or number in the title with #F57D15.
- Additional series: don't add hues. Keep every series on the same ramp and tell them apart with line style (solid, dashed 8/5, dotted 1/5) and direct labels.

Typography (Google Fonts): JetBrains Mono only.
- Title 26px 700 with -0.5px letter-spacing. Subtitle 14px 400. Axis labels 13px (temperatures with a degree sign, times as 06:00). Readout 15px 700 ("MAX 41.2°C"). Scale labels 12px. Status text 11px with 0.5 to 1px letter-spacing.

Layout:
- Four viewfinder corner brackets, 26px arms, 2px #F2F2F2 at 85%, 24px from the canvas corners.
- Title and subtitle top left. Top right camera status: red dot + "REC" in bold, a sensor tag ("IR 320×240"), a timestamp and a small battery icon (40 x 16px outline with three filled cells).
- Plot in the middle. To its right, a vertical temperature scale bar: 18px wide, filled with the heat ramp (hot at the top), a 1px #F2F2F2 border at 50%, 6px ticks with 12px labels to its right, "°C" above it, and a small white triangle pointer on its left edge at the maximum value.
- Bottom status strip: "SOURCE: ILLUSTRATIVE DATA" left and camera parameters right ("ε 0.95 · REFL 20.0°C · DIST 12 m · INFERNO").

Axes and grid:
- Dashed horizontal gridlines (2/5) in #F2F2F2 at 10%, a solid baseline at 35%. Y labels right-aligned left of the plot. Short 6px x ticks at 40% under the baseline with labels below.

Marks:
- Line chart: a smooth (monotone) 5px line with round caps whose stroke is the heat ramp as a vertical userSpaceOnUse gradient spanning the plot's value range, so each part of the line takes the color of its value. Under it a heat-shimmer glow: the same path at 16px, 80% opacity, blurred 7px and then warped with feDisplacementMap (scale 10) driven by feTurbulence (type turbulence, baseFrequency 0.012 x 0.06, 2 octaves). Add a tight 2px glow on the crisp line and an area fill using the same ramp at low opacity (5% at the bottom rising to 35% at the top).
- Bar chart: fill each bar with the heat ramp as a userSpaceOnUse gradient over the value axis, so taller bars reach hotter colors at their tops; add the same shimmer glow behind the bars, square corners, 30% gaps.
- Crosshair on the maximum: a 14px circle and four 20px arms (1.5px #F2F2F2) with a gap at the center, and a readout box beside it (#000000 at 55%, 1px #F2F2F2 border at 50%, 3px radius) with a 12px #FCFFA4 swatch and "MAX value°C".
- Mark the minimum with a small #57106E triangle outlined in white and a "MIN value°C" label in gray.

Avoid: rainbow or jet colormaps, colors outside the ramp for data, rounded friendly UI, serif type, bright backgrounds, and a shimmer strong enough to make the line's value unreadable.

When you're done, render the chart and check that the line's color at each point matches the scale bar, the crosshair sits exactly on the maximum, the readout doesn't cover the line, and the shimmer isn't clipped.