Charts - Polar

#Usage

import { ChartAnnotation, ChartCanvas, ChartCaption, ChartExportMenu, ChartHover, ChartItem, ChartLegend, ChartPolar, ChartStacked, ChartSvg, ChartTitle, ChartTooltip, ChartYAxis } from '@primeui/vue-chart';

<ChartSvg>
    <ChartPolar :data="data" category-x-field="categoryXField" value-y-field="valueYField" />
</ChartSvg>

Polar charts arrange radial bars around a circular axis, where bar length scales to each value. Good for cyclical comparisons like time-of-day or directional data. Set innerRadius to create a hollow center for the classic wind rose look.

#Basic

Set categoryXField and valueYField to map data fields. Bar length scales to each value against the shared radial axis.

#Inner Radius

Set innerRadius to cut a hollow center. The value is a ratio of the outer radius: 0.4 creates a hole 40% as wide as the chart. Combine with ChartStacked and a circle grid for the classic wind rose style.

#Colors

Pass an array to color to assign a custom palette; bars cycle through colors by index. Keep the palette balanced across cool, warm, and neutral accents so cyclic sectors stay readable. For per-bar control, pass a function that receives each data item and returns a color string.

#Gradient Color

Pass a gradient object to color to apply a controlled intensity fill to all bars. For per-bar gradients, pass an array of gradient objects to color.

#Sorted

Set sort to reorder bars before rendering. Use value-desc to place the tallest bar first, or label-asc for alphabetical order. Sort does not affect the underlying data, only the visual arrangement.

#Border

Set borderStrokeWidth and borderColor to add a stroke around each bar. Use borderRadius for rounded bar arc corners. Set borderDash for a dashed stroke and spacing (in pixels) to introduce gaps between bars.

#Grid Shape

Set gridShape="polygon" on ChartYAxis to render angular polygon grid lines instead of the default concentric circles. Polygon grids give a spider-web appearance, useful when the angular structure of the data warrants it.

#Grid Styling

Grid styling lives on ChartYAxis. Set tickCount to control the number of concentric levels. Visibility follows the same model as cartesian axes: showLine="false" hides the spoke lines, gridLines="false" hides the concentric rings, and showLabels="false" hides the value labels. Use gridColor, gridStrokeWidth, and gridOpacity to adjust the grid line appearance, and set gridStyle to dashed or dotted for non-solid grid lines.

#Grouped

Place multiple ChartPolar components as siblings; each series automatically positions its bars within each angular sector. Useful for comparing two or more datasets across the same categories on a shared radial axis.

#Stacked

Wrap multiple ChartPolar components inside ChartStacked to stack bars radially outward. Each series accumulates on top of the previous one.

#Percent Stacked

Set mode="percent" on ChartStacked to normalize each sector to 100%. Shows the relative proportion of each series rather than absolute values, useful for comparing composition across categories.

#Declarative

Define bars inline using ChartItem children instead of a data array. Each ChartItem accepts category-x, value-y, and color.

#Title & Caption

Add ChartTitle to display a title above the chart and ChartCaption for a descriptive line beneath it. Adding both reduces the available chart area.

For full configuration see Title & Caption.

#Hover

ChartHover brightens the hovered bar while the rest stay at normal opacity. Set brightness to control the lightening factor, and set dimOpacity below 1 when you intentionally want non-hovered bars to fade.

For full configuration see Hover.

#Tooltip

Add ChartTooltip to show data details on hover. The tooltip displays the category label, value, and series name for the hovered bar.

For full configuration see Tooltip.

#Legend

Add ChartLegend to display an interactive legend. Each ChartPolar series appears as a separate entry; click any item to toggle that series.

For full configuration see Legend.

#Annotation

Use ChartAnnotation to render custom content overlaid on the chart area. The render callback receives chartArea, center, xScale, yScale, textColor, and ctx (Canvas mode only). Use center to position content at the chart's center; xScale and yScale are null for polar charts. Combine with innerRadius to place content in the hollow center. In SVG mode return a VNode. In Canvas mode draw to ctx and return null.

For full configuration see Annotation.

#Animation

Pass the chart-root animation prop (<ChartSvg> / <ChartCanvas>) to control entrance and update transitions. Bars grow from zero height at the inner radius on entrance and interpolate to new positions on data updates.

For full configuration see Animation.

#Export

Add ChartExportMenu to let users download the chart as PNG, SVG, or PDF.

See Export for format options and programmatic export.

#Responsive

See Responsive for container sizing, aspect ratio, and breakpoint configuration.

#Accessibility

See Accessibility for ARIA labels, keyboard navigation, and screen reader support.

#API

#ChartPolar

Visual styling props with type accessor → R accept a static value, a per-bar array, a field name (keyof T), or a callback (ctx: ItemContext<T>) => R | undefined. Color-family arrays cycle modulo length; other accessor arrays clip and fall back to the series default.

#ChartYAxis (radial grid)

The concentric grid is configured on ChartYAxis, not on ChartPolar. Add a ChartYAxis to style it. The number of rings follows the axis tickCount.

See Axes for the full axis prop reference.

#ItemContext

Passed to every accessor → R callback. Return undefined to fall back to the series-level default for that bar.

#ChartStacked

Wrap ChartPolar children inside ChartStacked to stack bars radially. Without this wrapper, multiple ChartPolar components render as grouped side-by-side bars within each sector.

#ChartItem

Use ChartItem as children of ChartPolar instead of a data array for inline bar definitions.

#Related Docs

• Polar Examples
• Legend
• Tooltip
• Hover
• Annotation
• Animation