How many lines can one chart show before it's unreadable?

Around five. Past that, lines cross and colours blur into 'spaghetti'. For more series, use small multiples (a grid of single-line charts) or let the user toggle series on and off.

When should I use a stepped line instead of a smooth one?

Use a step line when the value holds constant then jumps — interest rates, pricing tiers, feature flags. A connecting slope would imply a gradual change that never happened.

Do line charts need to start at zero?

Not necessarily. Because a line encodes trend through slope rather than length, a focused y-axis range is acceptable and often clearer for rates and ratios — as long as the axis is labelled honestly.

All charts

line/*

Line

Line charts — trend over time, single or multi-series.

4 variants

@vireya/ui/charts/line/simple

Single monotone line with dots and grid.

client

@vireya/ui/charts/line/multi

Three lines on the same axis + legend, no dots.

client

@vireya/ui/charts/line/step

stepAfter interpolation for tier-jump data with categorical Y-axis labels.

client

@vireya/ui/charts/line/gradient

Vertical linearGradient applied to the line stroke (cool → warm temperature ramp).

client

Understanding Line charts

Line charts connect data points in order, making them the canonical way to show how a value changes across a continuous dimension — almost always time. The slope of the line is the message: trend, rate of change and inflection points read instantly.

They scale gracefully to several series on a shared axis, which is why they outperform stacked areas when you need to compare trajectories rather than volumes.

When to use

Trends over time for one or many series.
Comparing the trajectories of multiple metrics on the same scale.
Highlighting rate of change, seasonality or inflection points.
Step interpolation for values that hold then jump (pricing tiers, rate changes).

When to avoid

Discrete, unordered categories — there is no meaningful line between them; use bars.
Very few data points (two or three), where the connecting line implies a trend that isn't there.
Part-to-whole composition, which a stacked area or bar conveys better.

Best practices

Limit to ~5 series before the chart becomes spaghetti; use small multiples beyond that.
Label lines directly at their end where space allows, reducing legend round-trips.
Only zero-base the axis when zero is meaningful; for rates, a focused range is fine.
Use markers sparingly — they help on sparse series, clutter on dense ones.

Accessibility

Differentiate series with colour and a second channel (dash pattern or direct labels).
Ensure line contrast against the plot background at the rendered stroke width.
Expose values through an accessible tooltip and an adjacent data table.

Frequently asked questions

How many lines can one chart show before it's unreadable?: Around five. Past that, lines cross and colours blur into 'spaghetti'. For more series, use small multiples (a grid of single-line charts) or let the user toggle series on and off.
When should I use a stepped line instead of a smooth one?: Use a step line when the value holds constant then jumps — interest rates, pricing tiers, feature flags. A connecting slope would imply a gradual change that never happened.
Do line charts need to start at zero?: Not necessarily. Because a line encodes trend through slope rather than length, a focused y-axis range is acceptable and often clearer for rates and ratios — as long as the axis is labelled honestly.