> ## 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.

# Combo

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

Combo charts combine multiple chart types with two y-axes, allowing you to compare metrics with different units or scales.

## When to use

* **Different units** - Compare metrics measured in different units (e.g., revenue in £ vs conversion rate in %)
* **Different scales** - Display values with vastly different magnitudes
* **Correlation analysis** - Show relationships between two different metrics

## Basic example

<GraphPreview
  config={{
type: 'combo',
data: {
  columns: [
    { key: 'month', label: 'Month' },
    { key: 'revenue', label: 'Revenue (£)' },
    { key: 'conversion', label: 'Conversion rate (%)' },
  ],
  rows: [
    { month: 'Jan', revenue: 50000, conversion: 2.5 },
    { month: 'Feb', revenue: 55000, conversion: 2.8 },
    { month: 'Mar', revenue: 62000, conversion: 3.1 },
    { month: 'Apr', revenue: 58000, conversion: 2.9 },
    { month: 'May', revenue: 68000, conversion: 3.4 },
  ],
},
}}
/>

```tsx theme={null}
const config: GraphConfig = {
  type: 'combo',
  data: {
    columns: [
      { key: 'month', label: 'Month' },
      { key: 'revenue', label: 'Revenue (£)' },
      { key: 'conversion', label: 'Conversion rate (%)' },
    ],
    rows: [
      { month: 'Jan', revenue: 50000, conversion: 2.5 },
      { month: 'Feb', revenue: 55000, conversion: 2.8 },
      { month: 'Mar', revenue: 62000, conversion: 3.1 },
      { month: 'Apr', revenue: 58000, conversion: 2.9 },
      { month: 'May', revenue: 68000, conversion: 3.4 },
    ],
  },
};
```

## Dual y-axes

By default, combo charts show two y-axes:

* **Left axis** (primary) - First numeric series
* **Right axis** (secondary) - Second numeric series

### Configuring axes

```tsx theme={null}
const config: GraphConfig = {
  type: 'combo',
  axes: {
    y: {
      label: 'Revenue (£)',
    },
    y2: {
      label: 'Conversion rate (%)',
    },
  },
  data: {
    /* ... */
  },
};
```

### Single y-axis

Disable the dual y-axis mode if your series share the same scale:

```tsx theme={null}
const config: GraphConfig = {
  type: 'combo',
  axes: {
    hasDualYAxis: false,
  },
  data: {
    /* ... */
  },
};
```

## Options

<ParamField path="options.comboType" type="'grouped-bars' | 'stacked-bars' | 'lines'" default="grouped-bars">
  Determines how to display the combo chart: - `'grouped-bars'` - Show series as grouped bars side-by-side -
  `'stacked-bars'` - Stack bars on top of each other - `'lines'` - Display all series as lines
</ParamField>

### Display as lines

```tsx theme={null}
const config: GraphConfig = {
  type: 'combo',
  options: {
    comboType: 'lines',
  },
  data: {
    /* ... */
  },
};
```

## Related

* [Type options](/sdk/config/type-options) - Combo chart options
* [Axes](/sdk/config/axes) - Configure dual y-axes
* [Line](/sdk/graph-types/line) - Line chart options apply