import { DonutChart } from '@uhg-abyss/mobile';() => { return <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
| Name | Type | Default | Required | Description |
|---|---|---|---|---|
animationDuration | number | undefined | 500 | - | Set the time it takes to animate the donut chart |
color | Abyss.Color | undefined | '$donut-chart.color.surface.container.green' | - | Set the color for the donut chart |
progress | number | undefined | 0 | - | The percentage of the bar that is filled. Value between 0 and 100 |
size | number | undefined | 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 |
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 |