vue-charts Charts
Radar Chart
Build radar charts for multi-dimensional data comparison
Radar charts display multivariate data on axes radiating from a center point.
Simple Radar Chart
Multiple Series
Add multiple <Radar> components to compare data sets.
Circular Grid
Set grid-type="circle" on <PolarGrid> for circular rings.
Dots on Vertices
Use the dot prop to show dots at each data point.
RadarChart props
<RadarChart> takes the chart container props, including the polar props. Radar charts start at 90 and end at -270 degrees.
Radar props
| Prop | Type | Default | Description |
|---|---|---|---|
data-key | row path or accessor | required | Field with the value |
fill | string | series palette | Fill color |
fill-opacity | number | 0.6 | Fill opacity |
stroke, stroke-width, stroke-dasharray | — | Outline | |
dot | boolean | object | false | Show a dot on every vertex |
active-dot | boolean | object | true | Show a dot on the active vertex |
label | boolean | object | false | Show a value label on every vertex |
connect-nulls | boolean | false | Draw across missing values |
angle-axis-id, radius-axis-id | string | number | 0 | Axes this series uses |
name | string | number | — | Name in the legend and tooltip |
legend-type | LegendType | 'rect' | Legend icon |
tooltip-type | 'none' | — | Set 'none' to leave the series out of the tooltip |
hide | boolean | false | Hide the series |
class | string | — | Class on the series layer |
is-animation-active | boolean | the chart's value | Animate this series |
transition | ChartTransition | the chart's value | Timing and easing of data changes |
Events: @click, @mouseenter, @mouseleave with (point, index, event), and @animation-start, @animation-end.
Radar slots
| Slot | Props | Description |
|---|---|---|
#shape | RadarShapeSlotProps | Replace the polygon; includes points and presentation props |
#dot / #activeDot | Point geometry, payload and index | Replace a vertex dot or the active dot |
#label | LabelListSlotProps | Replace a vertex label |
The dot, active-dot and label props remain boolean or presentation-object toggles.
A supplied slot renders custom content. Slots return VNodeChild.