Generates a pie chart from an array of data, each datum must have an
id and a value property.
Note that margin object does not take radial labels into account,
so you should adjust it to leave enough room for it.
The responsive alternative of this component is
This component is available in the
try it using the API client.
You can also see more example usages in
dedicated guide on how to setup
legends for this component. chart code data roll the dice
Start interacting with the chart to log actions
Define style for common elements such as labels, axes… Define patterns and gradients. Define rules to apply patterns and gradients inherit theme custom
Method to compute border color.
Enable/disable arc labels. Defines how to get label text, can be a string (used to access current node data property) or a function which will receive the actual node data.
Define the radius to use to determine the label position, starting from inner radius,
this is expressed as a ratio.
Skip label if corresponding arc's angle is lower than provided value. inherit theme custom
Defines how to compute arc label text color.
Arc link labels
Enable/disable arc link labels. Skip label if corresponding slice's angle is lower than provided value. Link offset from pie outer radius, useful to have links overlapping pie slices. Length of the straight segment of the links. X offset from links' end. inherit theme custom
Defines how to compute arc link label link color.
Defines the order of layers and add custom layers.
Skip label if corresponding slice's angle is lower than provided value. Skip label if corresponding slice's angle is lower than provided value. onMouseEnter handler, it receives target node data and mouse event. onMouseMove handler, it receives target node data and mouse event. onMouseLeave handler, it receives target node data and mouse event. onClick handler, it receives target node data and mouse event.
Motion config for react-spring, either a preset or a custom configuration. Define how transitions behave.
bottom Defines legend anchor relative to chart's viewport. Legend block x translation. Legend block y translation. Spacing between each item.