Bubble Chart
Use bubble charts to display categorical data across three metrics. The X and Y position, and the size of the bubble each represent a different metric for the category.
Loading...
<BubbleChart
data={price_vs_volume}
x=price
y=number_of_units
xFmt=usd0
series=category
size=total_sales
/>Examples
Default
Loading...
<BubbleChart
data={price_vs_volume}
x=price
y=number_of_units
size=total_sales
/>Multi-Series
Loading...
<BubbleChart
data={price_vs_volume}
x=price
y=number_of_units
series=category
size=total_sales
/>Options
Data
Required
Query name, wrapped in curly braces
- Options:
- query name
Required
Column to use for the x-axis of the chart
- Options:
- column name
- Default:
- First column
Required
Column(s) to use for the y-axis of the chart
- Options:
- column name | array of column names
- Default:
- Any non-assigned numeric columns
Column to use as the series (groups) in a multi-series chart
- Options:
- column name
Required
Column to use to scale the size of the bubbles
- Options:
- column name
Column to use as the title for each tooltip. Typically, this is a name to identify each point.
- Options:
- column name
Sets behaviour for empty datasets. Can throw an error, a warning, or allow empty. When set to 'error', empty datasets will block builds in `build:strict`. Note this only applies to initial page load - empty datasets caused by input component changes (dropdowns, etc.) are allowed.
- Default:
- error
Text to display when an empty dataset is received - only applies when `emptySet` is 'warn' or 'pass', or when the empty dataset is a result of an input component change (dropdowns, etc.).
- Options:
- string
- Default:
- No records
Formatting & Styling
Format to use for x column (see available formats)
- Options:
- Excel-style format | built-in format name | custom format name
Format to use for y column (see available formats)
- Options:
- Excel-style format | built-in format name | custom format name
Format to use for size column (see available formats)
- Options:
- Excel-style format | built-in format name | custom format name
Format to use for series label (see available formats)
- Options:
- Excel-style format | built-in format name | custom format name
Options for which shape to use for bubble points
- Options:
- circle | emptyCircle | rect | triangle | diamond
- Default:
- circle
Scale the size of the bubbles by this factor (e.g., 2 will double the size)
- Options:
- number
- Default:
- 1
% of the full color that should be rendered, with remainder being transparent
- Options:
- number (0 to 1)
- Default:
- 0.7
Color to override default series color. Only accepts a single color.
- Options:
- CSS name | hexademical | RGB | HSL
Width of line surrounding each shape
- Options:
- number
- Default:
- 0
Color to use for outline if outlineWidth > 0
- Options:
- CSS name | hexademical | RGB | HSL
Array of custom colours to use for the chart. E.g., ['#cf0d06','#eb5752','#e88a87'] Note that the array must be surrounded by curly braces.
- Options:
- array of color strings (CSS name | hexademical | RGB | HSL)
- Default:
- built-in color palette
Apply a specific color to each series in your chart. Unspecified series will receive colors from the built-in palette as normal. Note the double curly braces required in the syntax
- Options:
- object with series names and assigned colors
- Default:
- colors applied by order of series in data
Apply a specific order to the series in a multi-series chart.
- Options:
- Array of series names in the order they should be used in the chart seriesOrder={['series one', 'series two']}
- Default:
- default order implied by the data
Number representing the padding (whitespace) on the left side of the chart. Useful to avoid labels getting cut off
- Options:
- number
Number representing the padding (whitespace) on the left side of the chart. Useful to avoid labels getting cut off
- Options:
- number
Axes
Base to use when log scale is enabled
- Options:
- number
- Default:
- 10
Name to show under x-axis. If 'true', formatted column name is used. Only works with swapXY=false
- Options:
- true | string | false
- Default:
- true
Name to show beside y-axis. If 'true', formatted column name is used.
- Options:
- true | string | false
- Default:
- true
Starting value for the y-axis
- Options:
- number
Maximum value for the y-axis
- Options:
- number
Chart
Chart title. Appears at top left of chart.
- Options:
- string
Chart subtitle. Appears just under title.
- Options:
- string
Minimum height of the chart area (excl. header and footer) in pixels. Adjusting the height affects all viewport sizes and may impact the mobile UX.
- Options:
- number
- Default:
- 180
Which chart renderer type (canvas or SVG) to use. See ECharts' documentation on renderers.
- Options:
- canvas | svg
- Default:
- canvas
Custom Echarts Options
Custom Echarts options to override the default options. See reference page for available options.
- Options:
- {{exampleOption:'exampleValue'}}
Custom Echarts options to override the default options for all series in the chart. This loops through the series to apply the settings rather than having to specify every series manually using `echartsOptions` See reference page for available options.
- Options:
- {{exampleSeriesOption:'exampleValue'}}
Interactivity
Group name to connect this chart to other charts for synchronized tooltip hovering. Charts with the same `connectGroup` name will become connected
Annotations
Bubble charts can include annotations using the ReferenceLine and ReferenceArea components. These components are used within a chart component like so:
Loading...
<BubbleChart
data={price_vs_volume}
x=price
xFmt=usd0
y=number_of_units
size=total_sales
>
<ReferenceLine
x=75
label="Consumer Limit"
/>
</BubbleChart>