What is a stacked area chart?

A stacked area chart shows multiple measures over time with each measure's filled area stacked on top of the previous one, so the top edge represents the combined total. It combines the volume emphasis of a filled area with the composition view of stacking - useful when both how much in total and how each measure contributes matter together. The measures must share a common unit for the stacked total to be meaningful.

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

A stacked area chart fills the space between stacked lines with color, which emphasizes the volume each segment occupies and the combined total's magnitude. A Stacked Line chart shows the same stacked positions without the fill. Use the stacked area chart when the visual weight of volume matters - revenue, cumulative totals. Use the stacked line chart when you want to reduce visual density and focus purely on the trend lines.

Can I turn off stacking on a stacked area chart?

Yes. The Stacked / Overlap toggle in Area Styles switches between Stacked, where each measure's fill builds on top of the one below it, and Overlap, where every measure's fill starts from zero and the fills overlap each other with transparency. Overlap is useful for comparing the shape of each measure's trend independently rather than reading a combined total.

Does the stacked area chart support a 100% view?

Yes. Stack Mode offers Value and 100% options. Value stacks raw totals so the top edge represents the actual combined value at each time point. 100% normalizes every time point to 100%, so each band's thickness shows its percentage share of the total rather than its absolute value. Stack Mode only has an effect when Area Styles' Stacked / Overlap toggle is set to Stacked.

How many measures can I add to a stacked area chart?

The stacked area chart requires a minimum of 2 measures and supports up to 10. Beyond 4 to 5 measures, overlapping fills and stacked bands become difficult to distinguish, especially in the middle of the stack. Keep to 4 or fewer measures for most time series dashboards.

Do all measures need to be in the same unit?

Yes, when Stacked mode is on. Because the chart adds each measure's value on top of the previous one, all measures must share the same unit for the combined total to be interpretable. In Overlap mode this requirement is relaxed somewhat since fills are not summed, but comparing fills of very different scales is still visually awkward.

What does Gradient Start and End Color control?

Gradient Start and End Color set the two ends of a color palette applied across all series. The first measure's fill uses a color near the start color, the last measure's fill uses a color near the end color, and measures in between are interpolated. Each individual fill is also a vertical gradient from solid at the top to transparent at the bottom, layered on top of this palette assignment.

Why is the middle of the stack hard to read?

In Stacked mode, only the bottom measure has a zero baseline. Every measure above it floats on the cumulative value of everything below, so its band height represents its own value but its position does not start at zero. Enable the tooltip with Axis trigger - it shows the exact value for every measure at the hovered time point without requiring viewers to estimate from the band's vertical position.

Why does my stacked area chart show a gap or distorted shape at one point in time?

A null or missing value in any one measure shifts the stacked position of every measure above it at that time point, creating a visible dip or distortion in the bands above the gap. The builder shows a null value prompt automatically: choose Filter Data to exclude those points, or Show data at default position to plot nulls as zero. For more control, fix the values in Transform before building the chart.

Stacked Area Chart | Edilitics Docs

Track how multiple measures contribute to a combined total over time, with each measure's fill stacked on top of the last - volume and share together.

A stacked area chart shows multiple measures over time with each measure's filled area stacked on top of the previous one - the top edge represents the combined total, and each band's thickness represents that measure's individual contribution. Drop one date or ordered categorical field into Column and two or more numeric fields into Row. Use it when both the total volume and each measure's share of that volume matter together across a time series.

When to Use

The stacked area chart combines two things at once: the visual weight of a filled area, which emphasizes magnitude, and the composition view of stacking, which shows how multiple measures contribute to a whole. Use it for revenue broken down by product line, traffic broken down by channel, or any additive measure where both "how much in total" and "how much from each source" matter in the same view.

Only the bottom band has a zero baseline. Every band above the bottom one floats on the cumulative value of everything stacked below it - its position on the Y-axis does not directly represent its own value, only its thickness does. Comparing the precise value of a middle band requires the tooltip, not the eye. If precise comparison between measures matters more than the combined total, use a Stacked Line chart or switch this chart to Overlap mode.

