Metric Chart


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


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 generate lines string[] [“value”]
type Metric type enum[percent, difference, compare] “compare”
formatValue Function to format metric value (value: number) => HTMLElement null
caption Caption for describing metric string -
theme Theme used for chart styling Theme Keen Theme


List of theme properties supported by Metric Chart widget.

Property Description Type
metric.value Value settings { typography: Typography }
metric.caption Caption settings { typography: Typography }
metric.icon Icon settings { enabled: boolean, margins: Margins, type: IconType } Icon style enum[top, center, bottom]
metric.icon.position Icon position enum[solid, regular]
metric.excerpt Excerpt settings { typography: Typography, backgroundColor: string }
metric.excerpt.icons Excerpt icons settings { increase: Icon, decrease: Icon }