React chart example
Multi-series line
Compare several trends on shared axes to see where they move together, diverge or cross.
Sales by region
Compare monthly sales across five regions.
What is a multi-series line chart?
A multi-series line chart places several related trends on the same axes. Each line represents a group, such as a region, plan or product. A shared scale lets readers compare both the level of each series and how its direction changes over the same period.
When to use it
Use it to compare trends across a few groups: which region leads, whether a gap is widening, or whether products move together. Use comparable units on a shared scale. If the question is relative growth from different starting values, consider an indexed chart with a common starting value of 100. Use separate panels when overlapping lines become hard to follow.
Design tips
Keep colours and series names consistent across charts so readers can recognise a region immediately. Leave the legend visible when the lines are not directly labelled.
Limit the number of simultaneous series. If crossings obscure the story, split the chart into smaller panels or show only the groups needed for the comparison.
Use a shared time range and interval. A shorter or incomplete series should remain visibly incomplete rather than being padded with zeros.
Build this chart in React
Compare with
Use when one trend should remain the clear focus.
Show additive components within a changing total.
Graphy Chart SDK
Add Graphy’s multi-series line charts to your React app.
Ship quickly with one maintained SDK, without building and maintaining the entire charting experience yourself.