Vue 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 { createApp, defineComponent, ref } from "vue";
import { AgCharts } from "ag-charts-vue3";
import type { AgChartOptions } from "ag-charts-types";
import {
  AreaSeriesModule,
  BarSeriesModule,
  CategoryAxisModule,
  LegendModule,
  LineSeriesModule,
  ModuleRegistry,
  NumberAxisModule,
} from "ag-charts-community";
import { getData } from "./data";
import clone from "clone";

const WOMEN = {
  type: "bar",
  xKey: "year",
  yKey: "women",
  yName: "Women",
  grouped: true,
};

const MEN = {
  type: "bar",
  xKey: "year",
  yKey: "men",
  yName: "Men",
  grouped: true,
};

const PORTIONS = {
  type: "line",
  xKey: "year",
  yKey: "portions",
  yName: "Portions",
  yKeyAxis: "ySecondary",
};

const BAR_AND_LINE = [
  { ...WOMEN, type: "bar" },
  { ...MEN, type: "bar" },
  { ...PORTIONS, type: "line" },
];

const AREA_AND_BAR = [
  { ...PORTIONS, type: "area" },
  { ...WOMEN, type: "bar" },
  { ...MEN, type: "bar" },
];

ModuleRegistry.registerModules([
  AreaSeriesModule,
  BarSeriesModule,
  CategoryAxisModule,
  LineSeriesModule,
  NumberAxisModule,
  LegendModule,
]);

const ChartExample = defineComponent({
  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" v-on:change="combinationTypeChange($event)">
            <label for="combination-type-area-bar">Area &amp; Bar</label>
            <input type="radio" id="combination-type-bar-line" name="combination-type" value="bar-line" checked="" v-on:change="combinationTypeChange($event)">
              <label for="combination-type-bar-line">Bar &amp; Line</label>
            </div>
          </div>
        </div>
        <ag-charts
          :options="options"
        />
  `,
  components: {
    "ag-charts": AgCharts,
  },
  setup(props) {
    const options = ref<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) => {
      const optionsCopy = clone(options.value);

      const type = event.target.value;
      optionsCopy.series = type === "bar-line" ? BAR_AND_LINE : AREA_AND_BAR;

      options.value = optionsCopy;
    };

    return {
      options,
      combinationTypeChange,
    };
  },
});

createApp(ChartExample).mount("#app");

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

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

Getting started

AI Features

Core features

Specialised Charts

Series

Gauges

Vue ChartsCombination Charts

Combination Series Types Copy Link

Combination Chart Examples Copy Link