Home›Line›Stacked Line Chart
NEWLine

Stacked Line Chart

Cumulative multi-line chart comparing tiered category growth and aggregate run-rates over quarterly cycles.

Loading chart…
#line#stacked#multi-series#tiers#cumulative#revenue
Customization Guides & Code Snippets

◆Cumulative Multi-Tier Layering

Unlike stacked area charts where color fills the gaps, stacked line charts trace the cumulative ceiling of each tier (e.g. Enterprise + Pro + Starter). Plotting each cumulative series gives an immediate picture of total volume alongside tier breakdown.

<Line type="monotone" dataKey="total" stroke="#00e5a0" strokeWidth={3} />
<Line type="monotone" dataKey="tier2" stroke="#4a9eff" strokeWidth={2} strokeDasharray="4 4" />
<Line type="monotone" dataKey="tier1" stroke="#a78bfa" strokeWidth={2} />

◆Color Harmonization for Dark & Day Modes

Choose contrasting brand hues (Emerald #00e5a0, Cyan #06b6d4, Violet #a78bfa) that maintain at least 4.5:1 contrast against both slate dark and clean daylight backgrounds.

When to use a Stacked Line Chart

A Stacked 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 Stacked 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 stacked line chart and how does it work?

A stacked line chart plots multiple continuous series where each line represents the cumulative sum of the series below it plus its own value. The uppermost line shows the total aggregated metric, while the spacing between lines reveals the proportional contribution of each subcategory.

When should you use a stacked line chart instead of a stacked area chart?

Use a stacked line chart when you have subtle trends and want to avoid heavy colored blocks that can make dense dashboards feel visually overwhelming, or when line intersections and gradients need to remain crisp without overlapping fill opacity.

How do you calculate stacked line values in React?

Prepare your dataset so each record contains pre-computed cumulative totals (e.g. enterpriseTotal = starter + pro + enterprise), or use a lightweight utility function before rendering Recharts <Line> components with respective keys.

Related Charts