---
product: "AG Charts"
title: "Combination Charts"
description: "Create React Combination Charts by combining two or more series types for more flexible data visualisations. Add a secondary axis to handle different scales."
framework: react
version: "14.2.0"
related:
    - title: "Bar"
      url: "https://www.ag-grid.com/charts/archive/14.2.0/react/bar-series/"
    - title: "Line"
      url: "https://www.ag-grid.com/charts/archive/14.2.0/react/line-series/"
    - title: "Area"
      url: "https://www.ag-grid.com/charts/archive/14.2.0/react/area-series/"
    - title: "Scatter"
      url: "https://www.ag-grid.com/charts/archive/14.2.0/react/scatter-series/"
    - title: "Bubble"
      url: "https://www.ag-grid.com/charts/archive/14.2.0/react/bubble-series/"
    - title: "Pie"
      url: "https://www.ag-grid.com/charts/archive/14.2.0/react/pie-series/"
    - title: "Donut"
      url: "https://www.ag-grid.com/charts/archive/14.2.0/react/donut-series/"
    - title: "Box Plot"
      url: "https://www.ag-grid.com/charts/archive/14.2.0/react/box-plot-series/"
    - title: "Candlestick"
      url: "https://www.ag-grid.com/charts/archive/14.2.0/react/candlestick-series/"
    - title: "OHLC"
      url: "https://www.ag-grid.com/charts/archive/14.2.0/react/ohlc-series/"
    - title: "Heatmap"
      url: "https://www.ag-grid.com/charts/archive/14.2.0/react/heatmap-series/"
    - title: "Histogram"
      url: "https://www.ag-grid.com/charts/archive/14.2.0/react/histogram-series/"
    - title: "Nightingale"
      url: "https://www.ag-grid.com/charts/archive/14.2.0/react/nightingale-series/"
    - title: "Radar Area"
      url: "https://www.ag-grid.com/charts/archive/14.2.0/react/radar-area-series/"
    - title: "Radar Line"
      url: "https://www.ag-grid.com/charts/archive/14.2.0/react/radar-line-series/"
    - title: "Radial Bar"
      url: "https://www.ag-grid.com/charts/archive/14.2.0/react/radial-bar-series/"
    - title: "Radial Column"
      url: "https://www.ag-grid.com/charts/archive/14.2.0/react/radial-column-series/"
    - title: "Range Area"
      url: "https://www.ag-grid.com/charts/archive/14.2.0/react/range-area-series/"
    - title: "Range Bar"
      url: "https://www.ag-grid.com/charts/archive/14.2.0/react/range-bar-series/"
    - title: "Waterfall"
      url: "https://www.ag-grid.com/charts/archive/14.2.0/react/waterfall-series/"
    - title: "Sunburst"
      url: "https://www.ag-grid.com/charts/archive/14.2.0/react/sunburst-series/"
    - title: "Treemap"
      url: "https://www.ag-grid.com/charts/archive/14.2.0/react/treemap-series/"
    - title: "Sankey"
      url: "https://www.ag-grid.com/charts/archive/14.2.0/react/sankey-series/"
    - title: "Chord"
      url: "https://www.ag-grid.com/charts/archive/14.2.0/react/chord-series/"
    - title: "Funnel"
      url: "https://www.ag-grid.com/charts/archive/14.2.0/react/funnel-series/"
    - title: "Cone Funnel"
      url: "https://www.ag-grid.com/charts/archive/14.2.0/react/cone-funnel-series/"
    - title: "Pyramid"
      url: "https://www.ag-grid.com/charts/archive/14.2.0/react/pyramid-series/"
llms: "https://www.ag-grid.com/charts/archive/14.2.0/llms.txt"
---

# Combination Charts

A combination chart combines two or more series types allowing for flexible data visualisations. They are ideal for making visual comparisons of different sets of data in a single chart.

## Combination Series Types

It is possible to create Combination Charts using the following series types: `bar`, `line`, `area`, `scatter` and `bubble`.

The `type` property must be specified explicitly on each individual series object in the `series` options array, as shown below:

```js
{
    series: [
        {
            type: 'bar', // use 'bar' series
            xKey: 'year',
            yKey: 'men',
            // ...other series options
        },
        {
            type: 'line', // use 'line' series
            xKey: 'year',
            yKey: 'portions',
            // ...other series options
        },
    ],
}
```

The snippet above shows the configuration required for a combination chart consisting of a `bar` and `line` series.

The example below demonstrates two common combination chart types. You can switch between these two combination chart types using the buttons above the chart. Please note:

