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.
Chart height.
'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.
Define style for common elements such as labels, axes…
Define chart's colors.
Define patterns and gradients.
Define rules to apply patterns and gradients
Patterns.
0Slices border width.
Method to compute border color.
trueEnable/disable arc labels.
'formattedValue'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.
0.5Define the radius to use to determine the label position, starting from inner radius, this is expressed as a ratio.
0Skip label if corresponding arc's angle is lower than provided value.
Defines how to compute arc label text color.
trueEnable/disable arc link labels.
'id'Arc link label
0Skip label if corresponding slice's angle is lower than provided value.
0Link offset from pie outer radius, useful to have links overlapping pie slices.
16Link diagonal length.
24Length of the straight segment of the links.
6X offset from links' end.
1Links stroke width.
#333333Defines how to compute arc link label text color.
Defines how to compute arc link label link color.
'arcs', 'arcLinkLabels', 'arcLabels', 'legends']Defines the order of layers and add custom layers.
trueEnable/disable interactivity.
0Extends active slice inner radius.
0Extends active slice outer radius.
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.
Custom tooltip component
Showcase custom tooltip.
trueEnable/disable transitions.
'gentle'Motion config for react-spring, either a preset or a custom configuration.
'innerRadius'Define how transitions behave.
Optional chart's legends.
Defines legend anchor relative to chart's viewport.
Legend direction, must be one of 'column', 'row'.
Justify symbol and label.
Legend block x translation.
Legend block y translation.
Legend item width.
Legend item height.
Spacing between each item.
Item symbol size.
Item layout direction.