Bubble Chart
<BubbleChart
data={query_name}
x=column_x
y=column_y
size=column_size
/>
Examples
Bubble
<BubbleChart
data={simple_example}
x=x
y=y
size=size
xAxisTitle=true
yAxisTitle=true
/>
Multi-Series Bubble
<BubbleChart
data={scores_by_region}
x=score_a
y=score_b
size=size
series=region
xAxisTitle=true
yAxisTitle=true
/>
Props
Data
| Name | Description | Required? | Options | Default |
|---|---|---|---|---|
| data | Query name, wrapped in curly braces | Yes | query name | - |
| x | Column to use for the x-axis of the chart | Yes | column name | First column |
| y | Column(s) to use for the y-axis of the chart | Yes | column name | array of column names | Any non-assigned numeric columns |
| sort | Whether to apply default sort to your data. Default is x ascending for number and date x-axes, and y descending for category x-axes | - | true | false | true |
| series | Column to use as the series (groups) in a multi-series chart | - | column name | - |
| size | Column to use to scale the size of the bubbles | Yes | column name | - |
| tooltipTitle | Column to use as the title for each tooltip. Typically, this is a name to identify each point. | - | column name | - |
Series
| Name | Description | Required? | Options | Default |
|---|---|---|---|---|
| shape | Options for which shape to use for bubble points | - | circle | emptyCircle | rect | triangle | diamond | circle |
| scaleTo | Scale the size of the bubbles by this factor (e.g., 2 will double the size) | - | number | 1 |
| opacity | % of the full color that should be rendered, with remainder being transparent | - | number (0 to 1) | 0.7 |
| fillColor | Color to override default series color. Only accepts a single color. | - | CSS name | hexademical | RGB | HSL | - |
| outlineWidth | Width of line surrounding each shape | - | number | 0 |
| outlineColor | Color to use for outline if outlineWidth > 0 | - | CSS name | hexademical | RGB | HSL | - |
Chart
| Name | Description | Required? | Options | Default |
|---|---|---|---|---|
| title | Chart title. Appears at top left of chart. | - | string | - |
| subtitle | Chart subtitle. Appears just under title. | - | string | - |
| legend | Turns legend on or off. Legend appears at top center of chart. | - | true | false | true for multiple series |
| xAxisTitle | Name to show under x-axis. If 'true', formatted column name is used. Only works with swapXY=false | - | true | string | false | true |
| yAxisTitle | Name to show beside y-axis. If 'true', formatted column name is used. | - | true | string | false | true |
| xGridlines | Turns on/off gridlines extending from x-axis tick marks (vertical lines when swapXY=false) | - | true | false | false |
| yGridlines | Turns on/off gridlines extending from y-axis tick marks (horizontal lines when swapXY=false) | - | true | false | true |
| xAxisLabels | Turns on/off value labels on the x-axis | - | true | false | true |
| yAxisLabels | Turns on/off value labels on the y-axis | - | true | false | true |
| xBaseline | Turns on/off thick axis line (line appears at y=0) | - | true | false | true |
| yBaseline | Turns on/off thick axis line (line appears directly alongside the y-axis labels) | - | true | false | false |
| xTickMarks | Turns on/off tick marks for each of the x-axis labels | - | true | false | false |
| yTickMarks | Turns on/off tick marks for each of the y-axis labels | - | true | false | false |
| yMin | Starting value for the y-axis | - | number | - |
| yMax | Maximum value for the y-axis | - | number | - |