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");