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

Course Ratings bar chart, dark theme: Dark teal course leaderboard with gold rating bars and hatched low-count bars.

Course Ratings

DarkBar

Dark teal course leaderboard with gold rating bars and hatched low-count bars.

  • Teal-gray#13201F
  • Warm gold#FACC15
  • Ink#EEF3F1
  • Muted sage#8FA3A0
  • Initials teal#24403C

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 "Course Ratings" 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 course catalog leaderboard in a dark learning app. Calm teal-gray, a table-like layout with instructor initials, warm gold bars, and honest hatching where the sample is thin.

Colors (use these exact values):
- Page: #13201F (dark teal-gray). Gridlines and header rule: #223331. Initials circles: #24403C with gold initials.
- Bars: #FACC15 (warm gold). Low-sample bars: a 45-degree hatch of 2.4px gold stripes on a 6px period over the page color, with a 1.2px gold outline.
- Ink: #EEF3F1 for names and value labels. Secondary text: #8FA3A0 (also the thin count numerals and low-sample value labels). Low-sample counts are gold.

Typography (Google Fonts):
- Josefin Sans 600 for the title (29px, stating the finding).
- Mulish for everything else: eyebrow 11.5px 700 uppercase, 2.4px letter-spacing, gold; subtitle 14px 400 muted, stating the scale, the truncated axis and what hatching means; column headers 10.5px 700 uppercase, 1.8px letter-spacing, muted; course names 13.5px 600; initials 9.5px 800; value labels 13px 800; counts 13.5px 300 (thin); axis labels 12px 600; source 12px.

Layout:
- A table: column headers "COURSE", "AVERAGE RATING", "RATINGS" over a 1px rule at y 162. Rows every 29.5px, sorted by value.
- Left column: an 11px-radius initials circle at x 61, the name starting at x 82. Bars start at x 318 and span to x 812. Counts right-aligned at x 912.
- Footer at y 574 with the source on the left and a hatch swatch plus "Fewer than 50 ratings" on the right.

Axes and grid:
- Axis starts at 3.0 (say so in the subtitle), ends at 5.0 with a small gold star after the last label. Vertical gridlines every 0.5: solid 1px #223331 at the start, dotted (2 on, 4 off) elsewhere, labels below the last row.

Marks:
- Bar chart: 15px-tall horizontal bars with 3px rounded right ends, solid gold, value label 8px past the end. Low-sample bars hatched with muted value labels.
- Line chart: one 2.5px gold line per series across the same dark table-like frame, 4px gold dots with a 2px page-colored ring, low-sample points drawn as hollow gold rings with a dashed segment into them, and labels at the line ends in the left-column style.

Avoid: gradients, glows, more than one accent hue, starting a bar axis at 3 without saying so, and heavy gridlines.

When you're done, render the chart and check that rows are sorted, the hatch count in the subtitle matches the data, the thin counts align on their right edge, and the axis truncation is stated.