Charts - Waterfall Examples

#Usage

import { ChartBar, ChartDataLabels, ChartReferenceLine, ChartSvg, ChartTooltip, ChartWaterfall, ChartXAxis, ChartYAxis } from '@primeui/vue-chart';

<ChartSvg>
    <ChartWaterfall total-field="isTotal">
        <ChartBar :data="data" category-x-field="step" value-y-field="delta" />
    </ChartWaterfall>
    <ChartXAxis />
    <ChartYAxis />
    <ChartDataLabels />
    <ChartTooltip />
</ChartSvg>

Use waterfall charts for bridge analysis: starting value, positive and negative drivers, and the ending total. Use explicit total markers so subtotal bars are not treated as ordinary deltas.

#EU-27 Government Revenue and Spending, 2022

The color accessor routes each bar to a palette based on a kind field, so revenue, spending, and total bars are visually distinct. ChartDataLabels uses a signed formatter so contributions show as +13.2% and the deficit as -3.4%. A custom ChartTooltip renders the individual contribution alongside the precomputed running total.

#Global Carbon Budget 2022, Sources, Sinks, Net Accumulation

categoryYField and valueXField render the waterfall horizontally while keeping the same totalField semantics for the subtotal bar. A ChartReferenceLine marks a threshold using the x prop. The ChartTooltip reports each bar's share of the gross total rather than the running sum.

#FY 2023 EBITDA Bridge, Stacked Waterfall

ChartStacked wraps inside ChartWaterfall so each bar stacks two layers while the running total accumulates from the combined values. Negative steps automatically reverse stacking order so the primary layer anchors at the baseline. ChartReferenceLine at y=0 marks break-even.

#Related Docs

• Column & Bar Overview
• Stacked Examples
• Grouped Examples
• Tooltip
• Annotation
• Data Labels