Leave Yamada UI a star

Star
Yamada UIYamada UIv1.6.4

DonutChart

DonutChart is a component for drawing donut charts to compare multiple sets of data.

Source@yamada-ui/charts

Props

DonutChartProps

data

Required

Description

Chart data.

Type

CellProps[]

cellProps

Description

Props for the cell.

Type

Partial<CellProps>

chartProps

Description

Props passed down to recharts PieChart component.

Type

PieChartProps

colorScheme

Description

The visual color appearance of the component.

Type

"blackAlpha" | "whiteAlpha" | "amber" | "blue" | "info" | "link" | "primary" | "cyan" | "emerald" | "flashy" | "fuchsia" | "gray" | "green" | "success" | "indigo" | "lime" | "neutral" | "orange" | "warning" | "pink" | "purple" | "red" | "danger" | "rose" | "sky" | "teal" | "violet" | "secondary" | "yellow"

containerProps

Description

Props passed down to recharts ResponsiveContainer component.

Type

ResponsiveContainerProps

endAngle

Description

Controls angle at which chart ends.

Type

number

Default

-270

fillOpacity

Description

Controls fill opacity of all pies.

Type

number | [number, number]

Default

1

innerRadius

Description

Controls innerRadius of the chart segments. If it is a number, it is the width of the radius. For example, 60 means the radius is 60px and the diameter is 120px.

Type

string | number

Default

'0%'

isPercent

Description

Determines whether labels should be displayed as percentages.

Type

boolean

Default

false

labelFormatter

Description

A function to format labels.

Type

(value: number) => string

labelOffset

Description

Distance between chart and label.

Type

number

labelProps

Description

Props passed down to recharts 'Label' component.

Type

LabelProps

legendProps

Description

Props passed down to recharts 'Legend' component.

Type

LegendProps

outerRadius

Description

Controls thickness of the chart segments. If it is a number, it is calculated as px. If it is a number, it is the width of the radius. For example, 60 means the radius is 60px and the diameter is 120px.

Type

string | number

Default

'80%'

paddingAngle

Description

Controls padding between segments.

Type

number

Default

0

pieProps

Description

Props for the pie.

Type

Partial<PieProps>

size

Description

The size of the DonutChart.

Type

"sm" | "md" | "lg"

Default

"md"

startAngle

Description

Controls angle at which chart starts.

Type

number

Default

90

strokeWidth

Description

Stroke width for the chart pies.

Type

number

Default

1

tooltipAnimationDuration

Description

Specifies the duration of animation, the unit of this option is ms.

Type

number

Default

0

tooltipDataSource

Description

Determines which data is displayed in the tooltip.

Type

TooltipDataSourceType

Default

'all'

tooltipProps

Description

Props passed down to recharts 'Tooltip' component.

Type

TooltipProps

unit

Description

Unit displayed next to each value in tooltip.

Type

string

valueFormatter

Description

A function to format values on inside the tooltip.

Type

(value: any) => string

variant

Description

The variant of the DonutChart.

Type

string

withLabelLines

Description

Determines whether segments labels should have lines that connect the segment with the label.

Type

boolean

Default

false

withLabels

Description

Determines whether each segment should have associated label.

Type

boolean

Default

false

withLegend

Description

If true, legend is visible.

Type

boolean

Default

false

withTooltip

Description

If true, tooltip is visible.

Type

boolean

Default

true

Edit this page on GitHub

PreviousPieChartNextRadarChart