Charts - Radar

#Usage

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

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

Radar charts compare profiles across multiple dimensions on radial axes. Each spoke maps a category and each ring marks a value level. Place multiple ChartRadar components as siblings to overlay and compare datasets.

#Basic

Set categoryXField to map spoke labels and valueYField to map the radial value for each axis.

#Multi-Series

Place multiple ChartRadar components as siblings to overlay separate datasets. Each series renders its own polygon. Overlay multiple series to compare profiles side by side.

#Colors

Set color to apply a color to the polygon stroke and its area fill. Supports hex, RGB, and CSS color values.

#Gradient Color

Pass a radial gradient object to color when the fill needs softer emphasis than a solid stroke. Keep the stops controlled so the gradient supports comparison instead of turning the radar into decoration.

#Fill Opacity

Set fillOpacity to control the polygon area fill. 0 draws only the stroke with no fill; 0.2 is the default semi-transparent fill. Higher values create a more solid polygon, which works well when series don't overlap.

#Curve

Set curve="smooth" to use Bezier interpolation between spoke vertices instead of straight polygon edges. Produces a softer shape. Use this when the angular polygon edges feel too harsh.

#Markers

Set showMarkers to display point markers at each spoke vertex. Set markerSize to control the radius. Mixing marker sizes across series creates visual hierarchy without changing stroke weights.

#Custom Markers

Set renderMarker to replace built-in markers with fully custom content. In SVG mode return a VNode centered at the origin; the chart handles translation to each vertex position. In Canvas mode the context is pre-translated to the vertex; draw at origin and return null.

#Line Styling

Set lineStrokeWidth to control polygon stroke thickness. Set lineStyle to dashed or dotted for a preset dash pattern, or use lineDash to define a custom pattern with [dashLength, gapLength] for distinguishing series when color alone is not enough.

#Grid Shape

Set gridShape="circle" on ChartYAxis to render smooth concentric circles instead of the default polygon grid. Circle grids produce a softer appearance. Use this when the polygon grid feels too technical.

#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.

#Stacked

Wrap multiple ChartRadar components inside ChartStacked to render concentric rings instead of overlapping polygons. Each series fills the band above the previous one, useful for showing cumulative contributions rather than direct comparison.

#Declarative

Define data points 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. Both reduce the chart area height together.

For full configuration see Title & Caption.

#Hover

Add ChartHover to apply visual feedback on hover. Set brightness to lighten the hovered series, and set dimOpacity below 1 only when you want the rest to fade. Hovering operates at the dataset level. The entire polygon highlights, not individual vertices. Vertex markers enlarge to markerSize × 1.3 on hover.

For full configuration see Hover.

#Tooltip

Add ChartTooltip to show data details on hover. The tooltip displays the spoke label, value, and series name for the nearest vertex.

For full configuration see Tooltip.

#Legend

Add ChartLegend to display an interactive legend. Each ChartRadar series appears as a separate entry. Click any item to toggle that series.

For full configuration see Legend.

#Axes

Bind per-category radial scales using category on ChartYAxis. Each axis applies to its matching spoke (category) and maintains its own domain, useful when comparing metrics with different ranges within the same radar chart.

#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 radar charts. In SVG mode return a VNode. In Canvas mode draw to ctx and return null.

For full configuration see Annotation.

#Reference Bands & Lines

Use ChartReferenceBand to shade a concentric annular zone between two radial values (y1 / y2). Use ChartReferenceLine to draw a dashed ring at a specific value (y). Both components work on radar with the same props as on cartesian charts. The values are mapped to the same scale as the chart data.

For full configuration see Reference Band and Reference Line.

#Animation

Pass the chart-root animation prop (<ChartSvg> / <ChartCanvas>) to control entrance and update transitions. Spoke points expand outward from the center 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

#ChartRadar

Visual styling props with type accessor → R accept a static value, a per-vertex 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 ChartRadar. 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 vertex.

#ChartStacked

Wrap ChartRadar children inside ChartStacked to render concentric rings instead of overlapping polygons.

#ChartItem

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

#PointRenderContext

Passed to the renderMarker callback for each vertex.

#Related Docs

• Radar Examples
• Legend
• Tooltip
• Hover
• Annotation
• Animation