BubbleChart

The BubbleChart component extends the scatter plot by adding a third dimension through bubble size, making it ideal for visualizing three-variable relationships.

Props

Data Props

data

Query | array

required

Query result or array of objects containing the data to visualize

string

required

Column name for the x-axis values

string

required

Column name for the y-axis values

size

string

required

Column name determining bubble sizes

series

string

Column name to group data into multiple series

Bubble Style Props

shape

string

Shape of bubbles: ‘circle’ | ‘square’ | ‘triangle’ | ‘diamond’

scaleTo

number

Maximum bubble size in pixels

fillColor

string

Fill color for bubbles (hex, rgb, or theme color name)

opacity

number

Opacity of bubbles (0-1). Note: affects both fill and outline due to ECharts limitation

outlineColor

string

Color for bubble outlines

outlineWidth

number

Width of bubble outlines in pixels

Formatting Props

xFmt

string

Format string for x-axis values

yFmt

string

Format string for y-axis values

sizeFmt

string

Format string for size values in tooltip

Chart Layout Props

title

string

Chart title displayed at the top

subtitle

string

Chart subtitle displayed below the title

legend

boolean

Whether to show the legend

chartAreaHeight

number

Height of the chart area in pixels

Axis Props

xAxisTitle

string | boolean

default:"true"

Title for x-axis. Use true to use column name

yAxisTitle

string | boolean

default:"true"

Title for y-axis. Use true to use column name

xGridlines

boolean

Show vertical gridlines

yGridlines

boolean

Show horizontal gridlines

xAxisLabels

boolean

Show labels on x-axis

yAxisLabels

boolean

Show labels on y-axis

xBaseline

boolean

Show x-axis baseline

yBaseline

boolean

Show y-axis baseline

xTickMarks

boolean

Show tick marks on x-axis

yTickMarks

boolean

Show tick marks on y-axis

Axis Scale Props

xType

string

Type of x-axis: ‘category’ | ‘time’ | ‘value’

yLog

boolean

Use logarithmic scale for y-axis

yLogBase

number

Base for logarithmic y-axis

yMin

number

Minimum value for y-axis

yMax

number

Maximum value for y-axis

Custom title for tooltip

Series Props

colorPalette

string | array

default:"default"

Color palette name or array of colors

seriesColors

object

Object mapping series names to colors

seriesOrder

array

Array specifying the order of series

seriesLabelFmt

string

Format string for series labels

Behavior Props

sort

boolean

Sort data before rendering

connectGroup

string

Connect charts for synchronized interactions

Advanced Props

echartsOptions

object

Custom ECharts configuration object

seriesOptions

object

Custom series configuration

printEchartsConfig

boolean

default:false

Print ECharts config to console

renderer

string

Renderer type: ‘canvas’ | ‘svg’

downloadableData

boolean

Enable data download

downloadableImage

boolean

Enable image download

emptySet

string

Empty data behavior: ‘pass’ | ‘warn’ | ‘error’

emptyMessage

string

Custom empty data message

leftPadding

number

Left padding for chart area

rightPadding

number

Right padding for chart area

Examples

Basic Bubble Chart

```sql product_metrics
select 
  product_name,
  price,
  units_sold,
  revenue
from products

### Bubble Chart with Series

```markdown
```sql sales_metrics
select 
  product_name,
  marketing_spend,
  revenue,
  profit,
  category
from products

### Customized Bubble Styling

```markdown
<BubbleChart 
  data={product_metrics} 
  x="price" 
  y="units_sold" 
  size="revenue"
  scaleTo=50
  opacity=0.6
  fillColor="primary"
  xFmt="usd"
  yFmt="#,##0"
  sizeFmt="usd0k"
/>

Multiple Series with Custom Colors

<BubbleChart 
  data={sales_metrics} 
  x="marketing_spend" 
  y="revenue" 
  size="profit"
  series="category"
  seriesColors={{
    'Electronics': '#4F46E5',
    'Clothing': '#7C3AED',
    'Food': '#DB2777'
  }}
  scaleTo=40
  xGridlines="true"
  yGridlines="true"
  xFmt="usd0k"
  yFmt="usd0k"
/>

With Formatted Values

<BubbleChart 
  data={sales_metrics} 
  x="marketing_spend" 
  y="revenue" 
  size="profit"
  series="category"
  title="Marketing Performance Analysis"
  subtitle="Bubble size represents profit"
  xFmt="usd0k"
  yFmt="usd0k"
  sizeFmt="usd0k"
  legend="true"
  tooltipTitle="Product Performance"
/>

Chart Components

Data Display

Input Components

Layout Components

BubbleChart

BubbleChart

Props

Data Props

Bubble Style Props

Formatting Props

Chart Layout Props

Axis Props

Axis Scale Props

Tooltip Props

Series Props

Behavior Props

Advanced Props

Examples

Basic Bubble Chart

Multiple Series with Custom Colors

With Formatted Values

Build docs developers (and LLMs) love

Chart Components

Data Display

Input Components

Layout Components

​BubbleChart

​Props

​Data Props

​Bubble Style Props

​Formatting Props

​Chart Layout Props

​Axis Props

​Axis Scale Props

​Tooltip Props

​Series Props

​Behavior Props

​Advanced Props

​Examples

​Basic Bubble Chart

​Multiple Series with Custom Colors

​With Formatted Values

Build docs developers (and LLMs) love

BubbleChart

Props

Data Props

Bubble Style Props

Formatting Props

Chart Layout Props

Axis Props

Axis Scale Props

Tooltip Props

Series Props

Behavior Props

Advanced Props

Examples

Basic Bubble Chart

Multiple Series with Custom Colors

With Formatted Values