Area 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 value for axis number or “auto” “auto”
maxValue Maximum value for axis number or “auto” “auto”
keys Keys picked from data object used to generate lines string[] [“value”]
disabledKeys Keys that are disabled for rendering data series string[] []
curve Lines interpolation enum[linear, spline, step] “linear”
markRadius Mark radius number 4
strokeWidth Line thickness number 1
xScaleSettings X Scale settings ScaleSettings { type: ‘band’ }
yScaleSettings Y Scale settings ScaleSettings { precision: ‘month’, type: ‘time’ }
xAxisTitle Title for X Axis string -
yAxisTitle Title for Y Axis string -
gradientMode Gradient on/off boolean true
areaMode Area mode boolean false
groupMode Group mode enum[grouped, stacked] “grouped”
stackMode Stack mode enum[normal, percent] “normal”
theme Theme used for chart styling Theme Keen Theme
svgDimensions SVG height and width Dimension “auto”
margins SVG margins Margins { top: 50, right: 20, bottom: 50, left: 40 }

Theme

List of theme properties supported by Line Chart widget.

Property Description Type
colors Colors applied on bars string[]
axisX Axis X theme settings Axis
axisY Axis Y theme settings Axis
gridX Grid X theme settings Grid
girdY Grid Y theme settings Grid
tooltip Tooltip settings Tooltip

Playground