Gauge 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 -
minValue Minimum progress value number or “auto” “auto”
maxValue Maximum progress value number or “auto” “auto”
valueKey Key used to calculate the gauge progress string “value”
startAngle Arc start angle number -120
endAngle Arc end angle number 120
colorSteps Progress color steps number 2
colorMode Color mode enum[continuous, discrete] “continuous”
formatValue Function used to format value (value: number) => HTMLElement null
progressType Type of gauge progress enum[normal, percent] “percent”
theme Theme used for chart styling Theme Keen Theme
svgDimensions SVG height and width Dimension “auto”
margins SVG margins Margins { top: 10, right: 0, bottom: 10, left: 0 }

Theme

List of theme properties supported by Gauge Chart widget.

Property Description Type
colors Colors applied on bars string[]
gauge.labels Labels settings { enabled: boolean, typography: Typography }
gauge.border Gauge border settings { backgroundColor: string }
gauge.total Total value settings { enabled: boolean, typography: Typography }

Playground