The Donut component is a circular chart that shows the relative share of commit status states for a pull request.
data prop is the simplest way to define the share of states. It takes an object literal with states as keys and the number of statuses with that state as values. Slices are always rendered clockwise in descending order by size.
When using the
data prop, the fill of each slice comes from the corresponding value in the theme's
colors.state object. In other words, if
theme.colors.state.error = "red", then the
error slice will get
fill="red". You can customize the slice colors by either passing a custom
theme prop or using the
Donut.Slice component described below.
Donut components get
space system props. Read our System Props doc page for a full list of available props.
|data||Object||Use the keys |
|size||Number||Used to set the width and height of the component|
If you need to customize the color of your slices, you can use the
Donut.Slice component as a child of
|state||String||The commit status state which this slice represents|
|value||Number||The number of statuses with this slice's state|
|fill||String||The fill color of the slice, which overrides the color determined by the |