Vue ChartsPyramid Series

Version 14.2.0

A Pyramid Series is a triangular shaped visualisation that uses the height of each segment to represent its value as a proportion of the whole.

Simple Pyramid Copy Link

main.ts

import { createApp, defineComponent, ref } from "vue";
import { AgCharts } from "ag-charts-vue3";
import type { AgChartOptions } from "ag-charts-types";
import {
  AnimationModule,
  ContextMenuModule,
  LegendModule,
  ModuleRegistry,
  PyramidSeriesModule,
} from "ag-charts-enterprise";
import { getData } from "./data";

ModuleRegistry.registerModules([
  AnimationModule,
  LegendModule,
  PyramidSeriesModule,
  ContextMenuModule,
]);

const ChartExample = defineComponent({
  template: `
    <ag-charts
      :options="options"
    />
  `,
  components: {
    "ag-charts": AgCharts,
  },
  setup(props) {
    const options = ref<AgChartOptions>({
      data: getData(),
      title: {
        text: "Revenue Open by Sales Stage",
      },
      series: [
        {
          type: "pyramid",
          stageKey: "group",
          valueKey: "value",
        },
      ],
    });

    return {
      options,
    };
  },
});

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

data.ts

export function getData() {
  return [
    { group: "Qualify", value: 7910 },
    { group: "Develop", value: 8170 },
    { group: "Propose", value: 7260 },
    { group: "Close", value: 4460 },
  ];
}

To create a Pyramid Series, use the pyramid series type.

{
    series: [
        {
            type: 'pyramid',
            stageKey: 'group',
            valueKey: 'value',
        },
    ],
}

In this configuration:

stageKey defines the categories, each of which is mapped to segments in the pyramid.
valueKey provides the numerical values, determining the height of each segment.

Horizontal Pyramid Copy Link

main.ts

import { createApp, defineComponent, ref } from "vue";
import { AgCharts } from "ag-charts-vue3";
import type { AgChartOptions } from "ag-charts-types";
import {
  AnimationModule,
  ContextMenuModule,
  ModuleRegistry,
  PyramidSeriesModule,
} from "ag-charts-enterprise";
import { getData } from "./data";

ModuleRegistry.registerModules([
  AnimationModule,
  PyramidSeriesModule,
  ContextMenuModule,
]);

const ChartExample = defineComponent({
  template: `
    <ag-charts
      :options="options"
    />
  `,
  components: {
    "ag-charts": AgCharts,
  },
  setup(props) {
    const options = ref<AgChartOptions>({
      data: getData(),
      title: {
        text: "Revenue Open by Sales Stage",
      },
      seriesArea: {
        padding: {
          left: 20,
          right: 20,
        },
      },
      series: [
        {
          type: "pyramid",
          stageKey: "group",
          valueKey: "value",
          direction: "horizontal",
        },
      ],
    });

    return {
      options,
    };
  },
});

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

data.ts

export function getData() {
  return [
    { group: "Qualify", value: 7910 },
    { group: "Develop", value: 8170 },
    { group: "Propose", value: 7260 },
    { group: "Close", value: 4460 },
  ];
}

To create a horizontal Pyramid Series, set the direction to horizontal.

{
    direction: 'horizontal',
}

Reverse Pyramid Copy Link

main.ts

import { createApp, defineComponent, ref } from "vue";
import { AgCharts } from "ag-charts-vue3";
import type { AgChartOptions } from "ag-charts-types";
import {
  AnimationModule,
  ContextMenuModule,
  LegendModule,
  ModuleRegistry,
  PyramidSeriesModule,
} from "ag-charts-enterprise";
import { getData } from "./data";

ModuleRegistry.registerModules([
  AnimationModule,
  LegendModule,
  PyramidSeriesModule,
  ContextMenuModule,
]);

const ChartExample = defineComponent({
  template: `
    <ag-charts
      :options="options"
    />
  `,
  components: {
    "ag-charts": AgCharts,
  },
  setup(props) {
    const options = ref<AgChartOptions>({
      data: getData(),
      title: {
        text: "Revenue Open by Sales Stage",
      },
      seriesArea: {
        padding: {
          left: 20,
          right: 20,
        },
      },
      series: [
        {
          type: "pyramid",
          stageKey: "group",
          valueKey: "value",
          reverse: true,
        },
      ],
    });

    return {
      options,
    };
  },
});

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

data.ts

