import { DonutChart } from '@uhg-abyss/mobile';

progress

size

animationDuration

color

<DonutChart />

Progress

The progress prop determines how far the accumulator will move. The prop accepts numbers between 0 and 100. The default is 0.

Animation Duration

The animationDuration prop is used to determine how long the donut chart takes to animate (milliseconds). The default is 500.

Color

The color prop is used to set the color for the donut chart. The default is $donut-chart.color.surface.container.green.

DonutChart Props

Prop Name	Type	Default	Description
animationDuration	number	500	Set the time it takes to animate the donut chart
progress	number	0	The percentage of the bar that is filled. Value between 0 and 100
size	number	40	Set the size of the donut chart

DonutChart Classes

Class Name	Description
abyss-donut-chart-root	Donut chart root element

DonutChart Translations

Translation Key	Value
DonutChart.percentage	{{progress}} percent

Search tokens

DonutChart Tokens

Token Name	Value
donut-chart.color.surface.container.green	#149E8F
donut-chart.color.surface.container.primary	#002677
donut-chart.color.surface.container.info	#196ECF
donut-chart.color.surface.container.white	#FFFFFF
donut-chart.color.border.green	#15A796
donut-chart.color.border.primary	#002677
donut-chart.color.border.info	#196ECF
donut-chart.color.border.white	#FFFFFF
donut-chart.border-radius.all.container	500
donut-chart.border-radius.all.track	500
donut-chart.border-width.all.container	1
donut-chart.border-width.all.track	1
donut-chart.sizing.all.container.md	40
donut-chart.spacing.padding.all.container	1

Due to React Native limitations, this component enables keyboard access despite not having an interactive element. This component requires an accessibility label for use with a screen reader, which enables keyboard focus.

DonutChart Props

V2	V1	Status
animationDuration	animationDuration	Modified
color	-	Added
progress	progress	Unchanged
size	size	Modified