Home›Line›Multi-Line Chart
POPULARLine

Multi-Line Chart

Compare multiple time-series financial metrics simultaneously. Features revenue, expenses, and net profit margins with glowing data points.

Loading chart…
#line#multi-series#comparison#analytics#financial#profit
Customization Guides & Code Snippets

◆Multiple Series with Contrasting Line Aesthetics

Distinguish primary metrics from secondary indicators by combining solid thick strokes (strokeWidth={3}), secondary thinner solid strokes (strokeWidth={2.5}), and dashed helper strokes (strokeDasharray='4 4') for expenses or benchmarks.

<Line type="monotone" dataKey="revenue" stroke="#00e5a0" strokeWidth={3} dot={{ r: 4.5, stroke: '#00e5a0', fill: '#00e5a0' }} />
<Line type="monotone" dataKey="netProfit" stroke="#4a9eff" strokeWidth={2.5} dot={{ r: 4, stroke: '#4a9eff', fill: '#4a9eff' }} />
<Line type="monotone" dataKey="expenses" stroke="#ff6b6b" strokeWidth={2} strokeDasharray="4 4" dot={{ r: 4, stroke: '#ff6b6b', fill: '#ff6b6b' }} />

◆Custom Hover Active Dot Halos

Provide tactile visual feedback on hover using activeDot with a contrasting white stroke halo around the primary series color.

activeDot={{ r: 7, stroke: '#ffffff', fill: '#00e5a0', strokeWidth: 2 }}
When to use a Multi-Line Chart

A Multi-Line Chart is ideal for developers and designers who need to display data clearly and effectively. Use this chart type when:

  • ✓Showing trends over time (e.g. daily active users over 30 days)
  • ✓Comparing multiple metrics on the same timeline
  • ✓Displaying continuous data like temperature, stock prices, or heart rate
  • ✓Highlighting growth rates and momentum
Tips for Recharts Multi-Line Chart
TIP 1Use type='monotone' for smooth curves instead of sharp angles
TIP 2Set dot={{ r: 4 }} to show data points without cluttering the chart
TIP 3Add a gradient fill under the line to create an area effect
TIP 4Use isAnimationActive={false} for real-time updating charts
TIP 5Multiple lines work best with 5 or fewer series — beyond that, use a table
Key Recharts Props
PROPTYPEDESCRIPTION
dataarrayArray of objects with your data values
dataKeystringThe key in your data objects to use for line values
strokestringLine color
strokeWidthnumberLine thickness in pixels (default: 1)
typestring'monotone' | 'linear' | 'step' — controls curve style
dotobject | booleanShow/hide data point dots, or pass style object
Frequently Asked Questions

What is a multi line chart and when should you use it?

A multi line chart plots two or more continuous data series on the same set of coordinate axes. It is ideal for financial performance tracking (such as Revenue vs Expenses vs Net Margin), competitive benchmarking, and multi-sensor telemetry.

How many lines should you put on a multi line chart?

Best practice is to limit multi line charts to 3 to 5 distinct series. Including more than 5 series creates visual clutter (a 'spaghetti chart') that degrades readability. For datasets with 6+ series, consider small multiples or interactive series toggles.

How do you style different lines in Recharts?

Configure contrasting stroke colors, distinct strokeWidth values (e.g. 3px for primary revenue, 2px for secondary expenses), strokeDasharray='4 4' for projected benchmarks, and colored dot markers.

Related Charts