JavaScript ChartsCombination Charts

Version 14.2.0

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 series array.
The area and line series are plotted on a Secondary Axis with a different scale.

main.ts

import {
  AgBarSeriesOptions,
  AgCartesianChartOptions,
  AgCartesianSeriesOptions,
  AgCharts,
  AgLineSeriesOptions,
  AreaSeriesModule,
  BarSeriesModule,
  CategoryAxisModule,
  LegendModule,
  LineSeriesModule,
  ModuleRegistry,
  NumberAxisModule,
} from "ag-charts-community";
import { getData } from "./data";

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 options: 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)",
      },
    },
  },
};

options.container = document.getElementById("myChart");

const chart = AgCharts.create(options);

function combinationTypeChange(event: Event) {
  const type = (event.target as HTMLInputElement).value as
    | "area-bar"
    | "bar-line";
  options.series = type === "bar-line" ? BAR_AND_LINE : AREA_AND_BAR;

  chart.update(options);
}

if (typeof window !== "undefined") {
  // Attach external event handlers to window so they can be called from index.html
  (<any>window).combinationTypeChange = combinationTypeChange;
}

data.ts

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