export function getData() {
  return [
    { group: "Qualify", value: 7910 },
    { group: "Develop", value: 8170 },
    { group: "Propose", value: 7260 },
    { group: "Close", value: 4460 },
  ];
}

To reverse a Pyramid Series, set reverse to true.

{
    reverse: true,
}

Customisation Copy Link

Fills Copy Link

main.ts

import { createApp, defineComponent, ref } from "vue";
import { AgCharts } from "ag-charts-vue3";
import type { AgChartOptions } from "ag-charts-types";
import {
  AnimationModule,
  ContextMenuModule,
  LegendModule,
  ModuleRegistry,
  PyramidSeriesModule,
} from "ag-charts-enterprise";
import { getData } from "./data";

ModuleRegistry.registerModules([
  AnimationModule,
  LegendModule,
  PyramidSeriesModule,
  ContextMenuModule,
]);

const ChartExample = defineComponent({
  template: `
    <ag-charts
      :options="options"
    />
  `,
  components: {
    "ag-charts": AgCharts,
  },
  setup(props) {
    const options = ref<AgChartOptions>({
      data: getData(),
      title: {
        text: "Revenue Open by Sales Stage",
      },
      seriesArea: {
        padding: {
          left: 20,
          right: 20,
        },
      },
      series: [
        {
          type: "pyramid",
          stageKey: "group",
          valueKey: "value",
          fills: ["#5C6BC0", "#3F51B5", "#303F9F", "#1A237E"],
        },
      ],
    });

    return {
      options,
    };
  },
});

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

data.ts

export function getData() {
  return [
    { group: "Qualify", value: 7910 },
    { group: "Develop", value: 8170 },
    { group: "Propose", value: 7260 },
    { group: "Close", value: 4460 },
  ];
}

The colours in a Pyramid Series can be customised with the fills property.

{
    fills: ['#5C6BC0', '#3F51B5', '#303F9F', '#1A237E'],
}

Shape Copy Link

main.ts

import { createApp, defineComponent, ref } from "vue";
import { AgCharts } from "ag-charts-vue3";
import type { AgChartOptions } from "ag-charts-types";
import {
  AnimationModule,
  ContextMenuModule,
  LegendModule,
  ModuleRegistry,
  PyramidSeriesModule,
} from "ag-charts-enterprise";
import { getData } from "./data";
import clone from "clone";

const ASPECT_RATIOS = {
  "2-3": 2 / 3,
  equilateral: 1.1547,
  "3-2": 3 / 2,
};

ModuleRegistry.registerModules([
  AnimationModule,
  LegendModule,
  PyramidSeriesModule,
  ContextMenuModule,
]);

const ChartExample = defineComponent({
  template: `
    <div class="example-controls">
      <div class="controls-row">
        <span>Direction:</span>
        <div class="button-group gap-right" role="group" aria-label="Direction">
          <input type="radio" id="direction-horizontal" name="direction" value="horizontal" v-on:change="directionChange($event)">
            <label for="direction-horizontal">Horizontal</label>
            <input type="radio" id="direction-vertical" name="direction" value="vertical" checked="" v-on:change="directionChange($event)">
              <label for="direction-vertical">Vertical</label>
            </div>
            <span>Aspect Ratio:</span>
            <div class="button-group" role="group" aria-label="Aspect Ratio">
              <input type="radio" id="aspect-ratio-2-3" name="aspect-ratio" value="2-3" v-on:change="aspectRatioChange($event)">
                <label for="aspect-ratio-2-3">2 / 3</label>
                <input type="radio" id="aspect-ratio-equilateral" name="aspect-ratio" value="equilateral" v-on:change="aspectRatioChange($event)">
                  <label for="aspect-ratio-equilateral">Equilateral</label>
                  <input type="radio" id="aspect-ratio-3-2" name="aspect-ratio" value="3-2" checked="" v-on:change="aspectRatioChange($event)">
                    <label for="aspect-ratio-3-2">3 / 2</label>
                  </div>
                </div>
              </div>
              <ag-charts
                :options="options"
              />
  `,
  components: {
    "ag-charts": AgCharts,
  },
  setup(props) {
    const options = ref<AgStandaloneChartOptions>({
      data: getData(),
      title: {
        text: "Revenue Open by Sales Stage",
      },
      seriesArea: {
        padding: {
          left: 20,
          right: 20,
        },
      },
      series: [
        {
          type: "pyramid",
          stageKey: "group",
          valueKey: "value",
          aspectRatio: 3 / 2,
          label: {
            enabled: false,
          },
        },
      ],
    });

    const directionChange = (event) => {
      const optionsCopy = clone(options.value);

      const direction = event.target.value;
      optionsCopy.series[0].direction = direction;

      options.value = optionsCopy;
    };
    const aspectRatioChange = (event) => {
      const optionsCopy = clone(options.value);

      const aspectRatio = ASPECT_RATIOS[event.target.value];
      optionsCopy.series[0].aspectRatio = aspectRatio;

      options.value = optionsCopy;
    };

    return {
      options,
      directionChange,
      aspectRatioChange,
    };
  },
});

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

