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.
0
Start angle (in degrees), useful to make gauges for example.
360
End angle (in degrees), useful to make gauges for example.
true
If 'true', pie will be optimized to occupy more space when using partial pie.
0
Donut chart if greater than 0. Value should be between 0~1 as it's a ratio from original radius.
0
Padding between each pie slice.
0
Rounded slices.
false
If '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.
0
Slices border width.
Method to compute border color.
true
Enable/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.5
Define the radius to use to determine the label position, starting from inner radius, this is expressed as a ratio.
0
Skip label if corresponding arc's angle is lower than provided value.
Defines how to compute arc label text color.
true
Enable/disable arc link labels.
'id'
Arc link label
0
Skip label if corresponding slice's angle is lower than provided value.
0
Link offset from pie outer radius, useful to have links overlapping pie slices.
16
Link diagonal length.
24
Length of the straight segment of the links.
6
X offset from links' end.
1
Links stroke width.
#333333
Defines 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.
true
Enable/disable interactivity.
0
Extends active slice inner radius.
0
Extends active slice outer radius.
Programmatically control the activeId
.
Programmatically control the activeId
.
Default activeId
.
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.
true
Enable/disable transitions.
'gentle'
Motion config for react-spring, either a preset or a custom configuration.
'innerRadius'
Define how transitions behave.
Can be used to get the computed legend data.
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.