DonutChart

Live preview

Loading example…

Donut, pie and semi-donut. Rounded slice corners and a pixel gap between slices, a centre total that follows the hovered slice, slices that step out on hover or keyboard focus, optional outside labels on leader lines (with collision avoidance) and a legend that toggles slices.

Import

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

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

Usage

<DonutChart
  title="Ingresos por servicio en octubre"
  data={services}
  valueFormat="currency"
  variant="donut"
  semi={false}
  innerRadius={0.62}
  cornerRadius={6}
  gap={3}
  explode={8}
  startAngle={0}
  outsideLabels={false}
  height={320}
  tooltip
  loading={false}
  animate
  labels={spanishLabels}
/>

Props

Prop	Type	Default	Description
`title` *	`string`		Accessible name of the drawing.
`description`	`string`
`data` *	`readonly DonutDatum[]`
`variant`	`"donut" \| "pie"`	`"donut"`	`pie` fills the centre (no centre label).
`semi`	`boolean`	`false`	Half circle opening upwards, like a gauge.
`innerRadius`	`number`	`0.62`	Hole size as a fraction of the outer radius (donut only).
`cornerRadius`	`number`	`6`	Radius of the rounded slice corners, in pixels. 0 = sharp.
`gap`	`number`	`3`	Visible gap between slices, in pixels.
`explode`	`number`	`8`	Pixels a hovered or focused slice moves outwards.
`startAngle`	`number`	`0`	Where the first slice starts, in degrees from 12 o’clock (full circle only).
`monochrome`	`string \| boolean`	`false`	One hue in shades, darkest on the largest slice. `true` uses the accent; a string sets the base color.
`fill`	`"pattern" \| "solid" \| "gradient"`	`"solid"`	`gradient` fades each slice towards the hole; `pattern` adds a texture per slice, so color is not the only cue.
`drilldown`	`boolean`	`true`	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`	`"Drill-down path"`	Accessible name of the breadcrumb.
`height`	`number \| "fill"`	`300`
`aspectRatio`	`number`		Width / height ratio; sizes the drawing from the container width when `height` is not “fill”.
`valueFormat`	`ValueFormat`
`centerLabel`	`string`		Caption under the centre value when nothing is hovered. Defaults to the “Total” label.
`centerValue`	`string`		Replaces the total shown in the centre while nothing is hovered.
`outsideLabels`	`boolean \| "name" \| "percent" \| "both"`	`false`	Names / percentages on leader lines around the ring. `true` shows both.
`legend`	`boolean \| "top" \| "bottom"`
`tooltip`	`boolean`	`true`
`loading`	`boolean`	`false`
`animate`	`boolean`	`true`
`initialHidden`	`readonly string[]`		Ids hidden at first.
`onSliceClick`	`((datum: DonutDatum) => void)`
`labels`	`Partial<ChartLabels>`
`className`	`string`

* marks a required prop.

Storybook stories

Source

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