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	-
xFmt	Format to use for x column (see available formats)	-	Excel-style format | buil-in format name | custom format name	-
yFmt	Format to use for y column (see available formats)	-	Excel-style format | buil-in format name | custom format name	-
sizeFmt	Format to use for size column (see available formats)	-	Excel-style format | buil-in format name | custom format name	-

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
chartAreaHeight	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.	-	number	180
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	-

Annotations

Bubble charts can include annotations using the ReferenceLine and ReferenceArea components. These components are used within a chart component like so:

<BubbleChart data={sales_data} x=date y=sales>
  <ReferenceLine data={target_data} y=target label=name/>
  <ReferenceArea xMin='2020-03-14' xMax='2020-05-01'/>
</BubbleChart>