> ## Documentation Index
> Fetch the complete documentation index at: https://docs.graphy.dev/llms.txt
> Use this file to discover all available pages before exploring further.

# Bubble

export const GraphPreview = ({config, aspectRatio = '10 / 6'}) => {
  const getThemeId = () => {
    return document.documentElement.classList.contains('dark') ? 'dark' : 'light';
  };
  const [themeId, setThemeId] = useState(getThemeId);
  const [isLoaded, setIsLoaded] = useState(false);
  config.appearance = {
    ...config.appearance,
    border: {
      style: 'none',
      color: 'transparent',
      width: 0
    },
    hasRoundedBorders: false
  };
  const baseUrl = window.location.hostname === 'localhost' ? 'https://app.graphy.top:8080' : 'https://visualize.graphy.app';
  const url = new URL('view/graph', baseUrl);
  url.searchParams.set('config', JSON.stringify(config));
  url.searchParams.set('themeId', themeId);
  useEffect(() => {
    const observer = new MutationObserver(function (mutations) {
      setThemeId(getThemeId());
    });
    observer.observe(document.documentElement, {
      attributes: true,
      attributeOldValue: true,
      attributeFilter: ['class']
    });
    return () => observer.disconnect();
  }, []);
  return <div className="graph-preview" style={{
    aspectRatio,
    opacity: isLoaded ? 1 : 0
  }}>
      <iframe src={url.toString()} loading="lazy" onLoad={() => setIsLoaded(true)} allowfullscreen="true" />
    </div>;
};

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

<GraphPreview
  config={{
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 },
  ],
},
}}
/>

```tsx theme={null}
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:

```tsx theme={null}
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
    ],
  },
};
```

## Related

* [Scatter](/sdk/graph-types/scatter) - Standard scatter plot
* [Type options](/sdk/config/type-options) - Bubble chart options