Skip to main content
Bubble charts are scatter plots where point size represents a third dimension, allowing you to compare three variables simultaneously.

​
When to use

  • Three-variable comparisons - Show relationships between three metrics
  • Weighted scatter plots - Size indicates importance or magnitude
  • Market analysis - Compare products across multiple dimensions
  • Portfolio visualization - Display risk, return and size

​
Basic example

const config: GraphConfig = {
  type: 'bubble',
  data: {
    columns: [
      { key: 'product', label: 'Product' },
      { key: 'marketing_spend', label: 'Marketing spend (£)' },
      { key: 'revenue', label: 'Revenue (£)' },
      { key: 'profit', label: 'Profit (£)' }
    ],
    rows: [
      { product: 'Product A', marketing_spend: 50000, revenue: 200000, profit: 75000 },
      { product: 'Product B', marketing_spend: 30000, revenue: 150000, profit: 60000 },
      { product: 'Product C', marketing_spend: 80000, revenue: 350000, profit: 120000 },
      { product: 'Product D', marketing_spend: 40000, revenue: 180000, profit: 50000 }
    ]
  }
};

​
Data structure

Bubble charts require four columns:
  1. Category column - Labels for each bubble (optional but recommended)
  2. X-axis column - First numeric variable (horizontal position)
  3. Y-axis column - Second numeric variable (vertical position)
  4. Size column - Third numeric variable (bubble size)

​
Multiple series

Group bubbles by adding more numeric columns: 
const config: GraphConfig = {
  type: 'bubble',
  data: {
    columns: [
      { key: 'country', label: 'Country' },
      { key: 'gdp', label: 'GDP per capita' },
      { key: 'life_expectancy', label: 'Life expectancy' },
      { key: 'population_europe', label: 'Europe' },
      { key: 'population_asia', label: 'Asia' }
    ],
    rows: [
      // Each series (Europe, Asia) creates separate bubble groups
    ]
  }
};