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 Copy Link
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:
{
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
seriesarray. - The area and line series are plotted on a Secondary Axis with a different scale.
import { Component } from "@angular/core";
import { AgCharts } from "ag-charts-angular";
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,
]);
@Component({
selector: "my-app",
standalone: true,
imports: [AgCharts],
template: `<div class="example-controls">
<div class="controls-row">
<div class="button-group" role="group" aria-label="Combination Type">
<input type="radio" id="combination-type-area-bar" name="combination-type" value="area-bar" (change)="combinationTypeChange($event)">
<label for="combination-type-area-bar">Area & Bar</label>
<input type="radio" id="combination-type-bar-line" name="combination-type" value="bar-line" checked="" (change)="combinationTypeChange($event)">
<label for="combination-type-bar-line">Bar & Line</label>
</div>
</div>
</div>
<ag-charts
[options]="options"
></ag-charts>
`,
})
export class AppComponent {
public options;
constructor() {
this.options = {
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)",
},
},
},
};
}
combinationTypeChange = (event: Event) => {
const options = clone(this.options);
const type = (event.target as HTMLInputElement).value as
| "area-bar"
| "bar-line";
options.series = type === "bar-line" ? BAR_AND_LINE : AREA_AND_BAR;
this.options = options;
};
}
export function getData(): any[] {
return [
{
year: "2001",
adults: 24,
men: 22,
women: 25,
children: 13,
portions: 3.4,
},
{
year: "2003",
adults: 24,
men: 22,
women: 26,
children: 11,
portions: 3.4,
},
{
year: "2005",
adults: 28,
men: 26,
women: 30,
children: 17,
portions: 3.7,
},
{
year: "2007",
adults: 29,
men: 25,
women: 31,
children: 21,
portions: 3.8,
},
{
year: "2009",
adults: 26,
men: 25,
women: 28,
children: 21,
portions: 3.5,
},
{
year: "2011",
adults: 27,
men: 24,
women: 29,
children: 18,
portions: 3.6,
},
{
year: "2013",
adults: 26,
men: 25,
women: 28,
children: 16,
portions: 3.6,
},
{
year: "2015",
adults: 26,
men: 24,
women: 27,
children: 20,
portions: 3.5,
},
{
year: "2017",
adults: 29,
men: 26,
women: 32,
children: 18,
portions: 3.8,
},
];
}
// Angular entry point file
import '@angular/compiler';
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
bootstrapApplication(AppComponent);
Combination Chart Examples Copy Link
See more Combination Chart examples in the AG Charts Gallery.
Bar And Line Combination Chart Example
Histogram And Scatter Combination Chart Example
Horizontal Range Bar And Scatter Combination Chart Example
Radar Line, Radar Area And Nightingale Combination Chart Example
Grouped Category Axis Combination Chart Example
Step Interpolation Combination Chart Example
Bar, Line And Area Combination Chart Example
Stacked Bar And Area Combination Chart Example