PieChart

Live preview

Loading example…

A donut without the hole: same slices, rounded corners, gaps, explode on hover, outside labels and legend toggling (see DonutChart).

Import

import { PieChart } from "@jcsoftdev/ui/charts";

Single-component entry points tree-shake to just this component: @jcsoftdev/ui/charts/pie-chart.

Usage

<PieChart
  title="Ventas por medio de pago"
  data={payments}
  valueFormat="currency"
  semi={false}
  cornerRadius={8}
  gap={3}
  explode={10}
  outsideLabels={false}
  height={320}
  tooltip
  loading={false}
  animate
  labels={spanishLabels}
/>

Props

Prop	Type	Default	Description
`data` *	`readonly DonutDatum[]`
`legend`	`boolean \| "top" \| "bottom"`
`title` *	`string`		Accessible name of the drawing.
`animate`	`boolean`
`className`	`string`
`fill`	`"pattern" \| "solid" \| "gradient"`		`gradient` fades each slice towards the hole; `pattern` adds a texture per slice, so color is not the only cue.
`tooltip`	`boolean`
`description`	`string`
`height`	`number \| "fill"`
`aspectRatio`	`number`		Width / height ratio; sizes the drawing from the container width when `height` is not “fill”.
`valueFormat`	`ValueFormat`
`loading`	`boolean`
`initialHidden`	`readonly string[]`		Ids hidden at first.
`labels`	`Partial<ChartLabels>`
`explode`	`number`		Pixels a hovered or focused slice moves outwards.
`semi`	`boolean`		Half circle opening upwards, like a gauge.
`gap`	`number`		Visible gap between slices, in pixels.
`cornerRadius`	`number`	`8`	Radius of the rounded slice corners, in pixels. 0 = sharp.
`startAngle`	`number`		Where the first slice starts, in degrees from 12 o’clock (full circle only).
`monochrome`	`string \| boolean`		One hue in shades, darkest on the largest slice. `true` uses the accent; a string sets the base color.
`drilldown`	`boolean`		Slices with `children` open on click (or Enter) with a breadcrumb to go back.
`rootLabel`	`string`		First breadcrumb item; defaults to the chart title.
`breadcrumbLabel`	`string`		Accessible name of the breadcrumb.
`outsideLabels`	`boolean \| "name" \| "percent" \| "both"`		Names / percentages on leader lines around the ring. `true` shows both.
`onSliceClick`	`((datum: DonutDatum) => void)`

* marks a required prop.

Storybook stories

Source

packages/ui/src/charts/pie-chart/pie-chart.tsx