Switch to a different chart when:

You have only one measure - use Area Chart
The visual density of fills makes the chart hard to read - use Stacked Line
The question is about percentage share rather than combined total - switch Stack Mode to 100% in this chart's own Format panel, or use a Stacked Bar chart if your dimension is categorical
Your dimension is categorical, not time-based - use Stacked Bar

Scenario	Dimension	Measures
Revenue by product line over the fiscal year	Month	Sum of product A revenue, Sum of product B revenue, Sum of product C revenue
Total website traffic by channel over 90 days	Date	Count of organic sessions, Count of paid sessions, Count of referral sessions
Storage used by data type over time	Week	Sum of logs GB, Sum of media GB, Sum of backups GB
Active subscriptions by plan tier over time	Month	Count of basic plan, Count of pro plan, Count of enterprise plan
Support ticket volume by priority over time	Week	Count of low priority, Count of medium priority, Count of high priority

Required Inputs

Field	Type	Count
Dimension	Date or Ordered Categorical	Exactly 1
Measure	Numeric	2 to 10

All measures must share the same unit when Stacked mode is on, since the combined total is the sum of all measures.

For step-by-step build instructions, see Build Your First Chart.

Formatting Options

The Format tab unlocks after at least one field is assigned. Once your chart is rendering, use these controls to define how it looks and how viewers interact with it.

Style

Use the chart title to state what the combined total represents and what the bands break it down by - viewers need this context before reading the stacked fills.

Control	What it does
Show Chart Title	Shows or hides the title. The text is preserved when hidden so you can toggle it back without re-entering.
Enter Chart Title	Title text. Maximum 50 characters.
Font family	Font applied to the title.
Font size	5 to 30.
Bold / Italic	Weight and style.
Alignment	Left, center, or right within the chart container.

Area Styles controls both the stacking behavior and the color palette applied across all series fills.

Control	What it does
Stacked / Overlap	Stacked (default): each measure's fill builds on top of the one below it, and the top edge is the combined total. Overlap: every measure's fill starts from zero and fills overlap each other with transparency - use this to compare the shape of each measure independently rather than read a combined total. With more than 3 measures in Overlap mode, overlapping transparent fills can blend into colors that do not match any single measure's assigned color, making it harder to tell which fill belongs to which series without the legend.
Gradient Start Color	The color applied to the first measure's fill.
Gradient End Color	The color applied to the last measure's fill. Measures in between are interpolated between Start and End. Each fill is also a vertical gradient that fades to transparent near its own baseline.

Stack Mode (the separate tab next to this one) only takes effect when Stacked / Overlap above is set to Stacked. Switching to Overlap and then to 100% Stack Mode has no visual effect, since percentage share only makes sense when fills are stacked on a shared total.

Switch between an absolute and a proportional view of the stacked total, without changing your field assignments. Only applies when Area Styles' Stacked / Overlap is set to Stacked.

Mode	When to use
Value	Stacks raw values. The top edge of the combined fill represents the actual total per time point. Use when the magnitude of the total matters alongside the breakdown.
100%	Normalizes every time point's combined fill to 100% - this view is sometimes called a 100% stacked area chart. Each band's thickness shows its percentage share of the total at that point. The top edge is always at 100%, so the absolute total is no longer visible. Use when the question is purely about how each measure's share shifts over time.

In 100% mode, the Y-axis scale changes to 0-100 and axis labels show percentage signs. Data labels and tooltip values update to reflect percentages automatically.

Symbol Styles controls data point markers along the top edge of each band. The same symbol type and size applies to all series.

Control	What it does
Show Symbols	Shows or hides the marker at each data point across all series. Turn off when the time series is dense and markers clutter the bands.
Symbol Type	The marker shape across all series: Circle, Rectangle, Triangle, Diamond, Pin, Arrow, or None.
Symbol Size	Diameter of each marker, 0 to 20. Default is 7. Reduce for dense time series.

