Bubble 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”
valueKey Key used to calculate the area dimension string “value”
minAreaRadius Minimum area radius number 5
maxAreaRadius Maximum area radius number 40
xScaleSettings X Scale settings ScaleSettings { type: ‘linear’ }
yScaleSettings Y Scale settings ScaleSettings { type: ‘linear’ }
xAxisTitle Title for X Axis string -
yAxisTitle Title for Y Axis string -
xDomainKey Key used to create domain for X scale string -
yDomainKey Key used to create domain for Y scale string -
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 Bubble 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