Pie

@nivo/pieradialsvgisomorphic

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.

Actions Logs
Start interacting with the chart to log actions
Base
object[]required
Chart data.
numberrequired
Chart width.
numberrequired
Chart height.
numberoptionaldefault:'Depends on device'
Adjust pixel ratio, useful for HiDPI screens.
supportsvgcanvasapi
numberoptionaldefault:0
°
Start angle, useful to make gauges for example.
numberoptionaldefault:360
°
End angle, useful to make gauges for example.
booleanoptionaldefault:true
   If 'true', pie will be omptimized to occupy more space when using partial pie.
numberoptionaldefault:0
Donut chart if greater than 0. Value should be between 0~1 as it's a ratio from original radius.
numberoptionaldefault:0
°
Padding between each pie slice.
numberoptionaldefault:0
px
Rounded slices.
booleanoptionaldefault:false
   If 'true', arcs will be ordered according to their associated value.
objectoptional
px
px
px
px
Chart margin.
Style
string | Function | string[]optionaldefault:{"scheme":"nivo"}
nivo
Defines color range.
object[]optional
Defines patterns and gradients.
supportsvgcanvasapi
object[]optional
Defines rules to apply patterns and gradients
supportsvgcanvasapi
booleanoptional
   Patterns.
supportsvgcanvasapi
numberoptionaldefault:0
px
Slices border width.
string | object | Functionoptionaldefault:{"from":"color","modifiers":[["darker",1]]}
inheritthemecustom
inherited property
color
modifiers
darker
Method to compute border color.
Radial labels
booleanoptionaldefault:true
   Enable/disable radial labels.
string | Functionoptionaldefault:'id'
id
Radial label
numberoptionaldefault:0
°
Skip label if corresponding slice's angle is lower than provided value.
numberoptional
px
Link offset from pie outer radius, useful to have links overlapping pie slices.
numberoptional
px
Link diagonal length.
numberoptional
px
Links horizontal length.
numberoptional
px
X offset from links' end.
numberoptional
px
Links stroke width.
string | object | Functionoptionaldefault:{"theme":"labels.text.fill"}
inheritthemecustom
#333333
Defines how to compute radial label text color.
string | object | Functionoptionaldefault:{"theme":"axis.ticks.line.stroke"}
inheritthemecustom
inherited property
color
modifiers
No modifier.
Defines how to compute radial label link color.
Slices labels
booleanoptionaldefault:true
   Enable/disable slices labels.
string | Functionoptionaldefault:'value'
value
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.
numberoptionaldefault:0
°
Skip label if corresponding slice's angle is lower than provided value.
string | object | Functionoptionaldefault:{"theme":"labels.text.fill"}
inheritthemecustom
#333333
Defines how to compute slice label text color.
Interactivity
booleanoptionaldefault:true
   Enable/disable interactivity.
supportsvgcanvasapi
Functionoptional
onClick handler.
supportsvgcanvasapi
Functionoptional
Custom tooltip component
supportsvgcanvasapi
booleanoptional
   Showcase custom tooltip.
supportsvgcanvasapi