vue-charts Charts
Radial Bar Chart
Build radial bar charts for circular progress and comparison
Radial bar charts display data as concentric arcs, useful for progress indicators and circular comparisons.
Simple Radial Bar Chart
Radial Bar with Labels
Place <LabelList> as a child of <RadialBar> to show labels inside arcs.
Stacked Radial Bar
Use stack-id on multiple <RadialBar> components.
RadialBarChart props
<RadialBarChart> takes the chart container props, including bar sizing and the polar props.
RadialBar props
| Prop | Type | Default | Description |
|---|---|---|---|
data-key | row path or accessor | required | Field with the value |
fill | string | series palette per entry | Bar fill; <Cell> sets one bar |
fill-opacity | number | — | Fill opacity |
stroke, stroke-width, stroke-dasharray | bar fill (stroke) | Outline. Each bar sets its own stroke, so a CSS class on the series cannot override it; use the stroke prop | |
background | boolean | object | false | Draw a background arc |
label | boolean | object | false | Show a value label on every bar |
stack-id | string | number | — | Bars with the same id stack |
bar-size | number | string | the chart's value | Bar thickness |
max-bar-size | number | the chart's value | Upper limit of the bar thickness |
min-point-size | number | 0 | Minimum arc length |
corner-radius | number | string | 0 | Arc corner radius |
force-corner-radius | boolean | false | Round the corners of short arcs too |
corner-is-external | boolean | false | Round the corners outward |
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 (bar, index, event), and @animation-start, @animation-end.
RadialBar slots
| Slot | Props | Description |
|---|---|---|
#shape | RadialBarShapeSlotProps | Replace a sector; includes sector geometry, payload and colors |
#label | LabelListSlotProps | Replace a sector label |
Use label to enable default labels or supply #label for custom content.
Slots return VNodeChild.