Donut
Single value SVG donut chart
import { Donut } from 'theme-ui'
Props
| Name | Type | Description |
|---|---|---|
value | Number | Value to display in the chart |
min | Number | (default 0) Minimum value |
max | Number | (default 1) Maximum value |
title | String | Text for SVG <title> tag |
size | Number | (default 128) chart diameter |
strokeWidth | Number | (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.
Edit the page on GitHub// example theme variants{styles: {donut: {color: 'red',},},}// <Donut variant='styles.donut' />