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

Tessera bar chart, dark theme: Pictogram rows of hand-cut mosaic tiles on charcoal grout in a gold border.

Tessera

DarkBar

Pictogram rows of hand-cut mosaic tiles on charcoal grout in a gold border.

  • Grout#1C1C1E
  • Lapis#2F5BB0
  • Gold smalti#D9A93A
  • Verdigris#3E9C8A
  • Stone#E9E4D8

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 "Tessera" 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: an excavation report laid out like a Roman floor mosaic. Dark charcoal grout, small hand-cut tesserae in lapis, verdigris and gold smalti, carved inscriptional capitals.

Colors (use these exact values):
- Ground (grout): #1C1C1E with a barely visible grit (white noise at 5%).
- Main tesserae: #2F5BB0 (lapis). Completed categories: #3E9C8A (verdigris). Border, eyebrow and totals: #D9A93A (gold smalti).
- Text: #E9E4D8 (stone). Secondary text: #9A968C. Empty-slot outlines: #4A4A4E.

Typography (Google Fonts):
- Cinzel 600 for the title: 32px #E9E4D8, stating the finding.
- Raleway with lining figures for everything else: eyebrow 12px 600 uppercase with 3px letter-spacing in gold; subtitle 15px #9A968C; category names 13px 600 uppercase with 2.6px letter-spacing in stone; totals 14px 700 gold; legend 13px; source 12px italic.

Layout:
- A gold smalti border around the whole panel: one course of 9px tesserae on a 12px pitch inset 14px from the edges, plus a 0.8px gold hairline at 45% opacity 6px inside it.
- Header at 64px from the left: eyebrow y 76, title y 116, subtitle y 144, legend row y 176.
- Category names in a left column starting at x 64; tile rows start at x 216; rows are 44px apart starting at y 226.

Axes and grid:
- No axes and no gridlines: the tiles are the scale. State the unit in the legend ("1 tile = 2 m²").

Marks:
- Bar chart (pictogram rows): each category is a horizontal row of 16px tiles on a 19px pitch (3px grout gaps), one tile per fixed unit. Every tile is slightly irregular: position jitter up to 0.7px, rotation up to 3 degrees, size 94 to 102%, lightness varied by up to 11%, 1.2px corner radius and a small white highlight (14% opacity) in its top left. The last tile is cut to the fractional width for remainders. When a category has a known total (a target or capacity), draw the remaining slots as empty 1.2px #4A4A4E outlines so the row's end is visible; categories that reached their total switch to verdigris. Put the total in gold 8px after the row's end ("36.5 of 58 m²", or just "42 m²" when complete). Sort rows descending.
- Line chart: draw the line as a chain of tesserae: place a jittered 10px lapis tile every 12px along the path (rotated to the path direction), mark each data point with a larger 16px gold tessera, and fill beneath with sparse 6px verdigris tiles at 30% opacity on a 12px grid. Values in gold at the first, last and highest points.

Avoid: smooth gradients on tiles, perfect machine-regular grids, glows, thin gray gridlines, and more than three tile colors in the data.

When you're done, render the chart and check that tile counts match the unit exactly (including the cut last tile), the gold totals sit clear of the longest row, the border tesserae do not collide with text, and the title's totals equal the sum of the rows.