Data labels print values at each data point on each band. With multiple stacked or overlapping fills, labels collide unless the data is sparse. Use data labels only on charts with 2 to 3 measures and fewer than 10 time periods.

Control	What it does
Show Data Labels	Shows or hides value labels at each data point.
Font family	Font applied to data labels.
Font size	Maximum 18. Keep at 9 or 10 on charts with multiple bands to reduce collision.
Bold / Italic / Color	Text styling. Choose colors with contrast against the fill - light text can disappear into a light-colored band.
Position	Alignment of the label relative to the data point. Top places the label above the point.
Number Type	Default, Scientific, Decimal, or Percentage.
Display Unit	None, Thousand, Million, or Billion. Match to the Y-axis Display Unit.
Decimal Places	0 to 6. Available when Number Type is not Default.

The legend is essential on a stacked area chart - without it, viewers cannot identify which band corresponds to which measure.

Control	What it does
Show Legends	Shows or hides the legend. On by default.
Vertical position	Top, middle, or bottom alignment of the legend block.
Horizontal position	Start, center, or end alignment.
Show Name	Default: labels always visible. On Hover: labels appear only when viewer hovers the legend. Use Default on shared or exported dashboards.
Orientation	Vertical or Horizontal legend layout. Horizontal works best when measure names are short and there are 4 or fewer series.
Item Gap	Spacing between legend items.
Font Size	Legend label font size.
Color	Legend label text color.

Axes

The Y-axis represents the combined total in Stacked mode, or each measure's independent value in Overlap mode. Name it accordingly so viewers read the scale correctly for the mode you have selected.

Select X or Y before making changes. Settings apply to the selected axis only.

Control	What it does
Show Axis Name	Shows or hides the axis name label.
Axis name text	Label text. Maximum 20 characters. Defaults to the field name.
Font family	Font applied to the axis name.
Font size	5 to 30.
Bold / Italic	Weight and style.
Offset (%)	Distance between the axis name and the axis line. Increase if the name overlaps the axis labels.
Alignment	Start, center, or end along the axis.

Leave these at their defaults unless you are building a minimal dashboard layout.

Select X or Y before making changes.

Control	What it does
Show Axis Line	Shows or hides the axis line. Hiding it also hides ticks.
Line Color	Color of the axis line.
Line Width	Thickness of the axis line, 0 to 5.
Line Type	Solid, Dashed, or Dotted.
Show Ticks	Shows or hides tick marks on the axis line.
Tick Color	Color of the tick marks.
Tick Length	Length of the tick marks, 5 to 10.
Boundary Gap	When off, the bands start and end at the chart edges. Turn off for a clean edge-to-edge time series.

Select X or Y before making changes. Hiding axis labels also hides the axis name.

Control	What it does
Show Axis Label	Shows or hides labels along the axis.
Font family	Font applied to axis labels.
Font size	Label font size.
Bold / Italic / Color	Text styling.
Rotation	Angle of label text. Useful on X-axis when date labels are long and overlap.
Text case	Title Case, Uppercase, or Lowercase. Available on the categorical axis (X) only.
Display Unit	Auto, None, Thousand, Million, or Billion. Available on the value axis (Y) only. In Stacked mode, this represents the combined total - set Display Unit to match the scale of that total, not individual measures.

Y-axis grid lines help viewers read the top edge of the stack against the value scale. Keep them on.

Select X or Y before making changes.

Control	What it does
Show Gridlines	Shows or hides grid lines for the selected axis.
Grid Color	Color of the grid lines. Choose a color with contrast against the area fills.
Left / Right / Top / Bottom	Plot area margins as a percentage. Increase Top when the topmost band's data labels are clipped. Increase Bottom when X-axis date labels overflow.

Interactivity

The tooltip is essential on a stacked area chart. Set Trigger to Axis - it shows all measure values for the hovered time point in one pop-up, which is the only reliable way to read exact values for bands above the bottom one.

