PieChart

Show proportions with pie, donut, and semi-donut shapes.

Interactive playground

LIVE PREVIEW

Loading preview…

Generated code

import { PieChart } from '@vrum/ui';

<PieChart
  title={"Work by team"}
  data={[{"label":"Design","value":42},{"label":"Engineering","value":36},{"label":"Operations","value":22}]}
  type={"donut"}
  innerRadius={0.65}
  centerLabel={"100"}
  showLabels={true}
  showLegend={true}
  showDataTable={false}
  width={500}
  height={300}
/>

PieChart props

Prop	Type	Default	Description
`data*`	`PieDatum[]`	none	Data used to render this component.
`type`	`"pie" \| "donut" \| "semi-donut"`	`"donut"`	Interaction or visualization type.
`innerRadius`	`number`	`0.65`	inner radius configuration.
`centerLabel`	`string`	none	center label configuration.
`showLabels`	`boolean`	`true`	show labels configuration.
`title`	`string`	none	Heading shown above the content.
`description`	`string`	none	Supporting explanation.
`width`	`number`	`500`	Width used for the SVG viewBox.
`height`	`number`	`300`	Height of the component in pixels.
`className`	`string`	none	Additional CSS classes.
`colors`	`string[]`	`chartPalette`	colors configuration.
`showLegend`	`boolean`	none	Display series or category labels.
`showDataTable`	`boolean`	none	Expand the accessible data table.
`onPointClick`	`((point: ChartPoint) => void)`	none	Called when a chart point is activated with a pointer or keyboard.
`valueFormat`	`((value: number) => string)`	`String`	value format configuration.

PieChart

Show proportions with pie, donut, and semi-donut shapes.

Interactive playground

LIVE PREVIEW

Work by team

View data

Category	Value	Share
Design	42	42.0%
Engineering	36	36.0%
Operations	22	22.0%

Loading preview…

Generated code

import { PieChart } from '@vrum/ui';

<PieChart
  title={"Work by team"}
  data={[{"label":"Design","value":42},{"label":"Engineering","value":36},{"label":"Operations","value":22}]}
  type={"donut"}
  innerRadius={0.65}
  centerLabel={"100"}
  showLabels={true}
  showLegend={true}
  showDataTable={false}
  width={500}
  height={300}
/>

PieChart props

Prop	Type	Default	Description
`data*`	`PieDatum[]`	none	Data used to render this component.
`type`	`"pie" \| "donut" \| "semi-donut"`	`"donut"`	Interaction or visualization type.
`innerRadius`	`number`	`0.65`	inner radius configuration.
`centerLabel`	`string`	none	center label configuration.
`showLabels`	`boolean`	`true`	show labels configuration.
`title`	`string`	none	Heading shown above the content.
`description`	`string`	none	Supporting explanation.
`width`	`number`	`500`	Width used for the SVG viewBox.
`height`	`number`	`300`	Height of the component in pixels.
`className`	`string`	none	Additional CSS classes.
`colors`	`string[]`	`chartPalette`	colors configuration.
`showLegend`	`boolean`	none	Display series or category labels.
`showDataTable`	`boolean`	none	Expand the accessible data table.
`onPointClick`	`((point: ChartPoint) => void)`	none	Called when a chart point is activated with a pointer or keyboard.
`valueFormat`	`((value: number) => string)`	`String`	value format configuration.

PieChart

Interactive playground

Props

PieChart props

PieChart

Interactive playground

Props

PieChart props