Pie Chart ^0.1.18

Proportional slices from a whole. Supports pie, donut, padding, rounded corners, custom colors, legend, and center text.

Basic

Chrome62

Safari19

Edge9

Firefox5

Other5

<VxPieChart :data="browsers" />

Donut

Chrome62

Safari19

Edge9

Firefox5

Other5

<VxPieChart :data="browsers" donut />

Donut with center text

Enterprise4.8k

Business2.3k

Pro1.2k

Free180

<VxPieChart :data="revenue" donut centerText="$8.5k" centerSubtext="Monthly revenue" />

Custom colors

Housing1.2k

Food450

Transport280

Entertainment180

Savings600

<VxPieChart
  :data="[
    { name: 'Housing', value: 1200, color: '#6366f1' },
    { name: 'Food',    value: 450,  color: '#22c55e' },
    ...
  ]"
  donut
/>

With slice labels

Chrome62

Safari19

Edge9

Firefox5

Other5

<VxPieChart :data="data" showLabels />

Values instead of percents

Enterprise4.8k

Business2.3k

Pro1.2k

Free180

<VxPieChart :data="data" donut showValues :showPercents="false" />

Storage gauge (binary donut)

<VxPieChart
  :data="[
    { name: 'Used', value: 68, color: '#6366f1' },
    { name: 'Free', value: 32, color: 'var(--muted)' },
  ]"
  donut
  :innerRadius="0.72"
  :legend="false"
  centerText="68%"
  centerSubtext="of 500 GB used"
/>

No padding, no corner radius

Direct45

Organic32

Referral18

Social12

Email8

<VxPieChart :data="data" :padAngle="0" :cornerRadius="0" />

Live updates

Option A42

Option B28

Option C18

Option D12

<VxButton @click="addVote">Add random votes</VxButton>
<VxPieChart :data="votes" donut />

Interactive playground

Inner radius0.60Corner4

Chrome62

Safari19

Edge9

Firefox5

Other5

Props

Prop	Type	Default	Description
data	number[] | PieChartSlice[]	[]	Values or { name, value, color? }[]
labels	string[]	[]	Names when data is numbers
size	number	280	Chart diameter
donut	boolean	false	Render as donut
innerRadius	number	0.55	Donut inner ratio (0–1)
padAngle	number	0.015	Gap between slices in radians
cornerRadius	number	2	Slice corner radius
colors	string[]	[]	Palette override
legend	boolean	true	Show legend
showLabels	boolean	false	Inline slice name
showValues	boolean	false	Inline numeric value
showPercents	boolean	true	Inline percent
centerText	string	''	Donut center title
centerSubtext	string	''	Donut center subtitle
startAngle	number	-90	Starting angle in degrees
tooltip	boolean	true	Show hover tooltip
animate	boolean	true	Sweep-in on mount
animationDuration	number	700	Animation ms

Events

Event	Payload
hover	{ index, slice }
click	{ index, slice }