Charts - Stacked Radar Examples

Stacked radar demos built on real datasets. Each uses ChartStacked to build concentric rings that represent series contributions per spoke.

#Usage

import { ChartLegend, ChartRadar, ChartStacked, ChartSvg, ChartTooltip, ChartXAxis, ChartYAxis } from '@primeui/vue-chart';
<ChartSvg>
    <ChartStacked>
        <ChartRadar :data="data" category-x-field="service" value-y-field="planning" name="Planning" />
        <ChartRadar :data="data" category-x-field="service" value-y-field="delivery" name="Delivery" />
    </ChartStacked>
    <ChartXAxis />
    <ChartYAxis />
    <ChartLegend />
    <ChartTooltip mode="shared" />
</ChartSvg>

Use stacked radar only when each spoke has additive parts. If the series are independent profiles, keep them as normal radar overlays instead.

#Digital Transformation Engagement: Hours by Service × Phase

Three ChartRadar series inside ChartStacked build concentric phase rings; the outermost ring represents total hours per service spoke. ChartLegend is interactive: toggle any phase to watch the rings recompute. A custom ChartTooltip leads with an inline stacked-bar breakdown of the hovered service's phase mix.

Loading Demo...

#SaaS Platform: Monthly Usage by Plan Tier

curve="smooth" softens the polygon outlines to spline curves. Each series takes a vertical GradientColor object, giving the stacked rings depth at the fill level. The tooltip shows each tier's share of the hovered metric as both a percentage and a raw value.

Loading Demo...

#Global Retailer: Revenue Mix by Region, Q3 2025

Wrapping three ChartRadar components inside ChartStacked gives each region its own contribution ring, with the outermost ring representing the category total. fillOpacity is tuned per series to keep the rings legible under each other. A custom ChartTooltip decomposes the hovered spoke into per-region values and percentages with a total row.

Loading Demo...