Combo

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

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

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:

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

Options

options.comboType

'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

Display as lines

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

Type options - Combo chart options
Axes - Configure dual y-axes
Line - Line chart options apply

Get Started

Graph types

Customisation

Configuration

Editor

Advanced

Reference

When to use

Basic example

Dual y-axes

Configuring axes

Single y-axis

Options

Display as lines

​When to use

​Basic example

​Dual y-axes

​Configuring axes

​Single y-axis

​Options

​Display as lines

​Related

When to use

Basic example

Dual y-axes

Configuring axes

Single y-axis

Options

Display as lines

Related