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

Portal Page bar chart, light theme: A dense web portal module with beveled boxes, orange tabs and outlined gradient bars.

Portal Page

LightBar

A dense web portal module with beveled boxes, orange tabs and outlined gradient bars.

  • Header navy#1F3A93
  • Tab orange#F28C28
  • Link blue#0033CC
  • Page#F7F7F2
  • Module gray#CDCDC3

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 "Portal Page" 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 busy early-2000s web portal start page. Dense, small type, beveled gray modules, underlined links and a chart that lives in one module like it was always there.

Colors (use these exact values):
- Page: #F7F7F2. Header strip: vertical gradient #2C4BAE to #1F3A93. Tab row background #DCDCD3 with a 1px #9A9A90 bottom line.
- Tabs: orange gradient #F9AD5C to #F28C28 with a 1px #B9661A outline and white bold labels; the active tab is page-colored with navy #1F3A93 text and merges into the page.
- Links: #0033CC, always underlined.
- Modules: white boxes with a 1px #A6A69C border, a 1px white inner top-left bevel and a #D2D2C8 inner bottom-right bevel; heading bar gradient #E9E9E1 to #CDCDC3 with a #A6A69C rule under it.
- Bars: two-stop vertical gradient #6F8BE0 to #1F3A93 with a 1px #0F1F5C outline and a 1px white highlight at 45% just inside the top edge. The leading bar: #FFC27F to #F28C28 with a #A4550C outline.
- Text: #1A1A1A body, #55554D secondary, #77776E axis. NEW badge: #D8261C with white text.

Typography (Google Fonts):
- Arimo bold for the logo (28px italic, white), module headings (12px, navy), tabs (12px) and the chart headline (16px, #1A1A1A, a sentence stating the finding).
- Tinos for everything else: subtitle 13px, bar category labels 13px as underlined links, rank numbers and values 13px, axis ticks 11px, list links 12px, footer 11px.

Layout:
- Header 54px tall with a star logo, the portal name and an italic tagline; sign-in links at the right. Tab row 26px below it.
- Three columns 12px apart: a 168px left column of link-list modules, a wide center module holding the chart, and a 234px right column with a search field module, a weather widget and a small poll.
- Inside the chart module: headline, subtitle, a 1px #D2D2C8 rule, then the chart. A "more >>" link in bold 11px at the bottom right of each module, and a tiny red NEW badge beside the chart module heading.
- Footer under a 1px #A6A69C rule with underlined links and a hit counter: black digit cells (14 x 19px, #55554D border) with #7CFF5B bold digits.

Axes and grid:
- Vertical 1/2 dotted #E4E4DB gridlines at round values, a solid #55554D zero line, small Tinos tick labels under the plot and an italic axis title.

Marks:
- Bar chart: horizontal bars 20px tall on a 32px pitch, square corners, gradient and outline as above, values in Tinos 13px 6px past the bar end; rank numbers at the far left and category names right-aligned as underlined links. Only the leader is orange.
- Line chart: a 2.5px #1F3A93 line with 7px square markers filled with the navy gradient and a 1px #0F1F5C outline; the latest or leading point in the orange gradient. Horizontal dotted gridlines, the same module frame and headline.

Avoid: rounded cards, generous whitespace, modern flat UI, drop shadows, large type, and em dashes.

When you're done, render the chart and check that the chart module still reads first despite the dense surroundings, every category label is underlined link blue, and no link text runs past its module border.