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

Depot Stocks bar chart, light theme: Graphite stacked bars, stenciled depot codes and a brushed-metal header band.

Depot Stocks

LightBar

Graphite stacked bars, stenciled depot codes and a brushed-metal header band.

  • Pale silver#EEF0F2
  • Graphite#3A3F45
  • Light graphite#A7ADB4
  • Zinc blue#5B7FA3
  • Pale zinc#B4C6D8

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 "Depot Stocks" 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 metals exchange warehouse report. Industrial, precise and cool: a brushed-metal header plate, stenciled location codes like the ones painted on depot doors, graphite bars and one row picked out in zinc blue.

Colors (use these exact values):
- Background: #EEF0F2 (pale silver).
- Primary segment: #3A3F45 (graphite). Secondary segment: #A7ADB4 (light graphite).
- Highlighted row: #5B7FA3 (zinc blue) for its primary segment, code tag and percentage; #B4C6D8 (pale zinc) for its secondary segment; a full-row wash of #5B7FA3 at 9% opacity behind it.
- Ink: #23272C. Secondary text: #6A7179. Gridlines and footer rule: #D3D7DC.
- Header band: a diagonal linear gradient #DADDE1, #C9CED4 (45%), #D8DBDF (70%), #BEC3C9, overlaid with a brushed texture of 1px white lines at 22% opacity and 0.6px #7D848C lines at 12% opacity repeating every 3px, closed by a 1.5px #8E959D edge with a 1px white highlight under it.

Typography (Google Fonts):
- Saira Condensed for the eyebrow (600, 14px, 2.6px letter-spacing, uppercase, #4A5057), the title (700, 38px, ink), category names (600, 19px, ink), column headers (600, 13px uppercase, 2px letter-spacing, #6A7179) and the source (600, 12px uppercase).
- Saira for figures and body: subtitle 15px #454B52, legend 13px 500, axis labels 12.5px, totals 15px 600 ink, percentages 15px 500 (700 in zinc blue for the highlight), in-bar labels 12.5px 600.
- Saira Stencil One 15px for the row codes (D-01, D-02, ...).

Layout:
- Header band full width, 146px tall, holding eyebrow (y 46), title (y 90) and subtitle (y 120) at a 56px left margin.
- A column-header row at y 184: "DEPOT" on the left, the legend over the bar column, "TOTAL" and a percentage column right-aligned at x 840 and 904.
- Six rows 50px apart from y 214. Each row: a 52 x 26px code tag with a 1.2px graphite outline (zinc for the highlight) at x 56, the name at x 122, the bar from x 300 to at most x 760, then the total and the share figures.
- Footer: a 1px rule at y 556, a note on the left, the source on the right at y 580.

Axes and grid:
- Vertical 1px #D3D7DC gridlines at round values through all rows, the zero line 1.2px graphite. Axis labels ("10k") centered under the last row.

Marks:
- Bar chart: horizontal stacked bars 24px tall, square cornered, sorted by total descending. The two segments are separated by a 1.5px background-colored seam. Only the highlighted row gets numbers inside its segments (white on the dark segment, #1E3550 on the pale one), right-aligned 8px from each segment's end.
- Line chart: straight 2.5px graphite lines with 4px square markers, secondary series in light graphite at 2px, the highlighted series in zinc blue at 3px with its end value labeled in Saira 600. Keep the brushed header, stencil tags as series labels at the line ends, and vertical gridlines.

Avoid: rounded corners, drop shadows, warm colors, more than one highlighted row, and legends inside the plot.

When you're done, render the chart and check that the stencil codes use the stencil font, the brushed texture is subtle rather than noisy, and the percentages match the segment values.