Charts - Stacked Polar Examples

#Usage

import { ChartLegend, ChartPolar, ChartStacked, ChartSvg, ChartTooltip, ChartXAxis, ChartYAxis } from '@primeui/vue-chart';

<ChartSvg>
    <ChartStacked mode="percent">
        <ChartPolar :data="data" category-x-field="direction" value-y-field="sustained" name="Sustained" />
        <ChartPolar :data="data" category-x-field="direction" value-y-field="gust" name="Gust" />
    </ChartStacked>
    <ChartXAxis />
    <ChartYAxis />
    <ChartLegend />
    <ChartTooltip mode="shared" />
</ChartSvg>

Use stacked polar charts when each circular category has additive parts. Use mode="percent" when composition matters more than total magnitude.

#UK Grid: Monthly Renewable Generation by Source

Three ChartPolar series inside a single ChartStacked wrapper stack hydro, solar, and wind concentrically for each of the 12 months. The chart's shape reveals the seasonal pattern across all three sources. The mode="shared" tooltip breaks each month down into all three sources with per-source percentage bars.

#Wind Speed by Direction: Morning vs Afternoon

ChartStacked mode="normal" wraps two ChartPolar children so sector length encodes combined daily energy while each segment shows its time-of-day share. The color array assigns teal to morning and burnt-amber to afternoon. Hover a sector to see the per-period breakdown in the tooltip.

#Wind Gustiness by Direction: Sustained vs Gusts

ChartStacked mode="percent" normalizes each sector to 100%, so the radius encodes composition rather than magnitude: sky-blue for sustained wind, orange for peak gusts. The percent mode makes the gustiness character of each compass direction legible at a glance, independent of total wind energy. Hover to compare the exact sustained-to-gust split per direction.

#Related Docs

• Polar Chart Overview
• Polar Examples