Pie

@nivo/pieradial

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, which should be immutable.

string | (datum: RawDatum): string | numberoptionaldefault:'id'

ID accessor which should return a unique value for the whole dataset.

string | (datum: RawDatum): numberoptionaldefault:'value'

Value accessor.

string | (value: number) => string | numberoptional
open editor

Optional formatter for values.

numberrequired

Chart width.

numberrequired

Chart height.

numberoptionaldefault:'Depends on device'

Adjust pixel ratio, useful for HiDPI screens.

supportsvgcanvasapi
objectoptional
px
px
px
px

Chart margin.

numberoptionaldefault:0
°

Start angle (in degrees), useful to make gauges for example.

numberoptionaldefault:360
°

End angle (in degrees), useful to make gauges for example.

booleanoptionaldefault:true
   

If 'true', pie will be optimized 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.

Style
Themeoptional

Define style for common elements such as labels, axes…

OrdinalColorScaleConfigoptionaldefault:{"scheme":"nivo"}
Categorical: Nivo

Define chart's colors.

object[]optional

Define patterns and gradients.

supportsvgcanvasapi
object[]optional

Define 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.

Arc labels
booleanoptionaldefault:true
   

Enable/disable arc labels.

string | Functionoptionaldefault:'formattedValue'
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.

numberoptionaldefault:0.5

Define the radius to use to determine the label position, starting from inner radius, this is expressed as a ratio.

numberoptionaldefault:0
°

Skip label if corresponding arc's angle is lower than provided value.

string | object | Functionoptionaldefault:{"theme":"labels.text.fill"}
inheritthemecustom
inherited property
color
modifiers
darker

Defines how to compute arc label text color.

Arc link labels
Customization
Array<string | Function>optionaldefault:['arcs', 'arcLinkLabels', 'arcLabels', 'legends']

Defines the order of layers and add custom layers.

Interactivity
booleanoptionaldefault:true
   

Enable/disable interactivity.

supportsvgcanvasapi
numberoptionaldefault:0
px

Extends active slice inner radius.

supportsvgcanvasapi
numberoptionaldefault:0
px

Extends active slice outer radius.

supportsvgcanvasapi
(node, event) => voidoptional

onMouseEnter handler, it receives target node data and mouse event.

supportsvgcanvasapi
(node, event) => voidoptional

onMouseMove handler, it receives target node data and mouse event.

supportsvgcanvasapi
(node, event) => voidoptional

onMouseLeave handler, it receives target node data and mouse event.

supportsvgcanvasapi
(node, event) => voidoptional

onClick handler, it receives target node data and mouse event.

supportsvgcanvasapi
Componentoptional

Custom tooltip component

supportsvgcanvasapi
booleanoptional
   

Showcase custom tooltip.

supportsvgcanvasapi
Motion
booleanoptionaldefault:true
   

Enable/disable transitions.

supportsvgcanvasapi
string | objectoptionaldefault:'gentle'
gentle

Motion config for react-spring, either a preset or a custom configuration.

supportsvgcanvasapi
stringoptionaldefault:'innerRadius'
innerRadius

Define how transitions behave.

supportsvgcanvasapi
Legends
Legend[]optional

Optional chart's legends.

add legend
legend[0]: bottom, rowremove
stringoptional
bottom

Defines legend anchor relative to chart's viewport.

supportsvgcanvasapi
'column' | 'row'optional

Legend direction, must be one of 'column', 'row'.

supportsvgcanvasapi
booleanoptional
   

Justify symbol and label.

supportsvgcanvasapi
numberoptional
px

Legend block x translation.

supportsvgcanvasapi
numberoptional
px

Legend block y translation.

supportsvgcanvasapi
numberrequired
px

Legend item width.

supportsvgcanvasapi
numberrequired
px

Legend item height.

supportsvgcanvasapi
numberoptional
px

Spacing between each item.

supportsvgcanvasapi
numberoptional
px

Item symbol size.

supportsvgcanvasapi
stringoptional
left-to-right

Item layout direction.

supportsvgcanvasapi