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
Arc labels
Arc link labels
Customization
Interactivity
Motion
Legends
Recipes
Using colors from dataSync activeId between two piesImplementing a custom legend