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 ResponsivePie.
This component is available in the @nivo/api, see
sample or
try it using the API client.
You can also see more example usages in
the storybook.
See the dedicated guide on how to setup legends for this component.
Chart data, which should be immutable.
'id'ID accessor which should return a unique value for the whole dataset.
'value'Value accessor.
Optional formatter for values.
Chart width for non-responsive component.
Chart default width for responsive component.
Chart height for non-responsive component.
Chart default height for responsive component.
Debounce width/height updates for responsive component.
A callback for when responsive component is resized.
'Depends on device'Adjust pixel ratio, useful for HiDPI screens.
Chart margin.
0Start angle (in degrees), useful to make gauges for example.
360End angle (in degrees), useful to make gauges for example.
trueIf 'true', pie will be optimized to occupy more space when using partial pie.
0Donut chart if greater than 0. Value should be between 0~1 as it's a ratio from original radius.
0Padding between each pie slice.
0Rounded slices.
falseIf 'true', arcs will be ordered according to their associated value.
Ref to the chart's container. Used on this page to generate/download the chart's image via html-to-image.