---
title: "Combination Charts"
framework: angular
version: "14.1.0"
---

# 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/angular/axes-secondary/) with a different scale.

#### Combination Charts

```ts
// Angular entry point file
import '@angular/compiler';
import { bootstrapApplication } from '@angular/platform-browser';

import { AppComponent } from './app.component';

bootstrapApplication(AppComponent);
```

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