PieCanvas

@nivo/pieradialcanvas
svgcanvashttp api

A variation around the Pie component. Well suited for large data sets as it does not impact DOM tree depth, however you'll lose the isomorphic ability and transitions.

The responsive alternative of this component is ResponsivePieCanvas.

See the dedicated guide on how to setup legends for this component.

18 nodes
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: Paired

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
#333333

Defines how to compute arc label text color.

Arc link labels
booleanoptionaldefault:true
   

Enable/disable arc link labels.

string | Functionoptionaldefault:'id'
id

Arc link label

numberoptionaldefault:0
°

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

numberoptionaldefault:0
px

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

numberoptionaldefault:16
px

Link diagonal length.

numberoptionaldefault:24
px

Length of the straight segment of the links.

numberoptionaldefault:6
px

X offset from links' end.

numberoptionaldefault:1
px

Links stroke width.

string | object | Functionoptionaldefault:{"theme":"labels.text.fill"}
inheritthemecustom
#333333

Defines how to compute arc link label text color.

string | object | Functionoptionaldefault:{"theme":"axis.ticks.line.stroke"}
inheritthemecustom
inherited property
color
modifiers
No modifier.

Defines how to compute arc link label link color.

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'

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

supportsvgcanvasapi
stringoptionaldefault:'innerRadius'

Define how transitions behave.

supportsvgcanvasapi
Legends
Legend[]optional

Optional chart's legends.

add legend
legend[0]: right, columnremove
stringoptional
right

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