Donut Chart

Plot

The plot is a part of keen.io/charts package and can be used in React environment as standalone component.

API

Property Description Type Default
data Chart data Record<string, any> -
labelSelector Name of data object property used to create labels on axis string -
keys Keys picked from data object used to genrate slices string[] [“value”]
disabledLabels Labels that are disabled for rendering data series string []
padAngle Spacing between pie slices number 0.02
padRadius Radius between pie slices number 100
cornerRadius Arc corner radius number 2
innerRadius Radius of inner circle - relative to outer radius [0, 1] number 0.5
labelsRadius The radius for slice labels number 30
labelsPosition Show labels inside or outside pie slices enum[inside, outside] “inside”
labelsAutocolor Automatically adjust labels color boolean true
stackTreshold Stack the arcs if percent value is lower than provided treshold number 4
theme Theme used for chart styling Theme Keen Theme
svgDimensions SVG height and width Dimension “auto”
margins SVG margins Margins { top: 30, right: 20, bottom: 30, left: 40 }

Theme

List of theme properties supported by Donut Chart widget.

Property Description Type
colors Colors applied on bars string[]
pie.labels Labels settings { enabled: boolean, typography: Typography }

Playground