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

Transponder Lease bar chart, light theme: A technical leasing summary with steel blue segments and lessee codes printed inside.

Transponder Lease

LightBar

A technical leasing summary with steel blue segments and lessee codes printed inside.

  • Silver#F1F3F5
  • Steel blue#2F5D8A
  • Unleased#D5DBE1
  • Ink#16212E

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 "Transponder Lease" 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 technical capacity leasing summary from a satellite operator. Tabular, engineered and calm, with one steel blue doing all the work and codes printed right on the bars.

Colors (use these exact values):
- Page: #F1F3F5 (pale silver). Alternate rows get a #FFFFFF band at 55% opacity.
- Committed / leased: #2F5D8A (steel blue), with white codes and #BFD2E6 secondary numbers inside.
- Available / remainder: #D5DBE1 (light gray).
- Ink #16212E, secondary text #5E6A78, gridlines #C9D0D8.

Typography (Google Fonts):
- Exo 2 throughout. Title 700 29px, -0.3px letter-spacing, #16212E, stating the finding with computed numbers. Kicker 600 11px uppercase with 2px letter-spacing in #2F5D8A, next to a 6 x 26 px steel blue bar, with a 11px #5E6A78 line under it. Subtitle 15px #5E6A78. Row ids 700 13px, row sublabels 10.5px, codes inside bars 700 10.5px with 1px letter-spacing, column headers 700 10px uppercase with 1.4px letter-spacing.

Layout:
- 56px margins. Kicker at y 50, title at y 114, subtitle at y 142.
- A technical note box in the top right (180 x 46 at x 724, y 34, 1px #2F5D8A outline, no fill) with a small orbit glyph (dashed 11px circle, 3px dot, 2px satellite dot) and two lines: "ORBITAL SLOT 61.5°W" in 700 10.5px steel blue and a spec line in 10.5px #5E6A78.
- Rows 27px tall starting at y 196: the id at x 56, a sublabel at x 84, bars from x 150 to 776, and the right column (x 904, right-aligned) giving the remainder in 600 13px, or "FULL" in 700 steel blue with 1px letter-spacing.
- Legend under the rows (14 x 12 swatches) and "Source: ..." right-aligned on the same line.

Axes and grid:
- Scale labels above the bars at the quarter points (0, 9, 18, 27, 36) in 600 10.5px; vertical gridlines 1px #C9D0D8, solid at the ends and dashed (2 3) in between, running through all rows.

Marks:
- Bar chart: 19px tall square-cornered horizontal bars. Draw the full-capacity track in #D5DBE1 first, then each committed segment in #2F5D8A, separated by 1.5px gaps of page color. Print the segment code 7px inside its left edge and, when the segment is over 70px wide, its size 7px inside its right edge in #BFD2E6.
- Line chart: a 2.5px #2F5D8A line with square 6px markers, the total capacity as a 1px #16212E ceiling line, the gap between the line and the ceiling filled #D5DBE1, and short codes as white-on-steel tags at notable points.

Avoid: rounded bars, gradients, more than one saturated color, legends that repeat what the in-bar codes already say, and codes that overflow their segments.

When you're done, render the chart and check that every segment is exactly proportional to its value, the right column equals capacity minus the leased sum, the title totals are arithmetically right, and every code fits inside its segment.