Metric Chart

The plot is a part of keen.io/charts 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` }
metric.icon.style	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` }