Skip to content
Theme UI
GitHub

Donut

Single value SVG donut chart

import { Donut } from '@theme-ui/components'

Props

NameTypeDescription
valueNumberValue to display in the chart
minNumber(default 0) Minimum value
maxNumber(default 1) Maximum value
titleStringText for SVG <title> tag
sizeNumber(default 128) chart diameter
strokeWidthNumber(default 2) stroke width

A title attribute should be provided to the component for accessibility purposes. By default aria-valuenow, aria-valuemin, and aria-valuemax are set using the component's props. The element uses role='img' by default. Pass any overrides or additional attributes for the SVG element as props.

Variants

Donut variants can be defined anywhere in the theme object.

// example theme variants
{
styles: {
donut: {
color: 'red',
},
},
}
// <Donut variant='styles.donut' />
Edit the page on GitHub
Previous:
Progress
Next:
Spinner