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

Soundings bar chart, light theme: A nautical chart with bars hanging from datum as soundings in graded blues.

Soundings

LightBar

A nautical chart with bars hanging from datum as soundings in graded blues.

  • Chart paper#EEF2EA
  • Land buff#EFE3BE
  • Shoal blue#B9D5E3
  • Deep blue#1F4E79
  • Compass magenta#9C4A7C

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 "Soundings" 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 harbor approach chart from a hydrographic office. Pale blue-cream chart paper, a buff coastline along the top, depth soundings in italic figures, dash-dot isobaths, a magenta compass rose and a finely ticked frame. Values read downward from a datum line, like depths.

Colors (use these exact values):
- Chart paper (canvas and water): #EEF2EA. Land: #EFE3BE with a #6E6A4E 1.3px coastline. Shallow-water tint just off the coast: #D6E8EC, edged by a #8DB0C4 dotted line.
- Marks: a continuous ramp from #B9D5E3 (shoal blue, smallest values) to #1F4E79 (deep blue, largest value), interpolated in RGB by value, so bigger values are darker.
- Compass rose: #9C4A7C (chart magenta). Isobaths: #8DB0C4. Main ink (datum line, frame, labels): #1F3347. Secondary text: #5B6E7C.

Typography (Google Fonts):
- Crimson Pro throughout: title 600 29px #1F3347 stating the finding; subtitle italic 400 18px #5B6E7C with measure, unit and order; category labels italic 400 14px; axis labels italic 14px #5B6E7C; place name on the land 600 14px uppercase with 4px letter-spacing in #6E6A4E; source and notes italic 14px.
- Value figures are set like chart soundings: italic 500 18px, the whole number full size and the tenths digit as a 13px subscript (dy +4px), no decimal point. The highlighted (largest) value 600 20px in #1F4E79 with a 14px subscript.

Layout:
- Title at y 58 and subtitle at y 88, left-aligned with the frame at x 56. Chart frame from x 56 to 904 and y 112 to 562.
- Inside the frame: a land band across the top with a wavy shoreline around y 150 (sum of a few gentle sines, amplitude about 12px), the shallow tint band 12px below it, then a straight 1.1px ink datum line at y 196 from which all bars hang.
- Footer at y 590: "Source: illustrative data." at the left and a units note ("Soundings in metres and tenths") at the right, both italic.

Axes and grid:
- No y-axis line. Isobaths at round values run across the water as 0.9px #8DB0C4 dash-dot lines (6 3 1 3), labeled in italic at the left ("5 m", "10 m"), with "0" at the datum. Stop them short of the compass rose.
- Frame: 1.2px ink rectangle plus a 0.6px outer rectangle 5px outside it. Between them, fine ticks every 9px on all sides (2.5px long, every fifth 5px long, 0.6px ink), and a couple of latitude-minute labels ("12′") in italic 12px outside the left and right edges.

Marks:
- Bar chart: vertical bars hanging down from the datum, 50% of the band wide, square at the datum and with 3px rounded far ends. Fill from the ramp by value. Category labels centered 8px above the datum. The value figure sits centered 21px beyond the bar tip.
- Line chart: plot the values downward from the datum too (a depth profile). Draw a 2.5px #1F4E79 line, fill between the datum and the line with a vertical gradient from #B9D5E3 at 70% opacity to #1F4E79 at 70%, and set each point's value as a sounding figure just below it. With several series, use #1F4E79 solid, #5B8DB4 dashed 6 4 and #9C4A7C dotted, each labeled in italic at its end.
- Compass rose in an empty corner of the water: outer 1px circle r 50 and inner 0.6px circle r 43 in magenta, degree ticks every 10 degrees (longer every 30), four cardinal points (length 41, half-width 7) and four intercardinal points (length 26, half-width 5), each point split in half, one half solid magenta and the other paper-filled with a magenta outline. A 600 "N" 6px above the ring.

Avoid: a legend box, gridlines other than isobaths, drop shadows, glossy gradients on bars, sans-serif type, upright value figures, and letting any label cross the coastline or the compass rose.

When you're done, render the chart and check that bars grow downward from the datum, darker bars are always the larger values, every sounding figure reads with its subscript tenths, the compass rose sits in clear water, and the title's numbers match the data.