- Series are rendered according to the order in which they are added in the `series` array.
- The area and line series are plotted on a [Secondary Axis](https://www.ag-grid.com/charts/archive/14.2.0/react/axes-secondary/) with a different scale.

#### Combination Charts

```tsx
import React, { useState, Fragment } from "react";
import { createRoot } from "react-dom/client";
import { AgCharts } from "ag-charts-react";
import {
  AgBarSeriesOptions,
  AgCartesianChartOptions,
  AgCartesianSeriesOptions,
  AgLineSeriesOptions,
  AreaSeriesModule,
  BarSeriesModule,
  CategoryAxisModule,
  LegendModule,
  LineSeriesModule,
  ModuleRegistry,
  NumberAxisModule,
} from "ag-charts-community";
import { getData } from "./data";
import clone from "clone";

const WOMEN: AgBarSeriesOptions = {
  type: "bar",
  xKey: "year",
  yKey: "women",
  yName: "Women",
  grouped: true,
};
const MEN: AgBarSeriesOptions = {
  type: "bar",
  xKey: "year",
  yKey: "men",
  yName: "Men",
  grouped: true,
};
const PORTIONS: AgLineSeriesOptions = {
  type: "line",
  xKey: "year",
  yKey: "portions",
  yName: "Portions",
  yKeyAxis: "ySecondary",
};
const BAR_AND_LINE: AgCartesianSeriesOptions[] = [
  { ...WOMEN, type: "bar" },
  { ...MEN, type: "bar" },
  { ...PORTIONS, type: "line" },
];
const AREA_AND_BAR: AgCartesianSeriesOptions[] = [
  { ...PORTIONS, type: "area" },
  { ...WOMEN, type: "bar" },
  { ...MEN, type: "bar" },
];
ModuleRegistry.registerModules([
  AreaSeriesModule,
  BarSeriesModule,
  CategoryAxisModule,
  LineSeriesModule,
  NumberAxisModule,
  LegendModule,
]);

const ChartExample = () => {
  const [options, setOptions] = useState<AgCartesianChartOptions>({
    data: getData(),
    title: {
      text: "Fruit & Vegetable Consumption",
    },
    series: BAR_AND_LINE,
    axes: {
      y: {
        type: "number",
        position: "left",
        title: {
          text: "Adults Who Eat 5 A Day (%)",
        },
      },
      ySecondary: {
        type: "number",
        position: "right",
        title: {
          text: "Portions Consumed (Per Day)",
        },
      },
    },
  });

  const combinationTypeChange = (event: Event) => {
    const nextOptions = clone(options);

    const type = (event.target as HTMLInputElement).value as
      | "area-bar"
      | "bar-line";
    nextOptions.series = type === "bar-line" ? BAR_AND_LINE : AREA_AND_BAR;

    setOptions(nextOptions);
  };

  return (
    <Fragment>
      <div className="example-controls">
        <div className="controls-row">
          <div
            className="button-group"
            role="group"
            aria-label="Combination Type"
          >
            <input
              type="radio"
              id="combination-type-area-bar"
              name="combination-type"
              defaultValue="area-bar"
              onChange={(event) => combinationTypeChange(event)}
            />
            <label htmlFor="combination-type-area-bar">Area &amp; Bar</label>
            <input
              type="radio"
              id="combination-type-bar-line"
              name="combination-type"
              defaultValue="bar-line"
              defaultChecked
              onChange={(event) => combinationTypeChange(event)}
            />
            <label htmlFor="combination-type-bar-line">Bar &amp; Line</label>
          </div>
        </div>
      </div>
      <AgCharts options={options} />
    </Fragment>
  );
};

const root = createRoot(document.getElementById("root")!);
root.render(<ChartExample />);
```

[Live example: Combination Charts](https://www.ag-grid.com/charts/archive/14.2.0/reactFunctionalTs/combination-series/examples/combination/)

## Combination Chart Examples

See more Combination Chart examples in the [AG Charts Gallery](https://www.ag-grid.com/charts/archive/14.2.0/gallery/#combination).

- [Bar And Line Combination Chart Example](https://www.ag-grid.com/charts/archive/14.2.0/gallery/bar-line-combination/)
- [Histogram And Scatter Combination Chart Example](https://www.ag-grid.com/charts/archive/14.2.0/gallery/histogram-scatter-combination/)
- [Horizontal Range Bar And Scatter Combination Chart Example](https://www.ag-grid.com/charts/archive/14.2.0/gallery/horizontal-range-bar-scatter-combination/)
- [Radar Line, Radar Area And Nightingale Combination Chart Example](https://www.ag-grid.com/charts/archive/14.2.0/gallery/radar-line-radar-area-nightingale-combination/)
- [Grouped Category Axis Combination Chart Example](https://www.ag-grid.com/charts/archive/14.2.0/gallery/grouped-bar-line-combination/)
- [Step Interpolation Combination Chart Example](https://www.ag-grid.com/charts/archive/14.2.0/gallery/step-interpolation-combination/)
- [Bar, Line And Area Combination Chart Example](https://www.ag-grid.com/charts/archive/14.2.0/gallery/grouped-category-combination/)
- [Stacked Bar And Area Combination Chart Example](https://www.ag-grid.com/charts/archive/14.2.0/gallery/stacked-bar-area-combination/)