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

CAD Viewport line chart, dark theme: A dark 3D viewport with a selected orange edge loop and a properties panel.

CAD Viewport

DarkLine

A dark 3D viewport with a selected orange edge loop and a properties panel.

  • Viewport#2B2D31
  • Grid#3E4147
  • Selection orange#FF8A1F
  • X axis red#E5484D
  • Y axis green#6BBF4E
  • Z axis blue#3E8EDE

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 "CAD Viewport" 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: the chart as a mesh in a 3D modeling application, seen in a front orthographic viewport in edit mode. Dark neutral UI, a quiet grid, colored world axes and the data drawn as a selected edge loop with a floating properties panel.

Colors (use these exact values):
- Viewport: #2B2D31 background with a soft radial vignette to 28% black at the corners.
- Grid: #3E4147 for major grid lines and #33353A for minor lines, 1px, running across the whole viewport.
- Selection orange: #FF8A1F for the data line, vertex handle outlines, the active tool highlight, the panel's accent label and the focused field outline.
- X axis red: #E5484D for the horizontal world axis (the chart baseline) and the gizmo X.
- Y axis green: #6BBF4E for the vertical world axis (the y axis) and the gizmo Y.
- Z axis blue: #3E8EDE for the gizmo Z.
- UI panels #1F2023, fields #383A40, borders #4A4D55, primary text #ECEDEF, secondary text #9A9EA6.

Typography (Google Fonts):
- Geist for UI text: title 600 25px #ECEDEF with -0.3px letter-spacing, stating the finding; subtitle 14.5px #C3C6CC; the viewport name "Front Orthographic" 12px #9A9EA6 above the title; menu items 500 12.5px; panel header 600 13px; field names 12.5px #9A9EA6; axis titles 500 11px uppercase with 1px letter-spacing.
- Geist Mono for numbers: tick labels 11.5px #9A9EA6, panel field values 12.5px right-aligned, and the status bar readout 11px.

Layout:
- A 34px toolbar strip in #1F2023 on top: four tool icons at left (the active one on an orange 22% tint with an orange outline), a divider, menu words (View, Select, Add, Mesh), and a mode pill at right ("Edit Mode · Vertex").
- A 26px status bar at the bottom in #1F2023: "Source: illustrative data" at left, mesh stats (Verts 1/13 | Edges 12 | model name) at right in mono.
- Viewport overlay text at top left (x 28): viewport name, title, subtitle.
- An axis gizmo in the top right corner: a faint 38px disc, X red and Z blue arrows 24px long ending in r 8.5 bubbles lettered in dark 600 10.5px, a short foreshortened green Y arrow, and faint negative-axis bubbles.
- A floating properties panel (about 256 x 136 px, 6px radius, #1F2023 at 96% with a 1px #4A4D55 border and a soft drop shadow) near the highlighted point but clear of the line, joined to it by a dashed 1px leader (3 3) that routes around the data.

Axes and grid:
- The world axes are the chart axes: the red line runs full width along zero, the green line runs up from the bottom along the y axis, both 1.5px at 85% opacity and stopping short of the overlay text.
- Minor grid every labeled step's half, major on labeled steps. Labels float near the axes in #9A9EA6 mono; no tick marks. Axis titles sit at the far ends of the axes.

Marks:
- Line chart: straight segments in 2.5px #FF8A1F with round joins over a soft 6px orange glow (45% opacity, 3px blur). Every vertex is a square handle: 8 x 8 px, viewport-colored fill, 1.6px orange stroke. The active vertex (peak or the point being called out) is 11 x 11 px filled #FFFFFF with a 2px orange stroke. Extra series use #ECEDEF or #3E8EDE with the same handles, each labeled at its end.
- Bar chart: bars as selected faces: #FF8A1F at 18% fill with a 1.5px orange outline and square vertex handles on the top corners; the active bar filled at 35% with white corner handles. Unselected context bars get a 1px #9A9EA6 outline and no fill.
- The properties panel reads out the active item: a chevron and header ("Active vertex"), an orange tag on the right ("Peak"), then labeled rounded fields (4px radius, #383A40) with the key value's field outlined in orange.

Avoid: light backgrounds, gradients on marks, perspective or 3D shading, thick lines, more than one orange accent family, and panels that cover data.

When you're done, render the chart and check that the red and green axes coincide with zero on each scale, the panel values match the highlighted point, no overlay text crosses the axis lines, and the toolbar menu items are evenly spaced.