---
product: "AG Charts"
title: "Pyramid Series"
description: "JavaScript Pyramid Series uses the height of segments to show the proportions of a value over a category of values."
framework: javascript
version: "14.2.0"
related:
    - title: "Bar"
      url: "https://www.ag-grid.com/charts/archive/14.2.0/javascript/bar-series/"
    - title: "Line"
      url: "https://www.ag-grid.com/charts/archive/14.2.0/javascript/line-series/"
    - title: "Area"
      url: "https://www.ag-grid.com/charts/archive/14.2.0/javascript/area-series/"
    - title: "Scatter"
      url: "https://www.ag-grid.com/charts/archive/14.2.0/javascript/scatter-series/"
    - title: "Bubble"
      url: "https://www.ag-grid.com/charts/archive/14.2.0/javascript/bubble-series/"
    - title: "Pie"
      url: "https://www.ag-grid.com/charts/archive/14.2.0/javascript/pie-series/"
    - title: "Donut"
      url: "https://www.ag-grid.com/charts/archive/14.2.0/javascript/donut-series/"
    - title: "Combination"
      url: "https://www.ag-grid.com/charts/archive/14.2.0/javascript/combination-series/"
    - title: "Box Plot"
      url: "https://www.ag-grid.com/charts/archive/14.2.0/javascript/box-plot-series/"
    - title: "Candlestick"
      url: "https://www.ag-grid.com/charts/archive/14.2.0/javascript/candlestick-series/"
    - title: "OHLC"
      url: "https://www.ag-grid.com/charts/archive/14.2.0/javascript/ohlc-series/"
    - title: "Heatmap"
      url: "https://www.ag-grid.com/charts/archive/14.2.0/javascript/heatmap-series/"
    - title: "Histogram"
      url: "https://www.ag-grid.com/charts/archive/14.2.0/javascript/histogram-series/"
    - title: "Nightingale"
      url: "https://www.ag-grid.com/charts/archive/14.2.0/javascript/nightingale-series/"
    - title: "Radar Area"
      url: "https://www.ag-grid.com/charts/archive/14.2.0/javascript/radar-area-series/"
    - title: "Radar Line"
      url: "https://www.ag-grid.com/charts/archive/14.2.0/javascript/radar-line-series/"
    - title: "Radial Bar"
      url: "https://www.ag-grid.com/charts/archive/14.2.0/javascript/radial-bar-series/"
    - title: "Radial Column"
      url: "https://www.ag-grid.com/charts/archive/14.2.0/javascript/radial-column-series/"
    - title: "Range Area"
      url: "https://www.ag-grid.com/charts/archive/14.2.0/javascript/range-area-series/"
    - title: "Range Bar"
      url: "https://www.ag-grid.com/charts/archive/14.2.0/javascript/range-bar-series/"
    - title: "Waterfall"
      url: "https://www.ag-grid.com/charts/archive/14.2.0/javascript/waterfall-series/"
    - title: "Sunburst"
      url: "https://www.ag-grid.com/charts/archive/14.2.0/javascript/sunburst-series/"
    - title: "Treemap"
      url: "https://www.ag-grid.com/charts/archive/14.2.0/javascript/treemap-series/"
    - title: "Sankey"
      url: "https://www.ag-grid.com/charts/archive/14.2.0/javascript/sankey-series/"
    - title: "Chord"
      url: "https://www.ag-grid.com/charts/archive/14.2.0/javascript/chord-series/"
    - title: "Funnel"
      url: "https://www.ag-grid.com/charts/archive/14.2.0/javascript/funnel-series/"
    - title: "Cone Funnel"
      url: "https://www.ag-grid.com/charts/archive/14.2.0/javascript/cone-funnel-series/"
llms: "https://www.ag-grid.com/charts/archive/14.2.0/llms.txt"
---

# Pyramid Series

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

#### Pyramid Chart

```ts
import {
  AgChartOptions,
  AgCharts,
  AnimationModule,
  ContextMenuModule,
  LegendModule,
  ModuleRegistry,
  PyramidSeriesModule,
} from "ag-charts-enterprise";
import { getData } from "./data";

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

const options: AgChartOptions = {
  data: getData(),
  title: {
    text: "Revenue Open by Sales Stage",
  },
  series: [
    {
      type: "pyramid",
      stageKey: "group",
      valueKey: "value",
    },
  ],
};

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

const chart = AgCharts.create(options);
```

