Bubble

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 },
    ],
  },
};

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
    ],
  },
};

const config: GraphConfig = {
  type: 'bubble',
  dataLabels: {
    showCategoryLabels: true, // Shows "Product A", "Product B", ... next to each bubble
  },
  data: {
    /* ... */
  },
};