Charts - Stacked Line Examples

Examples of stacked area charts in absolute and percent normalized mode.

#Usage

import { ChartLegend, ChartLine, ChartStacked, ChartSvg, ChartTooltip, ChartXAxis, ChartYAxis } from '@primeui/vue-chart';
<ChartSvg>
    <ChartStacked mode="absolute">
        <ChartLine :data="data" category-x-field="year" value-y-field="seriesA" :fill-opacity="0.35" />
        <ChartLine :data="data" category-x-field="year" value-y-field="seriesB" :fill-opacity="0.35" />
    </ChartStacked>
    <ChartXAxis />
    <ChartYAxis />
    <ChartLegend />
    <ChartTooltip mode="shared" />
</ChartSvg>

Use stacked area when the total and each contribution matter together. Switch ChartStacked to mode="percent" when the mix matters more than the absolute total.

#US Federal Spending 2000–2023

Five series inside ChartStacked build up total federal outlays year by year. A ChartAnnotation marks the 2020 COVID stimulus spike directly on the chart. ChartLegend toggles any category to isolate it, and the show-all tooltip reports every category's dollar amount plus the annual total.

Loading Demo...

#EU-27 Energy Mix 2013–2023

Set mode="percent" on ChartStacked to normalize all sources to 100% per year, which makes the structural shift visible regardless of how total generation changed. The tooltip reports both the raw Mtoe value and the percentage share for each source, making the shift readable in absolute or relative terms.

Loading Demo...