Skip to main content

DonutChart


Example

Group A
Group B
Group C
Group D
Group E
Group F
<DonutChart
height={300}
dataKey="name"
category="value"
data={[
{
name: "Group A",
value: 400,
},
{
name: "Group B",
value: 300,
},
{
name: "Group C",
value: 500,
},
{
name: "Group D",
value: 200,
},
{
name: "Group E",
value: 278,
},
{
name: "Group F",
value: 189,
},
]}
/>

Props

NameTypeDefault ValueRequiredDescription
dataColors("brandPrimary" | "brandSecondary" | "brandTertiary" | "backgroundPrimary" | "backgroundSecondary" | "backgroundOverlay" | "backgroundPrimaryInverse" | "backgroundSecondaryInverse" | ... 88 more ... | "brightPink")[]No
disableAnimationbooleanNo
hideLegendbooleanNo
hideTooltipbooleanNo
dataRecord<D | C, unknown>[]Yes
categorystringYes
dataKeystringYes
tooltipFormatterValueFormatterNo

Related components