[Live example: Pyramid Chart](https://www.ag-grid.com/charts/archive/14.2.0/typescript/pyramid-series/examples/simple-pyramid/)

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

```js
{
    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

#### Horizontal Pyramid Chart

```ts
import {
  AgChartOptions,
  AgCharts,
  AnimationModule,
  ContextMenuModule,
  ModuleRegistry,
  PyramidSeriesModule,
} from "ag-charts-enterprise";
import { getData } from "./data";

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

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

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

const chart = AgCharts.create(options);
```

[Live example: Horizontal Pyramid Chart](https://www.ag-grid.com/charts/archive/14.2.0/typescript/pyramid-series/examples/horizontal-pyramid/)

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

```js
{
    direction: 'horizontal',
}
```

## Reverse Pyramid

#### Reverse Pyramid Chart

```ts
import {
  AgChartOptions,
  AgCharts,
  AnimationModule,
  ContextMenuModule,
  LegendModule,
  ModuleRegistry,
  PyramidSeriesModule,
} from "ag-charts-enterprise";
import { getData } from "./data";

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

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

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

const chart = AgCharts.create(options);
```

[Live example: Reverse Pyramid Chart](https://www.ag-grid.com/charts/archive/14.2.0/typescript/pyramid-series/examples/reverse-pyramid/)

To reverse a Pyramid Series, set `reverse` to `true`.

```js
{
    reverse: true,
}
```

## Customisation

### Fills

#### Pyramid Fills

```ts
import {
  AgChartOptions,
  AgCharts,
  AnimationModule,
  ContextMenuModule,
  LegendModule,
  ModuleRegistry,
  PyramidSeriesModule,
} from "ag-charts-enterprise";
import { getData } from "./data";

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

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

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

const chart = AgCharts.create(options);
```

[Live example: Pyramid Fills](https://www.ag-grid.com/charts/archive/14.2.0/typescript/pyramid-series/examples/pyramid-fills/)

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

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

### Shape

#### Pyramid Aspect Ratio

```ts
import {
  AgCharts,
  AgPyramidSeriesOptions,
  AgStandaloneChartOptions,
  AnimationModule,
  ContextMenuModule,
  LegendModule,
  ModuleRegistry,
  PyramidSeriesModule,
} from "ag-charts-enterprise";
import { getData } from "./data";

const ASPECT_RATIOS: Record<string, number> = {
  "2-3": 2 / 3,
  equilateral: 1.1547,
  "3-2": 3 / 2,
};
ModuleRegistry.registerModules([
  AnimationModule,
  LegendModule,
  PyramidSeriesModule,
  ContextMenuModule,
]);

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

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

const chart = AgCharts.create(options);

function directionChange(event: Event) {
  const direction = (event.target as HTMLInputElement).value as
    | "horizontal"
    | "vertical";
  (options.series![0] as AgPyramidSeriesOptions).direction = direction;

  chart.update(options);
}

function aspectRatioChange(event: Event) {
  const aspectRatio = ASPECT_RATIOS[(event.target as HTMLInputElement).value];
  (options.series![0] as AgPyramidSeriesOptions).aspectRatio = aspectRatio;

  chart.update(options);
}

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

[Live example: Pyramid Aspect Ratio](https://www.ag-grid.com/charts/archive/14.2.0/typescript/pyramid-series/examples/pyramid-aspect-ratio/)

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

```js
{
    aspectRatio: 3 / 2,
}
```

In this configuration:

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

## Labels

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.

#### Pyramid Label Placement

```ts
import {
  AgCharts,
  AgFunnelSeriesLabelPlacement,
  AgPyramidSeriesOptions,
  AgStandaloneChartOptions,
  AnimationModule,
  ContextMenuModule,
  LegendModule,
  ModuleRegistry,
  PyramidSeriesModule,
} from "ag-charts-enterprise";
import { DataType, getData } from "./data";

const initialPlacement: AgFunnelSeriesLabelPlacement = "inside-center";
ModuleRegistry.registerModules([
  AnimationModule,
  LegendModule,
  PyramidSeriesModule,
  ContextMenuModule,
]);

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

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

const chart = AgCharts.create(options);

function setPlacement(value: string) {
  (options.series![0] as AgPyramidSeriesOptions<DataType>).label!.placement =
    value as AgFunnelSeriesLabelPlacement;
  options.subtitle!.text = value;

  chart.update(options);
}

function setDirection(event: Event) {
  const direction = (event.target as HTMLInputElement).value as
    | "vertical"
    | "horizontal";
  options.series = [
    { ...(options.series![0] as AgPyramidSeriesOptions<DataType>), direction },
  ];

  chart.update(options);
}

function setStageLabelPlacement(event: Event) {
  const placement = (event.target as HTMLInputElement).value as
    | "before"
    | "after";
  const series = options.series![0] as AgPyramidSeriesOptions<DataType>;
  options.series = [
    { ...series, stageLabel: { ...series.stageLabel, placement } },
  ];

  chart.update(options);
}

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

[Live example: Pyramid Label Placement](https://www.ag-grid.com/charts/archive/14.2.0/typescript/pyramid-series/examples/pyramid-label-placement/)

```js
{
    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](https://www.ag-grid.com/charts/archive/14.2.0/javascript/rtl/) 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](https://www.ag-grid.com/charts/archive/14.2.0/javascript/series-labels/) for the full set of label placement and collision avoidance options, and the [API Reference](https://www.ag-grid.com/charts/archive/14.2.0/javascript/pyramid-series/#api-reference) for additional customisation options.

## Pyramid Chart Examples

See more Pyramid Chart examples in the [AG Charts Gallery](https://www.ag-grid.com/charts/archive/14.2.0/gallery/#pyramid).

- [Pyramid Chart Example](https://www.ag-grid.com/charts/archive/14.2.0/gallery/simple-pyramid/)

## API Reference

#### Pyramid Series

| Property | Type | Default | Description |
| --- | --- | --- | --- |
| 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 | 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. |
| highlight.enabled | boolean |  | Set to `false` to disable highlighting. |
| highlight.highlightedItem | AgHighlightStyleOptions |  | Options for the highlighted item. |
| highlight.highlightedItem.opacity | Opacity |  | The opacity of the whole series (line, fill, labels and markers, if any) |
| highlight.highlightedItem.stroke | CssColor \| AgColorRef \| AgColorRefMixOnto \| AgColorRefMixOntoColor |  | The colour for the stroke. |
| highlight.highlightedItem.strokeWidth | PixelSize |  | The width of the stroke in pixels. |
| highlight.highlightedItem.strokeOpacity | Opacity |  | The opacity of the stroke colour. |
| highlight.highlightedItem.lineDash | PixelSize[] |  | An array specifying the length in pixels of alternating dashes and gaps. |
| highlight.highlightedItem.lineDashOffset | PixelSize |  | The initial offset of the dashed line in pixels. |
| highlight.highlightedItem.fill | CssColor \| AgColorRef \| AgColorRefMixOnto \| AgColorRefMixOntoColor \| AgGradientColor \| AgPatternColor \| AgImageFill |  | The colour for filling shapes. A colour string, or an object for a gradient, pattern, or image fill. |
| highlight.highlightedItem.fillOpacity | Opacity |  | The opacity of the fill colour. |
| highlight.unhighlightedItem | AgHighlightStyleOptions |  | Options for the un-highlighted items when there is an active highlight. |
| highlight.unhighlightedItem.opacity | Opacity |  | The opacity of the whole series (line, fill, labels and markers, if any) |
| highlight.unhighlightedItem.stroke | CssColor \| AgColorRef \| AgColorRefMixOnto \| AgColorRefMixOntoColor |  | The colour for the stroke. |
| highlight.unhighlightedItem.strokeWidth | PixelSize |  | The width of the stroke in pixels. |
| highlight.unhighlightedItem.strokeOpacity | Opacity |  | The opacity of the stroke colour. |
| highlight.unhighlightedItem.lineDash | PixelSize[] |  | An array specifying the length in pixels of alternating dashes and gaps. |
| highlight.unhighlightedItem.lineDashOffset | PixelSize |  | The initial offset of the dashed line in pixels. |
| highlight.unhighlightedItem.fill | CssColor \| AgColorRef \| AgColorRefMixOnto \| AgColorRefMixOntoColor \| AgGradientColor \| AgPatternColor \| AgImageFill |  | The colour for filling shapes. A colour string, or an object for a gradient, pattern, or image fill. |
| highlight.unhighlightedItem.fillOpacity | Opacity |  | The opacity of the fill colour. |
| nodeClickRange | PixelSize \| 'exact' \| 'nearest' \| 'area' |  | 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. |
| listeners.seriesNodeClick | Listener |  | The listener to call when a node (marker, column, bar, tile or a pie sector) in the series is clicked. |
| listeners.seriesNodeDoubleClick | Listener |  | The listener to call when a node (marker, column, bar, tile or a pie sector) in the series is double-clicked. |
| fills | Array<CssColor \| AgColorRef \| AgColorRefMixOnto \| AgColorRefMixOntoColor \| AgGradientColor \| AgPatternColor \| AgImageFill> |  | 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. |
| label.placement | AgFunnelSeriesLabelPlacement \| AgFunnelSeriesLabelPlacement[] |  | Where to render series labels relative to the stages. Either a single placement or an ordered fallback list tried in turn until one fits. |
| label.spacing | PixelSize |  | Distance between the stage edges and the text. |
| label.formatter | RichFormatter |  | A custom formatting function used to convert data values into text for display by labels. |
| label.format | string |  | Format string used when rendering labels. |
| label.itemStyler | Styler |  | Function used to style individual datum labels. |
| label.enabled | boolean |  | Whether the associated elements and properties should be used in the chart. |
| label.color | CssColor \| AgColorRef \| AgColorRefMixOnto \| AgColorRefMixOntoColor |  | The colour for text elements. A colour string, or a theme-colour reference object. |
| label.fontSize | FontSize |  | The size of the font in pixels for text elements. |
| label.fontFamily | FontFamily |  | The font family for text elements. |
| label.fontStyle | FontStyle |  | The style to use for text elements. |
| label.fontWeight | FontWeight |  | The font weight to use for text elements. |
| label.border | BorderOptions |  | Stroke options for the box border. |
| label.border.enabled | boolean |  | Whether the associated elements and properties should be used in the chart. |
| label.border.stroke | CssColor \| AgColorRef \| AgColorRefMixOnto \| AgColorRefMixOntoColor |  | The colour for the stroke. |
| label.border.strokeWidth | PixelSize |  | The width of the stroke in pixels. |
| label.border.strokeOpacity | Opacity |  | The opacity of the stroke colour. |
| label.cornerRadius | PixelSize |  | Apply rounded corners to the label box. |
| label.padding | PixelSize \| PaddingOptions |  | Distance between the label text and the border. A number applies uniform padding; an object sets each side. |
| label.fill | CssColor \| AgColorRef \| AgColorRefMixOnto \| AgColorRefMixOntoColor \| AgGradientColor \| AgPatternColor \| AgImageFill |  | The colour for filling shapes. A colour string, or an object for a gradient, pattern, or image fill. |
| label.fillOpacity | Opacity |  | The opacity of the fill colour. |
| label.collision | AgChartLabelCollisionOptions |  | Configuration controlling the spacing kept from obstacles and whether a label that cannot be placed clear of every obstacle is kept at its least-overflowing placement or hidden. |
| label.collision.threshold | PixelSize |  | Collision threshold in pixels. A positive value triggers avoidance strategies when labels are further away, a negative value allows labels to overlap without triggering avoidance. |
| label.collision.alwaysShow | boolean |  | Whether to keep a colliding label visible when a collision remains after every avoidance strategy has been applied. When `true` the label stays at the best available position; when `false` it is hidden instead. |
| label.maxWidth | PixelSize |  | Maximum width, in pixels, the label may occupy before it is wrapped or truncated to fit. |
| label.maxHeight | PixelSize |  | Maximum height, in pixels, the label may occupy before it is wrapped or truncated to fit. |
| label.wrapping | 'never' \| 'always' \| 'hyphenate' \| 'on-space' |  | Text wrapping strategy applied when the label is constrained by `maxWidth` or `maxHeight`. - `'always'` will always wrap text to fit within the bounds. - `'hyphenate'` is similar to `'always'`, but inserts a hyphen (`-`) if forced to wrap in the middle of a word. - `'on-space'` will only wrap on white space. If there is no possibility to wrap a line on space and satisfy the bounds, the text will be truncated. - `'never'` disables text wrapping. |
| label.truncate | boolean |  | Whether to truncate the label with an ellipsis when it does not fit within its bounds. |
| label.insideStyle | AgChartLabelPlacementStyleOptions |  | Styles applied when the label is placed inside the shape. |
| label.insideStyle.cornerRadius | PixelSize |  | Rounded corners of the label box. |
| label.insideStyle.padding | PixelSize \| PaddingOptions |  | Padding between the label text and the box edge. |
| label.insideStyle.border | BorderOptions |  | Border applied to the label box for this placement. |
| label.insideStyle.border.enabled | boolean |  | Whether the associated elements and properties should be used in the chart. |
| label.insideStyle.border.stroke | CssColor \| AgColorRef \| AgColorRefMixOnto \| AgColorRefMixOntoColor |  | The colour for the stroke. |
| label.insideStyle.border.strokeWidth | PixelSize |  | The width of the stroke in pixels. |
| label.insideStyle.border.strokeOpacity | Opacity |  | The opacity of the stroke colour. |
| label.insideStyle.color | CssColor \| AgColorRef \| AgColorRefMixOnto \| AgColorRefMixOntoColor |  | The colour for text elements. A colour string, or a theme-colour reference object. |
| label.insideStyle.fill | CssColor \| AgColorRef \| AgColorRefMixOnto \| AgColorRefMixOntoColor \| AgGradientColor \| AgPatternColor \| AgImageFill |  | The colour for filling shapes. A colour string, or an object for a gradient, pattern, or image fill. |
| label.insideStyle.fillOpacity | Opacity |  | The opacity of the fill colour. |
| label.outsideStyle | AgChartLabelPlacementStyleOptions |  | Styles applied when the label is placed outside the shape. |
| label.outsideStyle.cornerRadius | PixelSize |  | Rounded corners of the label box. |
| label.outsideStyle.padding | PixelSize \| PaddingOptions |  | Padding between the label text and the box edge. |
| label.outsideStyle.border | BorderOptions |  | Border applied to the label box for this placement. |
| label.outsideStyle.border.enabled | boolean |  | Whether the associated elements and properties should be used in the chart. |
| label.outsideStyle.border.stroke | CssColor \| AgColorRef \| AgColorRefMixOnto \| AgColorRefMixOntoColor |  | The colour for the stroke. |
| label.outsideStyle.border.strokeWidth | PixelSize |  | The width of the stroke in pixels. |
| label.outsideStyle.border.strokeOpacity | Opacity |  | The opacity of the stroke colour. |
| label.outsideStyle.color | CssColor \| AgColorRef \| AgColorRefMixOnto \| AgColorRefMixOntoColor |  | The colour for text elements. A colour string, or a theme-colour reference object. |
| label.outsideStyle.fill | CssColor \| AgColorRef \| AgColorRefMixOnto \| AgColorRefMixOntoColor \| AgGradientColor \| AgPatternColor \| AgImageFill |  | The colour for filling shapes. A colour string, or an object for a gradient, pattern, or image fill. |
| label.outsideStyle.fillOpacity | Opacity |  | The opacity of the fill colour. |
| stageLabel | AgPyramidSeriesStageLabelOptions |  | Configuration for the stage labels. |
| stageLabel.placement | 'before' \| 'after' |  | Placement of the label in relation to the chart. |
| stageLabel.spacing | number |  | Spacing of the label in relation to the chart. |
| stageLabel.formatter | RichFormatter |  | A custom formatting function used to convert data values into text for display by labels. |
| stageLabel.format | string |  | Format string used when rendering labels. |
| stageLabel.itemStyler | Styler |  | Function used to style individual datum labels. |
| stageLabel.enabled | boolean |  | Whether the associated elements and properties should be used in the chart. |
| stageLabel.color | CssColor \| AgColorRef \| AgColorRefMixOnto \| AgColorRefMixOntoColor |  | The colour for text elements. A colour string, or a theme-colour reference object. |
| stageLabel.fontSize | FontSize |  | The size of the font in pixels for text elements. |
| stageLabel.fontFamily | FontFamily |  | The font family for text elements. |
| stageLabel.fontStyle | FontStyle |  | The style to use for text elements. |
| stageLabel.fontWeight | FontWeight |  | The font weight to use for text elements. |
| stageLabel.border | BorderOptions |  | Stroke options for the box border. |
| stageLabel.border.enabled | boolean |  | Whether the associated elements and properties should be used in the chart. |
| stageLabel.border.stroke | CssColor \| AgColorRef \| AgColorRefMixOnto \| AgColorRefMixOntoColor |  | The colour for the stroke. |
| stageLabel.border.strokeWidth | PixelSize |  | The width of the stroke in pixels. |
| stageLabel.border.strokeOpacity | Opacity |  | The opacity of the stroke colour. |
| stageLabel.cornerRadius | PixelSize |  | Apply rounded corners to the label box. |
| stageLabel.padding | PixelSize \| PaddingOptions |  | Distance between the label text and the border. A number applies uniform padding; an object sets each side. |
| stageLabel.fill | CssColor \| AgColorRef \| AgColorRefMixOnto \| AgColorRefMixOntoColor \| AgGradientColor \| AgPatternColor \| AgImageFill |  | The colour for filling shapes. A colour string, or an object for a gradient, pattern, or image fill. |
| stageLabel.fillOpacity | Opacity |  | The opacity of the fill colour. |
| shadow | AgDropShadowOptions |  | Configuration for the shadow used behind the series items. |
| shadow.enabled | boolean |  | Whether the shadow is visible. |
| shadow.color | CssColor |  | The colour of the shadow. |
| shadow.xOffset | PixelSize |  | The horizontal offset in pixels for the shadow. |
| shadow.yOffset | PixelSize |  | The vertical offset in pixels for the shadow. |
| shadow.blur | PixelSize |  | The radius of the shadow's blur, given in pixels. |
| tooltip | AgSeriesTooltip |  | Series-specific tooltip configuration. |
| tooltip.enabled | boolean |  | Whether to show tooltips when the series are hovered over. |
| tooltip.showArrow | boolean |  | The tooltip arrow is displayed by default, unless the container restricts it or a position offset is provided. To always display the arrow, set `showArrow` to `true`. To remove the arrow, set `showArrow` to `false`. |
| tooltip.range | PixelSize \| 'exact' \| 'nearest' \| 'area' |  | Range from a point that triggers the tooltip to show. Each series type uses its own default; typically this is `'nearest'` for marker-based series and `'exact'` for shape-based series. |
| tooltip.position | AgTooltipPositionOptions |  | The position of the tooltip. Each series type uses its own default; typically this is `'node'` for marker-based series and `'pointer'` for shape-based series. |
| tooltip.position.anchorTo | AgTooltipAnchorTo |  | The element or point to position the tooltip relative to. |
| tooltip.position.placement | AgTooltipPlacement \| AgTooltipPlacement[] |  | The positioning of the tooltip in relation to the element it's anchored to. Multiple values can be provided as a fallback mechanism for the case the tooltip does not fit inside the chart. |
| tooltip.position.xOffset | PixelSize |  | The horizontal offset in pixels for the position of the tooltip. |
| tooltip.position.yOffset | PixelSize |  | The vertical offset in pixels for the position of the tooltip. |
| tooltip.position.offset | PixelSize |  | The distance in pixels between the tooltip and its anchor point, applied in the placement direction.  Default: `12` (`0` when `anchorTo` is `'chart'`). |
| tooltip.interaction | AgSeriesTooltipInteraction |  | Configuration for tooltip interaction. |
| tooltip.interaction.enabled (required) | boolean |  | Set to `true` to keep the tooltip open when the mouse is hovering over it, and enable clicking tooltip text |
| tooltip.renderer | Renderer |  | Function used to create the content for tooltips. |
| 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. |