data.ts

export function getData() {
  return [
    { group: "Qualify", value: 7910 },
    { group: "Develop", value: 8170 },
    { group: "Propose", value: 7260 },
    { group: "Close", value: 4460 },
  ];
}

The shape of the triangle can be set using the aspectRatio property.

{
    aspectRatio: 3 / 2,
}

In this configuration:

aspectRatio is set such that width will grow 3px for every 2px of height.

Labels Copy Link

The values can be displayed inside or outside each segment using the label option, and the segment name can be shown with the stageLabel option.

main.ts

import { createApp, defineComponent, ref } from "vue";
import { AgCharts } from "ag-charts-vue3";
import type { AgChartOptions } from "ag-charts-types";
import {
  AnimationModule,
  ContextMenuModule,
  LegendModule,
  ModuleRegistry,
  PyramidSeriesModule,
} from "ag-charts-enterprise";
import { getData } from "./data";
import clone from "clone";

const initialPlacement = "inside-center";

ModuleRegistry.registerModules([
  AnimationModule,
  LegendModule,
  PyramidSeriesModule,
  ContextMenuModule,
]);

const ChartExample = defineComponent({
  template: `
    <div class="example-controls">
      <div class="controls-row">
        <label for="placementSelect">Label Placement:</label>
        <select id="placementSelect" v-on:change="setPlacement($event.target.value)">
          <option value="inside-center" selected="">inside-center</option>
          <option value="inside-start">inside-start</option>
          <option value="inside-end">inside-end</option>
          <option value="inside-before">inside-before</option>
          <option value="inside-after">inside-after</option>
          <option value="outside-start">outside-start</option>
          <option value="outside-end">outside-end</option>
          <option value="outside-before">outside-before</option>
          <option value="outside-after">outside-after</option>
        </select>
        <span class="gap-left">Stage Label Placement:</span>
        <div class="button-group" role="group" aria-label="Stage Label Placement">
          <input type="radio" id="stage-label-before" name="stageLabelPlacement" value="before" checked="" v-on:change="setStageLabelPlacement($event)">
            <label for="stage-label-before"><code>Before</code></label>
            <input type="radio" id="stage-label-after" name="stageLabelPlacement" value="after" v-on:change="setStageLabelPlacement($event)">
              <label for="stage-label-after"><code>After</code></label>
            </div>
          </div>
          <div class="controls-row">
            <span>Direction:</span>
            <div class="button-group" role="group" aria-label="Direction">
              <input type="radio" id="direction-vertical" name="direction" value="vertical" checked="" v-on:change="setDirection($event)">
                <label for="direction-vertical"><code>Vertical</code></label>
                <input type="radio" id="direction-horizontal" name="direction" value="horizontal" v-on:change="setDirection($event)">
                  <label for="direction-horizontal"><code>Horizontal</code></label>
                </div>
              </div>
            </div>
            <ag-charts
              :options="options"
            />
  `,
  components: {
    "ag-charts": AgCharts,
  },
  setup(props) {
    const options = ref<AgStandaloneChartOptions<DataType>>({
      data: getData(),
      title: {
        text: "Revenue Open by Sales Stage",
      },
      subtitle: {
        text: initialPlacement,
      },
      animation: {
        enabled: false,
      },
      seriesArea: {
        padding: {
          left: 20,
          right: 20,
        },
      },
      series: [
        {
          type: "pyramid",
          stageKey: "group",
          valueKey: "value",
          direction: "vertical",
          label: {
            enabled: true,
            placement: initialPlacement,
          },
          stageLabel: {
            placement: "before",
            spacing: 40,
          },
        },
      ],
    });

    const setPlacement = (value) => {
      const optionsCopy = clone(options.value);

      optionsCopy.series[0].label.placement = value;
      optionsCopy.subtitle.text = value;

      options.value = optionsCopy;
    };
    const setDirection = (event) => {
      const optionsCopy = clone(options.value);

      const direction = event.target.value;
      optionsCopy.series = [{ ...optionsCopy.series[0], direction }];

      options.value = optionsCopy;
    };
    const setStageLabelPlacement = (event) => {
      const optionsCopy = clone(options.value);

      const placement = event.target.value;
      const series = optionsCopy.series[0];
      optionsCopy.series = [
        { ...series, stageLabel: { ...series.stageLabel, placement } },
      ];

      options.value = optionsCopy;
    };

    return {
      options,
      setPlacement,
      setDirection,
      setStageLabelPlacement,
    };
  },
});

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

