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 |