Control	What it does
Show Tooltip	Shows or hides the tooltip on hover. Keep on.
Trigger	Item: tooltip shows data for the specific hovered band only. Axis: tooltip shows all measure values for the hovered time point. Always use Axis.
Pointer	When Trigger is Axis: Line, Shadow, Cross, or None. Line draws a vertical rule at the hovered time point and reads clearly against filled bands.
Background Color	Tooltip background color.
Headers / Values tabs	Separate styling for the time period label row (Headers) and the measure value rows (Values). The Values tab includes Number Type, Display Unit, and Decimal Places.

Keep animation on when presenting the chart for the first time - the progressive build draws attention to how the total accumulates across bands. Turn it off on dashboards that auto-refresh.

Control	What it does
Enable Animation	Turns the draw animation on or off.
Duration	How long the animation runs, 0 to 3000ms. Default is 1000ms.
Delay	Time before the animation starts after the chart loads, 0 to 2000ms.
Easing Function	The motion curve. Cubic Out (the default) gives a natural deceleration.

Enable Data Zoom for time series with more than around 60 data points, or when viewers need to focus on a specific date range.

Control	What it does
Show Data Zoom	Shows or hides the zoom control.
Zoom Type	Slider: a draggable range bar below the chart. Inside: scroll-to-zoom on the plot area. Use Slider for dashboards.
Slider Size (px)	Height of the slider bar, 10 to 100.
Position	Position of the slider relative to the chart.
Alignment	Alignment of the slider control.
Orientation	Horizontal for a stacked area chart - scrolls through the time axis.
Show Detail Label	Shows the date or category values at the slider handles.
Background Color	Slider background.
Filler Color	Color of the selected range inside the slider.
Border Color	Slider border.
Handle Color	Color of the drag handles.
Brush Selection	Enables click-and-drag to zoom into a range.

Avoid Zoom Type "Inside" on dashboards that viewers scroll with a trackpad. Scroll events captured by the chart zoom the chart instead of scrolling the page.

Series focus is the most useful emphasis mode here - it highlights one measure's band at a time and dims the rest, letting viewers trace a single measure through the stack without losing it among adjacent bands.

Control	What it does
Show Emphasis	Enables or disables the hover effect.
Focus Type	Item: highlights the hovered data point only. Series: highlights the entire hovered band and dims all others - use this with more than 3 measures. None: no visual change on hover.
Enable Scale	Scales the hovered marker slightly larger.
Scale Size	How much the marker scales. Keep at 1.2 or below.

Enable the Toolbox when viewers need to export the chart or inspect the exact values behind each band at a given time point.

Control	What it does
Show Toolbox	Shows or hides the toolbox icon bar.
Save as Image	Adds a download icon that saves the chart as a PNG.
Data View	Adds an icon that opens the underlying data table in the chart area.

Best Practices

Use Stacked mode for totals, Overlap mode for independent comparison. Stacked mode is the default and is right when the combined total matters. Switch to Overlap when you want to see each measure's own trend shape without the visual weight of a running total - useful when measures have very different magnitudes and stacking would make smaller ones invisible. In Overlap mode, keep measure count at 3 or fewer - beyond that, overlapping transparent fills blend into colors that don't match any single series, and viewers will need the legend to identify each fill.

Only stack measures in the same unit. In Stacked mode, the chart adds each measure's value on top of the previous one. Mixing units (revenue with headcount) produces a combined total that has no real meaning.

Always use Axis tooltip trigger. Bands above the bottom one do not have a zero baseline - their vertical position does not directly encode their value. The tooltip is the only reliable way to read exact values for these bands.

Keep measure count at 4 or fewer. Beyond 4 measures, bands become thin and hard to distinguish, especially in Stacked mode where middle bands are squeezed between others. Pre-aggregate minor measures into an "Other" category in Transform if you have more than 4.

Resolve null values before publishing. In Stacked mode, a null in one measure shifts the position of every band stacked above it at that time point, creating a visible distortion. The builder's null value prompt offers Filter Data or Show data at default position - use Transform for more control such as forward-filling.

FAQs

Need help? Email support@edilitics.com with your workspace, job ID, and context. We reply within one business day.

Stacked Area Chart