data.ts

export interface DataType {
  group: string;
  value: number;
}

export function getData(): DataType[] {
  return [
    { group: "Qualify", value: 7910 },
    { group: "Develop", value: 8170 },
    { group: "Propose", value: 7260 },
    { group: "Close", value: 4460 },
  ];
}

{
    label: {
        enabled: true,
        placement: 'inside-center',
    },
    stageLabel: {
        placement: 'before',
    },
}

In this configuration:

The label is positioned as inside-center. Use the dropdown to see all available placements.
- start and end are above and below the segment when vertical, left and right of it when horizontal.
- before and after are the other two sides, matching stageLabel.placement.
stageLabel.placement positions the segment names on either side of the chart.
On a vertical pyramid, before and after are mirrored when RTL Layout is enabled.
Providing placement as an ordered array (e.g. ['inside-center', 'outside-end']) lets a label that does not fit inside its segment fall back to an outside position.

See Series Labels for the full set of label placement and collision avoidance options, and the API Reference for additional customisation options.

Pyramid Chart Examples Copy Link

See more Pyramid Chart examples in the AG Charts Gallery.

Pyramid Chart Example

API Reference Copy Link

Properties available on the AgPyramidSeriesOptions interface.

type required 'pyramid': Configuration for the Pyramid Series.
stageKey required DatumKey: The key to use to retrieve stage values from the data.
valueKey required DatumKey: The key to use to retrieve values from the data.
id string default: auto-generated value: Primary identifier for the series. This is provided as `seriesId` in user callbacks to differentiate multiple series. Auto-generated ids are subject to future change without warning, if your callbacks need to vary behaviour by series please supply your own unique `id` value.
context ContextDefault: Context object to use in callbacks.
data DatumDefault[]: The data to use when rendering the series. If this is not supplied, data must be set on the chart instead.
visible boolean: Whether to display the series.
cursor string: The cursor to use for hovered markers. This config is identical to the CSS `cursor` property.
highlight AgHighlightOptions: Configuration for highlighting when a series or legend item is hovered over.
nodeClickRange InteractionRange: Range from a node that a click triggers the listener.
showInLegend boolean: Whether to include the series in the legend.
listeners AgSeriesListeners: A map of event names to event listeners.
fills AgColorType[]: The colours to cycle through for the fills of the stages. An array of colour strings, or fill objects for gradients, patterns, or images.
strokes CssColor[]: The colours to cycle through for the strokes of the stages.
fillOpacity Opacity: The opacity of the fill for the stages.
strokeOpacity Opacity: The opacity of the stroke for the stages.
strokeWidth PixelSize: The width in pixels of the stroke for the stages.
direction 'horizontal' | 'vertical': Stage rendering direction.
reverse boolean: Reverse the order of the stages.
spacing number: Spacing between the stages.
aspectRatio number: Ratio of the triangle width to its height. When unset, the triangle will fill the available space.
label AgPyramidSeriesLabelOptions: Configuration for the labels shown on stages.
stageLabel AgPyramidSeriesStageLabelOptions: Configuration for the stage labels.
shadow AgDropShadowOptions: Configuration for the shadow used behind the series items.
tooltip AgSeriesTooltip: Series-specific tooltip configuration.
itemStyler Styler: Function used to return formatting for individual bars, based on the given parameters.
lineDash PixelSize[]: An array specifying the length in pixels of alternating dashes and gaps.
lineDashOffset PixelSize: The initial offset of the dashed line in pixels.

Getting started

AI Features

Core features

Specialised Charts

Series

Gauges

Vue ChartsPyramid Series

Simple Pyramid Copy Link

Horizontal Pyramid Copy Link

Reverse Pyramid Copy Link

Customisation Copy Link

Fills Copy Link

Shape Copy Link

Labels Copy Link

Pyramid Chart Examples Copy Link

API Reference Copy Link