Pie | nivo

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.

Start interacting with the chart to log actions

Base

dataobject[]required

Chart data, which should be immutable.

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

ID accessor.

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

Value accessor.

valueFormatstring | (value: number) => string | numberoptional

enable formattingformat

open editor

Optional formatter for values.

widthnumberrequired

Chart width.

heightnumberrequired

Chart height.

pixelRationumberoptionaldefault:'Depends on device'

Adjust pixel ratio, useful for HiDPI screens.

supportsvgcanvasapi

startAnglenumberoptionaldefault:0

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

endAnglenumberoptionaldefault:360

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

fitbooleanoptionaldefault:true

If 'true', pie will be omptimized to occupy more space when using partial pie.

innerRadiusnumberoptionaldefault:0

Donut chart if greater than 0. Value should be between 0~1 as it's a ratio from original radius.

padAnglenumberoptionaldefault:0

Padding between each pie slice.

cornerRadiusnumberoptionaldefault:0

Rounded slices.

sortByValuebooleanoptionaldefault:false

If 'true', arcs will be ordered according to their associated value.

marginobjectoptional

top

right

bottom

left

Chart margin.

Style

themeoptional

Define style for common elements such as labels, axes…

colorsstring | Function | string[]optionaldefault:{"scheme":"nivo"}

nivo

Defines color range.

defsobject[]optional

Define patterns and gradients.

supportsvgcanvasapi

fillobject[]optional

Define rules to apply patterns and gradients

supportsvgcanvasapi

showcase pattern usagebooleanoptional

Patterns.

supportsvgcanvasapi

borderWidthnumberoptionaldefault:0

Slices border width.

borderColorstring | object | Functionoptionaldefault:{"from":"color","modifiers":[["darker",1]]}

inheritthemecustom

inherited property

color

modifiers

darker

Method to compute border color.

Radial labels

enableRadialLabelsbooleanoptionaldefault:true

Enable/disable radial labels.

radialLabelstring | Functionoptionaldefault:'id'

Radial label

radialLabelsSkipAnglenumberoptionaldefault:0

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

radialLabelsLinkOffsetnumberoptionaldefault:0

Link offset from pie outer radius, useful to have links overlapping pie slices.

radialLabelsLinkDiagonalLengthnumberoptionaldefault:16

Link diagonal length.

radialLabelsLinkHorizontalLengthnumberoptionaldefault:24

Links horizontal length.

radialLabelsTextXOffsetnumberoptionaldefault:6

X offset from links' end.

radialLabelsLinkStrokeWidthnumberoptionaldefault:1

Links stroke width.

radialLabelsTextColorstring | object | Functionoptionaldefault:{"theme":"labels.text.fill"}

inheritthemecustom

#333333

Defines how to compute radial label text color.

radialLabelsLinkColorstring | object | Functionoptionaldefault:{"theme":"axis.ticks.line.stroke"}

inheritthemecustom

inherited property

color

modifiers

No modifier.

Defines how to compute radial label link color.

Slice labels

enableSliceLabelsbooleanoptionaldefault:true

Enable/disable slices labels.

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

sliceLabelsRadiusOffsetnumberoptionaldefault:0.5

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

sliceLabelsSkipAnglenumberoptionaldefault:0

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

sliceLabelsTextColorstring | object | Functionoptionaldefault:{"theme":"labels.text.fill"}

inheritthemecustom

#333333

Defines how to compute slice label text color.

Customization

layersArray<string | Function>optionaldefault:['slices', 'radialLabels', 'sliceLabels', 'legends']

Defines the order of layers and add custom layers.

Interactivity

isInteractivebooleanoptionaldefault:true

Enable/disable interactivity.

supportsvgcanvasapi

onMouseEnter(node, event) => voidoptional

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

supportsvgcanvasapi

onMouseMove(node, event) => voidoptional

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

supportsvgcanvasapi

onMouseLeave(node, event) => voidoptional

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

supportsvgcanvasapi

onClick(node, event) => voidoptional

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

supportsvgcanvasapi

Legends

legend[0]: bottom, rowremove

anchorstringoptional

bottom

Defines legend anchor relative to chart's viewport.

supportsvgcanvasapi

direction'column' | 'row'optional

columnrow

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

supportsvgcanvasapi

justifybooleanoptional

Justify symbol and label.

supportsvgcanvasapi

translateXnumberoptional

Legend block x translation.

supportsvgcanvasapi

translateYnumberoptional

Legend block y translation.

supportsvgcanvasapi

itemWidthnumberrequired

Legend item width.

supportsvgcanvasapi

itemHeightnumberrequired

Legend item height.

supportsvgcanvasapi

itemsSpacingnumberoptional

Spacing between each item.

supportsvgcanvasapi

symbolSizenumberoptional

Item symbol size.

supportsvgcanvasapi

itemDirectionstringoptional

left-to-right

Item layout direction.

supportsvgcanvasapi