vue-charts Charts
Pie Chart
Build pie and donut charts for part-to-whole comparisons
Pie charts display data as proportional slices of a circle.
Simple Pie Chart
Donut Chart
Set innerRadius to create a donut.
Pie Chart with Labels
Set :label="true" to show labels outside each slice.
Half Pie Chart
Use startAngle and endAngle to create a semicircle.
PieChart props
<PieChart> takes the chart container props, including the polar
props. Its tooltip shows one sector at a time.
Pie props
| Prop | Type | Default | Description |
|---|---|---|---|
data-key | row path or accessor | required | Field with the value |
name-key | row path or accessor | 'name' | Field with the sector name; a sector without one takes name, else a string data-key, else its row index |
data | Array | the chart's data | Rows for this pie |
cx, cy | number | string | '50%' | Center |
inner-radius | number | string | 0 | Inner radius; above 0 draws a donut |
outer-radius | number | string | function | '80%' | Outer radius |
start-angle | number | 0 | Start angle in degrees |
end-angle | number | 360 | End angle in degrees |
padding-angle | number | 0 | Gap between sectors in degrees |
corner-radius | number | string | — | Rounds the corners of every sector, in px |
min-angle | number | 0 | Minimum sector angle, so small values stay visible |
fill | string | series palette per sector | Sector fill; <Cell> sets one sector |
stroke | string | 'var(--v-charts-background, #fff)' | Sector outline |
label | boolean | false | Show a label outside every sector |
label-line | boolean | true | Draw a line from the sector to its label |
active-index | number | null | — | Active sector, for v-model:active-index |
name | string | number | — | Series name in the tooltip; legend name of sectors without their own |
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 (sector, index, event), update:activeIndex, and @animation-start, @animation-end.
Pie slots
| Slot | Props | Description |
|---|---|---|
#shape | PieSectorDataItem & { isActive } | Replace a sector |
#activeShape | PieSectorDataItem & { isActive } | Replace the active sector |
#label | PieSectorDataItem & { index } | Replace a sector label |
| default | — | <Cell> for per-sector colors, <LabelList> |