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

Fintech Clean line chart, light theme: A crisp payments dashboard with tabular figures, period chips and one indigo line.

Fintech Clean

LightLine

A crisp payments dashboard with tabular figures, period chips and one indigo line.

  • Page#F6F8FB
  • Ink#1A1F36
  • Indigo#5B50F0
  • Muted#697386
  • Border#E3E8EE
  • Positive#0E9F6E

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 "Fintech Clean" 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 polished payments dashboard in light mode. White card, hairline borders, one saturated indigo series, precise tabular numbers and nothing decorative.

Colors (use these exact values):
- Page: #F6F8FB. Card: #FFFFFF, 1px #E3E8EE border, 12px radius, two soft shadows (0 1px 2px and 0 8px 28px, both #1A1F36 at 6%).
- Primary series: #5B50F0. Stroke it with a left-to-right gradient from #8A7CFF to #5B50F0. Area fill: a vertical gradient of #5B50F0 from 20% opacity at the top, 4% at 70% down, to 0 at the baseline.
- Comparison series (previous period): #B8C1CC, solid.
- Text: #1A1F36 (values, headings), #697386 (labels), #8792A2 (axes, cents, footnotes).
- Gridlines: #EEF1F5; the zero line uses the border color #E3E8EE.
- Positive change: #0E9F6E text on a #DEF7EC badge. Negative change, if needed: #D92D20 on #FDECEA.
- Additional series, in order: #5B50F0, #0EA5E9, #F59E0B, each at the same weight.

Typography (Google Fonts): Manrope only, and every number uses tabular figures (font-variant-numeric: tabular-nums) so digits line up.
- Metric label 15px 600. Hero value 40px 700, letter-spacing -1.2px, with the decimals set at 24px in #8792A2. Delta badge 13px 700. Comparison text 13px 500. Legend 12.5px 600. Axis labels 12px 500. KPI labels 12.5px 600, KPI values 26px 700 with -0.6px letter-spacing. Footnote 11.5px 500.

Layout:
- 32px padding inside the card. Top left: the metric label. Top right of the chart area: a period switcher, a #F2F4F8 track 32px tall with 8px radius holding four 40px chips (1D 1W 1M 1Y, or the periods that fit my data); the selected chip is a white 24px pill with 6px radius, a 1px #E3E8EE border and a 1px shadow, its text 700 #1A1F36, the others 600 #8792A2.
- Below: the hero value (the latest total), then a 24px-tall delta badge with 6px radius containing a small solid up triangle and the percentage, then "vs. <previous value> <previous period>" in #697386.
- Legend under the hero: 16px line swatches (2.5px for the primary, 2px gray for the comparison) with labels.
- If there's room, a KPI column on the right separated by a 1px #E3E8EE vertical rule: stacked label, big value, and a delta in #0E9F6E on the left with "vs. <previous>" right-aligned in #8792A2, divided by #EEF1F5 hairlines. Finish the column with a #F6F8FB inset box (1px #E3E8EE border, 8px radius) for one secondary figure.

Axes and grid:
- Horizontal gridlines only, 1px. Y labels on the right side of the plot, compact currency ($100K), left-aligned 12px after the plot. X labels at 4 or 5 evenly spaced points, the first left-aligned and the last right-aligned. No axis lines or tick marks.

Marks:
- Line chart: a 2.5px smooth monotone line with round caps and joins, gradient area underneath, comparison drawn first as a 2px gray line without area. Mark the latest point with a 4.5px #5B50F0 dot with a 2px white ring inside a 10px #5B50F0 halo at 14% opacity, a dotted (2/3) vertical guide at 35% opacity down to the baseline, and a small #1A1F36 label pill above it (6px radius, white 11.5px 700 text, such as "Now · 2:00 PM"). Label the comparison's end value in 12px 600 #697386.
- Bar chart: slim bars in #5B50F0 with 4px top radius and 40% gaps; earlier bars at 100% and the comparison period drawn as #B8C1CC bars beside them. Put the value of the current bar in a #1A1F36 label pill above it. No bar outlines.

Avoid: dark backgrounds, heavy borders, glows, drop shadows on marks, more than one saturated color, rounded fonts, and proportional (non-tabular) digits.

When you're done, render the chart and check that the digits in every column align, the switcher chip is visibly selected, the delta percentage is arithmetically correct, and nothing in the hero row collides.