Charts in product UI without the marketing varnish

Most product dashboards ship charts that look like marketing decks. Loud gradients, drop shadows, oversized labels, animated entrances that fire every time the page renders. They look impressive in a screenshot and unreadable in daily use. The user is here to read numbers, not admire the rendering.

Stripe's dashboard, Vercel's analytics, Linear's insights pages, they all converge on a smaller, quieter set of conventions. Here's what they share, and how to ship a chart that disappears into the page instead of fighting it.

The four chart types that earn their slot

1. The single-line trend

One metric over time. Thin stroke, no fill (or a barely-there gradient fill), grid lines either absent or hairline. The trend is the story; everything else gets out of the way. This is what Stripe ships above every metric card.

Use it for: revenue over 30 days, signups per day, p95 latency. Avoid for: anything where the comparison between series matters more than the absolute value.

2. The small-multiple grid

Eight tiny charts in a 4×2 grid, each showing the same metric for a different segment. Vercel's analytics page is the canonical product-dashboard implementation. Edward Tufte's name for this pattern, small multiples, is the search term you want when you go looking for references.

Use it when comparing the same metric across many slices (regions, plans, projects). Drop it when slices have different units or scales, the grid stops comparing and starts misleading.

3. The stacked area or bar

A composition that shows both a total and its breakdown. Vercel and Stripe both use it for usage-by-category. The trap: more than five categories and the smallest slices become noise. If you need more, switch to a table.

4. The metric card with a sparkline

A large number, a comparison delta, and a thin 30-day sparkline behind it. This is the unit of every modern analytics dashboard. The sparkline gives context without demanding attention; the number does the work.

The editorial rules

Charts in product UI are editorial illustrations, not infographics. The rules below are the difference between Stripe-grade and dashboard-template.

• One accent color, used sparingly. The trend line is your accent. Axes, labels, and grid lines are muted neutrals. Never two saturated colors on the same chart unless they're encoding two genuine series.
• Hairline gridlines or none at all. Bold horizontal lines compete with the data. If you need a reference, ship 2–3 dotted hairlines, not 8 solid ones.
• Type small, weight light. Axis labels at 11–12px, weight 400. Anything larger reads as a poster, not a chart.
• Skip the legend if you can. Inline labels on the line itself beat a separate legend block 90% of the time. Recharts and Visx both let you do this.
• No animation on re-render. Animate on first mount only. Charts that re-animate on every filter change feel slow and disrespectful of attention.
• Truncate axes honestly. If your Y axis starts at 80% instead of 0, label it. Hidden truncation is the most common chart lie.

How to pick a charting library

Four real options for product UI in 2026, ranked by where they fit:

1. 01Recharts. Composable React API, sensible defaults, fine for 80% of product dashboards. Start here unless you have a reason not to.
2. 02Visx (Airbnb). Lower-level primitives on top of D3. Reach for it when you need custom interactions or non-standard chart types Recharts can't draw.
3. 03Tremor. Opinionated dashboard components built on Recharts. Faster to ship if you want the Stripe-style metric card shape out of the box.
4. 04D3 direct. The escape hatch. Only if you need genuinely custom data viz. Don't reach for it for line charts and bar charts in 2026, the abstraction tax isn't worth it.

Interactions that matter

Most chart interactions ship because the team wanted to look thorough, not because users need them. Two interactions actually move the needle.

Hover crosshair with a value readout

Hovering anywhere on the chart shows a vertical line and a small label with the exact value at that x-position. This is the one interaction every dashboard chart should have. The crosshair is precise, fast, and disappears on mouse-leave. Skip the heavy tooltip with a five-row breakdown; users want the number.

Click-to-zoom on a time range

Drag-select a region to zoom the chart to that range, with an obvious affordance to reset. Vercel's analytics ships this; it's the second-most-useful chart interaction. Skip it on small-multiple grids, the selection coordination across charts is more trouble than it's worth.

Mistakes to delete from your dashboard

1. 013D bars and pies. They distort perception. Even Apple stopped using them. There's no defensible reason to ship one in 2026.
2. 02Donut charts with more than 3 slices. Humans can't compare arc lengths reliably. Use a horizontal bar chart instead.
3. 03Rainbow palettes. A categorical scale with six saturated colors looks like a children's app. Use ColorBrewer's qualitative palettes or a desaturated brand-derived scale.
4. 04Legends with 12 entries. If you have 12 series, you have a table, not a chart.
5. 05Animations longer than 400ms. A 700ms ease-out on a bar chart is jewelry, not communication.

An external reference worth bookmarking

The Datawrapper academy is the best free resource for chart design fundamentals, when to use which chart, how to label axes, and the visual rules behind clarity. The lessons translate directly to product UI even though Datawrapper is positioned for journalism.

Frequently asked

Should I write my own charts or use a library?

Use a library. Charting is a deep problem, axis scales, tooltips, responsiveness, accessibility. Recharts and Visx are mature enough that there's no defensible reason to hand-roll a line chart in 2026 unless you're building a viz product.

How many charts is too many on one page?

If a user can't summarize the dashboard in one sentence after looking at it for 10 seconds, you have too many charts or the wrong charts. Cut to the 3–5 that answer the question the user came to ask.

Are dark-mode charts different?

Yes. Saturated colors look stronger on dark backgrounds, drop the saturation 10–15% or your line charts will feel garish. Grid lines need to be lighter, not just inverted; copy the contrast ratio from your light-mode design, don't invert pixels.

What about accessibility for charts?

Provide a text alternative, either a caption that summarizes the trend or a <table> fallback with the same data. Don't rely on color alone to encode series; use line styles or markers too. Screen-reader users and color-blind users are both served by the same fix.

Ship one

The dashboard entry in the directory has tuned prompts for metric cards, line trends, and small-multiple grids, in the Stripe/Vercel editorial register. Pair with the features entry if you're using charts on marketing pages, and the design foundations collection for the color and type scales that keep charts quiet.