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.
string | (datum: RawDatum): numberoptionaldefault:'id'
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
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 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
optional
Define style for common elements such as labels, axes…
string | Function | string[]optionaldefault:{"scheme":"nivo"}
paired
Defines color range.
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.
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.
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
Links horizontal length.
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 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.
Slice labels
booleanoptionaldefault:true
   Enable/disable slices 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 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.
Customization
Array<string | Function>optionaldefault:['slices', 'radialLabels', 'sliceLabels', 'legends']
Defines the order of layers and add custom layers.
Interactivity
booleanoptionaldefault:true
   Enable/disable interactivity.
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
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