Charts - Stacked Bar Examples

Stacked bar chart demos built on real datasets. Covers normal stacking, percent normalization, and negative stacking patterns.

#Usage

import { ChartBar, ChartLegend, ChartStacked, ChartSvg, ChartTooltip, ChartXAxis, ChartYAxis } from '@primeui/vue-chart';
<ChartSvg>
    <ChartStacked mode="absolute">
        <ChartBar :data="data" category-x-field="year" value-y-field="desktop" name="Desktop" />
        <ChartBar :data="data" category-x-field="year" value-y-field="mobile" name="Mobile" />
    </ChartStacked>
    <ChartXAxis />
    <ChartYAxis />
    <ChartLegend />
    <ChartTooltip mode="shared" />
</ChartSvg>

Use stacked bars when the total and the contribution mix need to be read together. Use mode="percent" when normalized composition matters more than absolute size.

#Revenue Composition, Grouped Stacked with Reference Bands

Two ChartStacked containers placed as siblings create a grouped-stacked layout, splitting each category band into one slot per group with independent stacking within each. ChartReferenceBand shades a guidance range between two ChartReferenceLine markers at the floor and threshold. A custom ChartTooltip shows year-over-year growth and per-group subtotals on hover.

Loading Demo...

#Global Electric Vehicle Sales by Region, 2019–2023

Each region gets a distinct color so stack composition stays legible across all five layers. A custom ChartTooltip render function shows each region's count alongside the year total. ChartLegend at the top provides an interactive filter to isolate any region.

Loading Demo...

#Electricity Generation Mix by Country, 2023

mode="percent" on ChartStacked normalizes each country to 100%, making grid compositions directly comparable regardless of total generation volume. The ChartTooltip filters out zero-value sources so phased-out energy types don't clutter the popup.

Loading Demo...

#World Population by Age Group and Sex, 2024

Negative valueYField values stack one series below zero, creating the pyramid split without any extra configuration. ChartReferenceLine at y=0 draws the dividing line, and ChartDataLabels labels each segment. The axes and tooltip both apply Math.abs() to hide the sign.

Loading Demo...