---
title: "Org Chart"
enterprise: true
framework: react
version: "14.1.0"
---

# Org Chart

An Organisation Chart displays hierarchical relationships between people, departments, or entities as a tree of connected cards.

## Simple Organisation Chart

#### Simple Organisation Chart

```tsx
import React, { useState } from "react";
import { createRoot } from "react-dom/client";
import { AgCharts } from "ag-charts-react";
import {
  AgChartOptions,
  ContextMenuModule,
  ModuleRegistry,
  OrganizationSeriesModule,
} from "ag-charts-enterprise";
import { getData } from "./data";

ModuleRegistry.registerModules([OrganizationSeriesModule, ContextMenuModule]);

const ChartExample = () => {
  const [options, setOptions] = useState<AgChartOptions>({
    title: {
      text: "Company Organisation",
    },
    data: getData(),
    initialState: {
      collapsed: [
        "Mr. Jeffrey Brown",
        "Nicole Jones",
        "Justin Contreras",
        "Lawrence Martinez",
        "Eric Jensen",
      ],
    },
    series: [
      {
        type: "organization",
        idKey: "id",
        parentIdKey: "parentId",
        node: {
          clickToExpand: false,
          image: {
            key: "avatar",
            height: 50,
            width: 50,
            position: "left",
          },
          title: {
            key: "name",
          },
          subtitle: {
            key: "job",
          },
          labels: [
            {
              key: "location",
            },
          ],
        },
      },
    ],
  });

  return <AgCharts options={options} />;
};

const root = createRoot(document.getElementById("root")!);
root.render(<ChartExample />);
```

[Live example: Simple Organisation Chart](https://www.ag-grid.com/charts/reactFunctionalTs/org-chart/examples/simple-org-chart)

The Org Chart is designed to display a single series and is created using the `organization` series type.

The data passed in should be an array of nodes, with each node containing a unique identifier field, and a second field that references the identifier of its parent node. The root node should have a `null` value for its `parentId`.

```js
{
    series: [
        {
            type: 'organization',
            idKey: 'id',
            parentIdKey: 'parentId',
            node: {
                title: { key: 'name' },
                subtitle: { key: 'job' },
                image: { key: 'avatar' },
                labels: [{ key: 'location' }],
            },
        },
    ],
}
```

In this configuration:

- `idKey` and `parentIdKey` define parent-child relationships. These default to `'id'` and `'parentId'` respectively.
- `title` and `subtitle` display the primary and secondary card text with the values from the provided data fields. The keys default to `'title'` and `'subtitle'` respectively.
- `image` displays an image sourced from the data field specified by `key`. The key defaults to `'image'`.
- `labels` allow adding additional text rows below the subtitle, each mapping a data field via `key`.

## Text

Each node can display a `title`, `subtitle` as well as an array of `labels`.

#### Text Customisation

```tsx
import React, { useState } from "react";
import { createRoot } from "react-dom/client";
import { AgCharts } from "ag-charts-react";
import {
  AgChartOptions,
  ContextMenuModule,
  ModuleRegistry,
  OrganizationSeriesModule,
} from "ag-charts-enterprise";
import { getData } from "./data";

ModuleRegistry.registerModules([OrganizationSeriesModule, ContextMenuModule]);

const ChartExample = () => {
  const [options, setOptions] = useState<AgChartOptions>({
    title: { text: "Company Organisation" },
    data: getData(),
    initialState: {
      collapsed: [
        "Mr. Jeffrey Brown",
        "Nicole Jones",
        "Justin Contreras",
        "Lawrence Martinez",
        "Eric Jensen",
      ],
    },
    series: [
      {
        type: "organization",
        idKey: "id",
        parentIdKey: "parentId",
        node: {
          image: { key: "avatar", position: "left", height: 50, width: 50 },
          title: { key: "name", textAlign: "left", fontSize: 16 },
          subtitle: { key: "job", textAlign: "left", fontStyle: "italic" },
          labels: [
            { key: "location", textAlign: "left" },
            {
              key: "status",
              textAlign: "right",
              itemStyler: ({ datum }) => {
                const isRemote = datum.status === "Remote";
                return {
                  fill: isRemote ? "#fff3e0" : "#e8f5e9",
                  stroke: isRemote ? "#ff9800" : "#4caf50",
                  color: isRemote ? "#e65100" : "#2e7d32",
                  cornerRadius: 8,
                  padding: 4,
                  fontWeight: "bold",
                };
              },
            },
          ],
        },
      },
    ],
  });

  return <AgCharts options={options} />;
};

const root = createRoot(document.getElementById("root")!);
root.render(<ChartExample />);
```

[Live example: Text Customisation](https://www.ag-grid.com/charts/reactFunctionalTs/org-chart/examples/org-chart-label-customisation)

```js
{
    series: [
        {
            type: 'organization',
            node: {
                image: { key: 'avatar', position: 'left', height: 50, width: 50 },
                title: { key: 'name', textAlign: 'left', fontSize: 16 },
                subtitle: { key: 'job', textAlign: 'left', fontStyle: 'italic' },
                labels: [
                    { key: 'location', textAlign: 'left' },
                    {
                        key: 'status',
                        textAlign: 'right',
                        itemStyler: ({ datum }) => ({
                            fill: datum.status === 'Remote' ? '#fff3e0' : '#e8f5e9',
                            stroke: datum.status === 'Remote' ? '#ff9800' : '#4caf50',
                            color: datum.status === 'Remote' ? '#e65100' : '#2e7d32',
                            cornerRadius: 8,
                            padding: 4,
                            fontWeight: 'bold',
                        }),
                    },
                ],
            },
        },
    ],
}
```

In this configuration:

- `title` and `subtitle` display the primary and secondary text with their own `key`, `textAlign`, and font styles.
- `labels` is an array with each entry mapping a data field to a label stacked vertically below the subtitle.
- An `itemStyler` is used to add a pill-style background to the 'status' label, with the fill and stroke colour determined by the label value.

See the [API Reference](#api-reference) for the available styling options for each text element.

## Image

Each node can display an optional image by referencing a data field containing an image URL.

#### Image Position

```tsx
import React, { useState, Fragment } from "react";
import { createRoot } from "react-dom/client";
import { AgCharts } from "ag-charts-react";
import {
  AgChartOptions,
  AgOrganizationSeriesOptions,
  AgOrganizationSeriesOptionsNodeImagePosition,
  AgStandaloneChartOptions,
  ContextMenuModule,
  ModuleRegistry,
  OrganizationSeriesModule,
} from "ag-charts-enterprise";
import { getData } from "./data";
import clone from "clone";

ModuleRegistry.registerModules([OrganizationSeriesModule, ContextMenuModule]);

const ChartExample = () => {
  const [options, setOptions] = useState<AgStandaloneChartOptions>({
    title: { text: "Company Organisation" },
    data: getData(),
    initialState: {
      collapsed: [
        "Mr. Jeffrey Brown",
        "Nicole Jones",
        "Justin Contreras",
        "Lawrence Martinez",
        "Eric Jensen",
      ],
    },
    series: [
      {
        type: "organization",
        idKey: "id",
        parentIdKey: "parentId",
        node: {
          image: {
            key: "avatar",
            height: 50,
            width: 50,
            position: "left",
            cornerRadius: 25,
          },
          title: { key: "name" },
          subtitle: { key: "job" },
          labels: [{ key: "location" }],
        },
      },
    ],
  });

  const changePosition = (
    position: AgOrganizationSeriesOptionsNodeImagePosition,
  ) => {
    const nextOptions = clone(options);

    (
      nextOptions.series![0] as AgOrganizationSeriesOptions
    ).node!.image!.position = position;

    setOptions(nextOptions);
  };

  const changeCornerRadius = (event: any) => {
    const nextOptions = clone(options);

    const value = Number(event.target.value);
    document.getElementById("cornerRadiusValue")!.innerHTML = String(value);
    (
      nextOptions.series![0] as AgOrganizationSeriesOptions
    ).node!.image!.cornerRadius = value;

    setOptions(nextOptions);
  };

  return (
    <Fragment>
      <div className="example-controls">
        <div className="controls-row">
          Position:
          <button onClick={() => changePosition("top")}>Top</button>
          <button onClick={() => changePosition("right")}>Right</button>
          <button onClick={() => changePosition("bottom")}>Bottom</button>
          <button onClick={() => changePosition("left")}>Left</button>
          <span className="gap-left">
            Corner Radius:
            <input
              type="range"
              id="cornerRadiusInput"
              min="0"
              max="25"
              defaultValue="25"
              step="1"
              onInput={(event) => changeCornerRadius(event)}
              onChange={(event) => changeCornerRadius(event)}
            />
            <span
              id="cornerRadiusValue"
              style={{
                display: "inline-block",
                minWidth: "3ch",
                textAlign: "right",
              }}
            >
              25
            </span>
          </span>
        </div>
      </div>
      <AgCharts options={options} />
    </Fragment>
  );
};

const root = createRoot(document.getElementById("root")!);
root.render(<ChartExample />);
```

[Live example: Image Position](https://www.ag-grid.com/charts/reactFunctionalTs/org-chart/examples/org-chart-images)

```js
{
    series: [
        {
            type: 'organization',
            node: {
                image: {
                    key: 'avatar',
                    cornerRadius: 25,
                    width: 50,
                    height: 50,
                    position: 'left',
                },
            },
        },
    ],
}
```

In this configuration:

- `key` maps to a data field containing an image URL.
- `position` places the image within the card (`'top'`, `'bottom'`, `'left'`, or `'right'`).
  - The image position dictates the layout of the text within the card.
- `width` and `height` control the image dimensions.
- `cornerRadius` rounds the image corners, allowing rounded rectangles or circles.

## Direction

#### Direction

```tsx
import React, { useState, Fragment } from "react";
import { createRoot } from "react-dom/client";
import { AgCharts } from "ag-charts-react";
import {
  AgOrganizationSeriesOptions,
  AgStandaloneChartOptions,
  ContextMenuModule,
  ModuleRegistry,
  OrganizationSeriesModule,
} from "ag-charts-enterprise";
import { getData } from "./data";
import clone from "clone";

ModuleRegistry.registerModules([OrganizationSeriesModule, ContextMenuModule]);

const ChartExample = () => {
  const [options, setOptions] = useState<AgStandaloneChartOptions>({
    title: {
      text: "Company Organisation",
    },
    data: getData(),
    initialState: {
      collapsed: [
        "Mr. Jeffrey Brown",
        "Justin Contreras",
        "Lawrence Martinez",
        "Eric Jensen",
      ],
    },
    series: [
      {
        type: "organization",
        idKey: "id",
        parentIdKey: "parentId",
        direction: "horizontal",
        node: {
          clickToExpand: false,
          image: {
            key: "avatar",
            height: 50,
            width: 50,
            position: "left",
          },
          title: {
            key: "name",
          },
          subtitle: {
            key: "job",
          },
          labels: [
            {
              key: "location",
            },
          ],
        },
      },
    ],
  });

  const changeDirection = (direction: "horizontal" | "vertical") => {
    const nextOptions = clone(options);

    (nextOptions.series![0] as AgOrganizationSeriesOptions).direction =
      direction;

    setOptions(nextOptions);
  };

  const toggleReverse = () => {
    const nextOptions = clone(options);

    (nextOptions.series![0] as AgOrganizationSeriesOptions).reverse = !(
      nextOptions.series![0] as AgOrganizationSeriesOptions
    ).reverse;

    setOptions(nextOptions);
  };

  return (
    <Fragment>
      <div className="example-controls">
        <div className="controls-row">
          <button onClick={() => changeDirection("horizontal")}>
            Horizontal
          </button>
          <button onClick={() => changeDirection("vertical")}>Vertical</button>
          <button onClick={toggleReverse}>Toggle Reverse</button>
        </div>
      </div>
      <AgCharts options={options} />
    </Fragment>
  );
};

const root = createRoot(document.getElementById("root")!);
root.render(<ChartExample />);
```

[Live example: Direction](https://www.ag-grid.com/charts/reactFunctionalTs/org-chart/examples/org-chart-direction)

```js
{
    series: {
        type: 'organization',
        direction: 'horizontal',
        reverse: false,
    },
}
```

## Expander

The expander is displayed on nodes with children and is used to [collapse and expand](#collapse-and-expand) subtrees.

#### Expander Child Counts

```tsx
import React, { useState, Fragment } from "react";
import { createRoot } from "react-dom/client";
import { AgCharts } from "ag-charts-react";
import {
  AgOrganizationSeriesOptions,
  AgStandaloneChartOptions,
  ModuleRegistry,
  OrganizationSeriesModule,
} from "ag-charts-enterprise";
import { getData } from "./data";
import clone from "clone";

ModuleRegistry.registerModules([OrganizationSeriesModule]);

const ChartExample = () => {
  const [options, setOptions] = useState<AgStandaloneChartOptions>({
    title: { text: "Company Organisation" },
    data: getData(),
    series: [
      {
        type: "organization",
        idKey: "id",
        parentIdKey: "parentId",
        node: {
          title: { key: "name" },
          subtitle: { key: "job" },
        },
        expander: {
          text: {
            showAllChildren: true,
            showDirectChildren: true,
          },
        },
      },
    ],
  });

  const setShowAllChildren = (showAllChildren: boolean) => {
    const nextOptions = clone(options);

    (
      nextOptions.series![0] as AgOrganizationSeriesOptions
    ).expander!.text!.showAllChildren = showAllChildren;

    setOptions(nextOptions);
  };

  const setShowDirectChildren = (showDirectChildren: boolean) => {
    const nextOptions = clone(options);

    (
      nextOptions.series![0] as AgOrganizationSeriesOptions
    ).expander!.text!.showDirectChildren = showDirectChildren;

    setOptions(nextOptions);
  };

  return (
    <Fragment>
      <div className="example-controls">
        <div className="controls-row">
          <input
            type="checkbox"
            id="showAllChildren"
            checked=""
            onChange={(event) => setShowAllChildren(event.target.checked)}
          />
          <label htmlFor="showAllChildren">showAllChildren</label>
          <input
            type="checkbox"
            id="showDirectChildren"
            checked=""
            className="gap-left"
            onChange={(event) => setShowDirectChildren(event.target.checked)}
          />
          <label htmlFor="showDirectChildren">showDirectChildren</label>
        </div>
      </div>
      <AgCharts options={options} />
    </Fragment>
  );
};

const root = createRoot(document.getElementById("root")!);
root.render(<ChartExample />);
```

[Live example: Expander Child Counts](https://www.ag-grid.com/charts/reactFunctionalTs/org-chart/examples/org-chart-expander-child-counts)

```js
{
    series: [
        {
            type: 'organization',
            expander: {
                text: {
                    showAllChildren: true,
                    showDirectChildren: true,
                },
            },
        },
    ],
}
```

In this example:

- `showAllChildren` includes the total count of all descendants in the expander text.
- `showDirectChildren` includes the count of direct children in the expander text.
- A `formatter` can be used instead, for full control over the expander text. The params include `allChildren`, `directChildren`, `depth` and `isCollapsed` alongside the datum.

See the [API Reference](#reference-AgOrganizationSeriesOptions-expander-text) for more details.

## Customisation

### Node Styling

#### Node Styling

```tsx
import React, { useState } from "react";
import { createRoot } from "react-dom/client";
import { AgCharts } from "ag-charts-react";
import {
  AgChartOptions,
  ContextMenuModule,
  ModuleRegistry,
  OrganizationSeriesModule,
} from "ag-charts-enterprise";
import { getData } from "./data";

ModuleRegistry.registerModules([OrganizationSeriesModule, ContextMenuModule]);

const ChartExample = () => {
  const [options, setOptions] = useState<AgChartOptions>({
    title: { text: "Company Organisation" },
    data: getData(),
    initialState: {
      collapsed: [
        "Mr. Jeffrey Brown",
        "Nicole Jones",
        "Justin Contreras",
        "Lawrence Martinez",
        "Eric Jensen",
      ],
    },
    series: [
      {
        type: "organization",
        idKey: "id",
        parentIdKey: "parentId",
        node: {
          width: 180,
          // height: 120,
          cornerRadius: 12,
          image: {
            key: "avatar",
            position: "left",
            height: 50,
            width: 50,
            cornerRadius: 25,
          },
          itemStyler: ({ datum }) => {
            if (datum.department === "Executive")
              return {
                fill: "#76B2DC",
                fillOpacity: 0.2,
                stroke: "#1B65BF",
                strokeWidth: 2,
              };
            if (datum.department === "Technology")
              return {
                fill: "#7AE281",
                fillOpacity: 0.2,
                stroke: "#327C35",
                strokeWidth: 2,
              };
            if (datum.department === "Operations")
              return {
                fill: "#EBB967",
                fillOpacity: 0.2,
                stroke: "#A94F1D",
                strokeWidth: 2,
              };
          },
          title: { key: "name" },
          subtitle: { key: "job" },
          labels: [{ key: "location" }],
        },
      },
    ],
  });

  return <AgCharts options={options} />;
};

const root = createRoot(document.getElementById("root")!);
root.render(<ChartExample />);
```

[Live example: Node Styling](https://www.ag-grid.com/charts/reactFunctionalTs/org-chart/examples/org-chart-node-customisation)

```js
{
    series: [
        {
            type: 'organization',
            node: {
                width: 180,
                cornerRadius: 12,
                itemStyler: ({ datum }) => {
                    if (datum.department === 'Executive')
                        return { fill: '#76B2DC', fillOpacity: 0.2, stroke: '#1B65BF', strokeWidth: 2 };
                    if (datum.department === 'Technology')
                        return { fill: '#7AE281', fillOpacity: 0.2, stroke: '#327C35', strokeWidth: 2 };
                    if (datum.department === 'Operations')
                        return { fill: '#EBB967', fillOpacity: 0.2, stroke: '#A94F1D', strokeWidth: 2 };
                },
            },
        },
    ],
}
```

In this configuration:

- The `width` option is used to set the card dimensions. This causes text wrapping when the content exceeds the available space.
- `cornerRadius` rounds the card corners.
- Each department is assigned a specific colour by using the `itemStyler` callback based on the `department` field in the data.

See the [API Reference](#reference-AgOrganizationSeriesOptions-node) for the full list of available styling options.

### Connectors

Connectors are the lines drawn between parent and child nodes and are configured via the `link` property.

#### Connector Styling

```tsx
import React, { useState, Fragment } from "react";
import { createRoot } from "react-dom/client";
import { AgCharts } from "ag-charts-react";
import {
  AgOrganizationSeriesOptions,
  AgStandaloneChartOptions,
  ContextMenuModule,
  ModuleRegistry,
  OrganizationSeriesModule,
} from "ag-charts-enterprise";
import { getData } from "./data";
import clone from "clone";

ModuleRegistry.registerModules([OrganizationSeriesModule, ContextMenuModule]);

const ChartExample = () => {
  const [options, setOptions] = useState<AgStandaloneChartOptions>({
    title: { text: "Company Organisation" },
    data: getData(),
    initialState: {
      collapsed: [
        "Mr. Jeffrey Brown",
        "Nicole Jones",
        "Justin Contreras",
        "Lawrence Martinez",
        "Eric Jensen",
      ],
    },
    series: [
      {
        type: "organization",
        idKey: "id",
        parentIdKey: "parentId",
        link: {
          stroke: "#ff8833",
          strokeWidth: 2,
          lineDash: [8, 2],
          interpolation: { type: "step", cornerRadius: 8 },
          itemStyler: ({ fromDatum }) => {
            if (fromDatum.department === "Technology") {
              return { stroke: "#00994d" };
            } else if (fromDatum.job === "CEO") {
              return { stroke: "#006f9b", strokeWidth: 4, lineDash: [] };
            }
          },
        },
        node: {
          image: {
            key: "avatar",
            position: "left",
            height: 50,
            width: 50,
            cornerRadius: 25,
          },
          title: { key: "name" },
          subtitle: { key: "job" },
          labels: [{ key: "location" }],
        },
      },
    ],
  });

  const changeCornerRadius = (event: any) => {
    const nextOptions = clone(options);

    const value = Number(event.target.value);
    document.getElementById("cornerRadiusValue")!.innerHTML = String(value);
    (
      nextOptions.series![0] as AgOrganizationSeriesOptions
    ).link!.interpolation = { type: "step", cornerRadius: value };

    setOptions(nextOptions);
  };

  return (
    <Fragment>
      <div className="example-controls">
        <div className="controls-row">
          Corner Radius:
          <input
            type="range"
            id="cornerRadiusInput"
            min="0"
            max="25"
            defaultValue="8"
            step="1"
            onInput={(event) => changeCornerRadius(event)}
            onChange={(event) => changeCornerRadius(event)}
          />
          <span
            id="cornerRadiusValue"
            style={{
              display: "inline-block",
              minWidth: "3ch",
              textAlign: "right",
            }}
          >
            8
          </span>
        </div>
      </div>
      <AgCharts options={options} />
    </Fragment>
  );
};

const root = createRoot(document.getElementById("root")!);
root.render(<ChartExample />);
```

[Live example: Connector Styling](https://www.ag-grid.com/charts/reactFunctionalTs/org-chart/examples/org-chart-link-customisation)

```js
{
    series: [
        {
            type: 'organization',
            link: {
                stroke: '#ff8833',
                strokeWidth: 2,
                lineDash: [8, 2],
                interpolation: { type: 'step', cornerRadius: 8 },
                itemStyler: ({ fromDatum }) => {
                    if (fromDatum.department === 'Technology') {
                        return { stroke: '#00994d' };
                    } else if (fromDatum.job === 'CEO') {
                        return { stroke: '#006f9b', strokeWidth: 4, lineDash: [] };
                    }
                },
            },
        },
    ],
}
```

In this configuration:

- `interpolation.cornerRadius` rounds the corners of each step.
- `lineDash` sets a dashed line pattern.
- `link.itemStyler` styles connectors per-relationship, receiving `fromDatum` (parent) and `toDatum` (child).

### Expander

The expander's appearance can be customised via the `expander` property. See [Expander](#expander) above for text-content options like child counts and `formatter`.

#### Expander Styling

```tsx
import React, { useState } from "react";
import { createRoot } from "react-dom/client";
import { AgCharts } from "ag-charts-react";
import {
  AgChartOptions,
  ContextMenuModule,
  ModuleRegistry,
  OrganizationSeriesModule,
} from "ag-charts-enterprise";
import { getData } from "./data";

ModuleRegistry.registerModules([OrganizationSeriesModule, ContextMenuModule]);

const ChartExample = () => {
  const [options, setOptions] = useState<AgChartOptions>({
    title: { text: "Company Organisation" },
    data: getData(),
    initialState: {
      collapsed: [
        "Mr. Jeffrey Brown",
        "Nicole Jones",
        "Justin Contreras",
        "Lawrence Martinez",
        "Eric Jensen",
      ],
    },
    series: [
      {
        type: "organization",
        idKey: "id",
        parentIdKey: "parentId",
        expander: {
          cornerRadius: 25,
          strokeWidth: 2,
          padding: 15,
          itemStyler: ({ datum }) => {
            if (datum.department === "Technology")
              return { fill: "#e8f5e9", stroke: "#2e7d32" };
            if (datum.department === "Operations")
              return { fill: "#fff3e0", stroke: "#e65100" };
          },
        },
        node: {
          image: {
            key: "avatar",
            position: "left",
            height: 50,
            width: 50,
            cornerRadius: 25,
          },
          itemStyler: ({ datum }) => {
            if (datum.department === "Executive")
              return {
                fill: "#76B2DC",
                fillOpacity: 0.2,
                stroke: "#1B65BF",
                strokeWidth: 2,
              };
            if (datum.department === "Technology")
              return {
                fill: "#7AE281",
                fillOpacity: 0.2,
                stroke: "#327C35",
                strokeWidth: 2,
              };
            if (datum.department === "Operations")
              return {
                fill: "#EBB967",
                fillOpacity: 0.2,
                stroke: "#A94F1D",
                strokeWidth: 2,
              };
          },
          title: { key: "name" },
          subtitle: { key: "job" },
          labels: [{ key: "location" }],
        },
      },
    ],
  });

  return <AgCharts options={options} />;
};

const root = createRoot(document.getElementById("root")!);
root.render(<ChartExample />);
```

[Live example: Expander Styling](https://www.ag-grid.com/charts/reactFunctionalTs/org-chart/examples/org-chart-expander-styling)

```js
{
    series: [
        {
            type: 'organization',
            expander: {
                cornerRadius: 25,
                strokeWidth: 2,
                padding: 15,
                itemStyler: ({ datum }) => {
                    if (datum.department === 'Technology') return { fill: '#e8f5e9', stroke: '#2e7d32' };
                    if (datum.department === 'Operations') return { fill: '#fff3e0', stroke: '#e65100' };
                },
            },
        },
    ],
}
```

In this configuration:

- `cornerRadius`, `strokeWidth`, and `padding` control the button shape and border.
- `expander.itemStyler` provides per-node styling based on the department.

### Node Spacing

Three spacing properties control the gaps between nodes. These values apply at the leaf level, with higher levels in the hierarchy deriving their spacing from these.

#### Spacing

```tsx
import React, { useState, Fragment } from "react";
import { createRoot } from "react-dom/client";
import { AgCharts } from "ag-charts-react";
import {
  AgOrganizationSeriesOptions,
  AgStandaloneChartOptions,
  ContextMenuModule,
  ModuleRegistry,
  OrganizationSeriesModule,
} from "ag-charts-enterprise";
import { getData } from "./data";
import clone from "clone";

ModuleRegistry.registerModules([OrganizationSeriesModule, ContextMenuModule]);

const ChartExample = () => {
  const [options, setOptions] = useState<AgStandaloneChartOptions>({
    title: { text: "Company Organisation" },
    data: getData(),
    initialState: {
      collapsed: [
        "Mr. Jeffrey Brown",
        "Nicole Jones",
        "Justin Contreras",
        "Lawrence Martinez",
        "Eric Jensen",
      ],
    },
    series: [
      {
        type: "organization",
        idKey: "id",
        parentIdKey: "parentId",
        innerSpacing: 20,
        outerSpacing: 40,
        depthSpacing: 52,
        node: {
          image: {
            key: "avatar",
            position: "left",
            height: 50,
            width: 50,
            cornerRadius: 25,
          },
          title: { key: "name" },
          subtitle: { key: "job" },
          labels: [{ key: "location" }],
        },
      },
    ],
  });

  const changeInnerSpacing = (event: any) => {
    const nextOptions = clone(options);

    const value = Number(event.target.value);
    document.getElementById("innerSpacingValue")!.innerHTML = String(value);
    (nextOptions.series![0] as AgOrganizationSeriesOptions).innerSpacing =
      value;

    setOptions(nextOptions);
  };

  const changeOuterSpacing = (event: any) => {
    const nextOptions = clone(options);

    const value = Number(event.target.value);
    document.getElementById("outerSpacingValue")!.innerHTML = String(value);
    (nextOptions.series![0] as AgOrganizationSeriesOptions).outerSpacing =
      value;

    setOptions(nextOptions);
  };

  const changeDepthSpacing = (event: any) => {
    const nextOptions = clone(options);

    const value = Number(event.target.value);
    document.getElementById("depthSpacing")!.innerHTML = String(value);
    (nextOptions.series![0] as AgOrganizationSeriesOptions).depthSpacing =
      value;

    setOptions(nextOptions);
  };

  return (
    <Fragment>
      <div className="example-controls">
        <div className="controls-row">
          Sibling:
          <input
            type="range"
            id="innerSpacingInput"
            min="1"
            max="60"
            defaultValue="20"
            step="1"
            onInput={(event) => changeInnerSpacing(event)}
            onChange={(event) => changeInnerSpacing(event)}
          />
          <span
            id="innerSpacingValue"
            style={{
              display: "inline-block",
              minWidth: "3ch",
              textAlign: "right",
            }}
          >
            20
          </span>
          <span className="gap-left">
            Cousin:
            <input
              type="range"
              id="outerSpacingInput"
              min="1"
              max="80"
              defaultValue="40"
              step="1"
              onInput={(event) => changeOuterSpacing(event)}
              onChange={(event) => changeOuterSpacing(event)}
            />
            <span
              id="outerSpacingValue"
              style={{
                display: "inline-block",
                minWidth: "3ch",
                textAlign: "right",
              }}
            >
              40
            </span>
          </span>
          <span className="gap-left">
            Depth:
            <input
              type="range"
              id="verticalSpacingInput"
              min="20"
              max="100"
              defaultValue="52"
              step="2"
              onInput={(event) => changeDepthSpacing(event)}
              onChange={(event) => changeDepthSpacing(event)}
            />
            <span
              id="depthSpacing"
              style={{
                display: "inline-block",
                minWidth: "3ch",
                textAlign: "right",
              }}
            >
              52
            </span>
          </span>
        </div>
      </div>
      <AgCharts options={options} />
    </Fragment>
  );
};

const root = createRoot(document.getElementById("root")!);
root.render(<ChartExample />);
```

[Live example: Spacing](https://www.ag-grid.com/charts/reactFunctionalTs/org-chart/examples/org-chart-spacing)

```js
{
    series: [
        {
            type: 'organization',
            innerSpacing: 20,
            outerSpacing: 40,
            depthSpacing: 52,
        },
    ],
}
```

In this configuration:

- `innerSpacing` is the gap between sibling nodes, such as the gap between 'Lawrence Martinez' and 'Eric Jensen'.
- `outerSpacing` is the gap between cousin nodes, such as the gap between 'Justin Contreras' and 'Lawrence Martinez'.
- `depthSpacing` is the gap between parent and child nodes, such as the gap between 'Gary Garcia' and 'Lawrence Martinez'.

## Interactivity

### Collapse and Expand

Nodes with children can be collapsed and expanded by clicking the expander. They can also be controlled programmatically.

#### Collapse and Expand

```tsx
import React, { useState, useRef, Fragment } from "react";
import { createRoot } from "react-dom/client";
import { AgCharts } from "ag-charts-react";
import {
  AgChartsInstance,
  AgOrganizationSeriesOptions,
  AgStandaloneChartOptions,
  ContextMenuModule,
  ModuleRegistry,
  OrganizationSeriesModule,
} from "ag-charts-enterprise";
import { getData } from "./data";
import clone from "clone";

ModuleRegistry.registerModules([OrganizationSeriesModule, ContextMenuModule]);

const ChartExample = () => {
  const chartRef = useRef<AgChartsInstance>(null);
  const [options, setOptions] = useState<AgStandaloneChartOptions>({
    title: { text: "Company Organisation" },
    data: getData(),
    initialState: {
      collapsed: [
        "Mr. Jeffrey Brown",
        "Nicole Jones",
        "Justin Contreras",
        "Lawrence Martinez",
        "Eric Jensen",
      ],
    },
    series: [
      {
        type: "organization",
        idKey: "id",
        parentIdKey: "parentId",
        node: {
          image: {
            key: "avatar",
            position: "left",
            height: 50,
            width: 50,
            cornerRadius: 25,
          },
          title: { key: "name" },
          subtitle: { key: "job" },
          labels: [{ key: "location" }],
          clickToExpand: true,
        },
      },
    ],
    listeners: {
      collapsedChange: ({ collapsed, expanded }) => {
        console.log(
          "collapsed:",
          collapsed.map((item) => item.itemId),
          "expanded:",
          expanded.map((item) => item.itemId),
        );
      },
    },
  });

  const setClickToExpand = (clickToExpand: boolean) => {
    const nextOptions = clone(options);

    (
      nextOptions.series![0] as AgOrganizationSeriesOptions
    ).node!.clickToExpand = clickToExpand;

    setOptions(nextOptions);
  };

  const expandAll = () => {
    const { version } = chartRef.current!.getState();
    chartRef.current!.setState({ version, collapsed: [] });
  };

  const collapseAll = () => {
    const { version } = chartRef.current!.getState();
    chartRef.current!.setState({
      version,
      collapsed: [
        "Joseph Howe",
        "Gary Garcia",
        "Mr. Jeffrey Brown",
        "Nicole Jones",
        "Justin Contreras",
        "Lawrence Martinez",
        "Eric Jensen",
      ],
    });
  };

  const toggleCTO = () => {
    const { version, collapsed: prev } = chartRef.current!.getState();
    const collapsed = prev?.filter((id) => id !== "Joseph Howe");
    if (!prev?.includes("Joseph Howe")) {
      collapsed?.push("Joseph Howe");
    }
    chartRef.current!.setState({ version, collapsed });
  };

  return (
    <Fragment>
      <div className="example-controls">
        <div className="controls-row">
          <button onClick={expandAll}>Expand All</button>
          <button onClick={collapseAll}>Collapse All</button>
          <button onClick={toggleCTO}>Toggle CTO</button>
          <input
            type="checkbox"
            id="clickToExpand"
            checked=""
            className="gap-left"
            onChange={(event) => setClickToExpand(event.target.checked)}
          />
          <label htmlFor="clickToExpand">Click node to expand</label>
        </div>
      </div>
      <AgCharts ref={chartRef} options={options} />
    </Fragment>
  );
};

const root = createRoot(document.getElementById("root")!);
root.render(<ChartExample />);
```

[Live example: Collapse and Expand](https://www.ag-grid.com/charts/reactFunctionalTs/org-chart/examples/org-chart-expand-collapse)

```js
{
    initialState: {
        collapsed: ['Lawrence Martinez', 'Eric Jensen'],
    },
    series: [
        {
            type: 'organization',
            node: {
                clickToExpand: true,
            },
        },
    ],
    listeners: {
        collapsedChange: ({ collapsed, expanded }) => {
            console.log(
                'collapsed:',
                collapsed.map((item) => item.itemId),
                'expanded:',
                expanded.map((item) => item.itemId)
            );
        },
    },
}
```

In this example:

- The subtrees under 'Lawrence Martinez' and 'Eric Jensen' will start in a collapsed state. This uses the `initialState.collapsed` property to specify which subtrees start collapsed.
- Use `node.clickToExpand` to toggle collapsing/expanding by clicking anywhere on the card instead of the expander only.
  - Defaults to `false` when node has a [click listener](https://www.ag-grid.com/charts/react/events/#seriesnodeclick-and-seriesnodedoubleclick) or has [Data Selection](https://www.ag-grid.com/charts/react/selection/) enabled, otherwise defaults to `true`.
- The `collapsed` array contains the identifiers of all currently collapsed nodes.
  - See the [State API](https://www.ag-grid.com/charts/react/api-state/#collapsed) page for more details.
- Changes in the collapsed items can be listened to with the `collapsedChange` event, logged to the console here showing the `itemId` of each newly collapsed and expanded node.
  - See the [Events API](https://www.ag-grid.com/charts/react/events/#collapsedchange) page for more details.

### Zoom

Organisation Charts have zoom and pan enabled by default. Scroll to zoom in and out, and click and drag the background to pan across the hierarchy.

See the [Zoom](https://www.ag-grid.com/charts/react/zoom/) page for the full range of zoom options.

## Accessibility

Organisation Charts support full keyboard navigation and screen readers.

The following keys are available:

- `←``→``↑``↓` moves focus between nodes.
- `Alt`+`↓` and `Alt`+`↑` expand and collapse the focused node.
- `↵ Enter` or `␣ Space` trigger any click listeners, and also toggle the focused node when `clickToExpand` is enabled.

See [Accessibility](https://www.ag-grid.com/charts/react/accessibility/) for more details.

## API Reference

#### Organization Series

| Property | Type | Default | Description |
| --- | --- | --- | --- |
| type (required) | 'organization' |  | Configuration for the Organization Series. |
| expander | AgOrganizationSeriesOptionsExpander |  |  |
| expander.itemStyler | Styler |  |  |
| expander.text | AgOrganizationSeriesOptionsExpanderText |  |  |
| expander.text.formatter | RichFormatter |  |  |
| expander.text.color | CssColor \| AgColorRef \| AgColorRefMixOnto \| AgColorRefMixOntoColor |  | The colour to use for the expander text. A colour string, or a theme-colour reference object. |
| expander.text.showAllChildren | boolean | true | Whether to include the count of all descendants in the expander text. |
| expander.text.showDirectChildren | boolean | false | Whether to include the count of direct children in the expander text. |
| expander.text.textAlign | 'left' \| 'center' \| 'right' |  |  |
| expander.text.fontSize | FontSize |  | The size of the font in pixels for text elements. |
| expander.text.fontFamily | FontFamily |  | The font family for text elements. |
| expander.text.fontStyle | FontStyle |  | The style to use for text elements. |
| expander.text.fontWeight | FontWeight |  | The font weight to use for text elements. |
| expander.cornerRadius | PixelSize |  |  |
| expander.padding | PixelSize \| PaddingOptions |  | Padding around the expander content. A number applies uniform padding; an object sets each side. |
| expander.enabled | boolean |  | Whether the associated elements and properties should be used in the chart. |
| expander.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. |
| expander.fillOpacity | Opacity |  | The opacity of the fill colour. |
| expander.lineDash | PixelSize[] |  | An array specifying the length in pixels of alternating dashes and gaps. |
| expander.lineDashOffset | PixelSize |  | The initial offset of the dashed line in pixels. |
| expander.stroke | CssColor \| AgColorRef \| AgColorRefMixOnto \| AgColorRefMixOntoColor |  | The colour for the stroke. |
| expander.strokeWidth | PixelSize |  | The width of the stroke in pixels. |
| expander.strokeOpacity | Opacity |  | The opacity of the stroke colour. |
| node | AgOrganizationSeriesOptionsNode |  |  |
| node.itemStyler | Styler |  |  |
| node.labels | AgOrganizationSeriesOptionsNodeLabel[] |  |  |
| node.labels.key (required) | string |  |  |
| node.labels.formatter | RichFormatter |  |  |
| node.labels.itemStyler | Styler |  |  |
| node.labels.color | CssColor \| AgColorRef \| AgColorRefMixOnto \| AgColorRefMixOntoColor |  | The colour to use for the node text. A colour string, or a theme-colour reference object. |
| node.labels.overflowStrategy | 'ellipsis' \| 'hide' |  |  |
| node.labels.spacing | number |  |  |
| node.labels.textAlign | 'left' \| 'center' \| 'right' |  |  |
| node.labels.wrapping | 'never' \| 'always' \| 'hyphenate' \| 'on-space' |  |  |
| node.labels.cornerRadius | PixelSize |  | Corner radius of the backing box. Has no effect unless `fill` or `stroke` is set. |
| node.labels.padding | PixelSize \| PaddingOptions |  | Padding between the text and the backing box edge. Has no effect unless `fill` or `stroke` is set. A number applies uniform padding; an object sets each side. |
| node.labels.fontSize | FontSize |  | The size of the font in pixels for text elements. |
| node.labels.fontFamily | FontFamily |  | The font family for text elements. |
| node.labels.fontStyle | FontStyle |  | The style to use for text elements. |
| node.labels.fontWeight | FontWeight |  | The font weight to use for text elements. |
| node.labels.fill | CssColor |  | The colour for filling shapes. |
| node.labels.fillOpacity | Opacity |  | The opacity of the fill colour. |
| node.labels.stroke | CssColor \| AgColorRef \| AgColorRefMixOnto \| AgColorRefMixOntoColor |  | The colour for the stroke. |
| node.labels.strokeWidth | PixelSize |  | The width of the stroke in pixels. |
| node.labels.strokeOpacity | Opacity |  | The opacity of the stroke colour. |
| node.labels.enabled | boolean |  | Whether the associated elements and properties should be used in the chart. |
| node.subtitle | AgOrganizationSeriesOptionsNodeSubtitle |  |  |
| node.subtitle.key | string |  | Default: 'subtitle' |
| node.subtitle.formatter | RichFormatter |  |  |
| node.subtitle.itemStyler | Styler |  |  |
| node.subtitle.color | CssColor \| AgColorRef \| AgColorRefMixOnto \| AgColorRefMixOntoColor |  | The colour to use for the node text. A colour string, or a theme-colour reference object. |
| node.subtitle.overflowStrategy | 'ellipsis' \| 'hide' |  |  |
| node.subtitle.spacing | number |  |  |
| node.subtitle.textAlign | 'left' \| 'center' \| 'right' |  |  |
| node.subtitle.wrapping | 'never' \| 'always' \| 'hyphenate' \| 'on-space' |  |  |
| node.subtitle.cornerRadius | PixelSize |  | Corner radius of the backing box. Has no effect unless `fill` or `stroke` is set. |
| node.subtitle.padding | PixelSize \| PaddingOptions |  | Padding between the text and the backing box edge. Has no effect unless `fill` or `stroke` is set. A number applies uniform padding; an object sets each side. |
| node.subtitle.fontSize | FontSize |  | The size of the font in pixels for text elements. |
| node.subtitle.fontFamily | FontFamily |  | The font family for text elements. |
| node.subtitle.fontStyle | FontStyle |  | The style to use for text elements. |
| node.subtitle.fontWeight | FontWeight |  | The font weight to use for text elements. |
| node.subtitle.fill | CssColor |  | The colour for filling shapes. |
| node.subtitle.fillOpacity | Opacity |  | The opacity of the fill colour. |
| node.subtitle.stroke | CssColor \| AgColorRef \| AgColorRefMixOnto \| AgColorRefMixOntoColor |  | The colour for the stroke. |
| node.subtitle.strokeWidth | PixelSize |  | The width of the stroke in pixels. |
| node.subtitle.strokeOpacity | Opacity |  | The opacity of the stroke colour. |
| node.subtitle.enabled | boolean |  | Whether the associated elements and properties should be used in the chart. |
| node.title | AgOrganizationSeriesOptionsNodeTitle |  |  |
| node.title.key | string |  | Default: 'title' |
| node.title.formatter | RichFormatter |  |  |
| node.title.itemStyler | Styler |  |  |
| node.title.color | CssColor \| AgColorRef \| AgColorRefMixOnto \| AgColorRefMixOntoColor |  | The colour to use for the node text. A colour string, or a theme-colour reference object. |
| node.title.overflowStrategy | 'ellipsis' \| 'hide' |  |  |
| node.title.spacing | number |  |  |
| node.title.textAlign | 'left' \| 'center' \| 'right' |  |  |
| node.title.wrapping | 'never' \| 'always' \| 'hyphenate' \| 'on-space' |  |  |
| node.title.cornerRadius | PixelSize |  | Corner radius of the backing box. Has no effect unless `fill` or `stroke` is set. |
| node.title.padding | PixelSize \| PaddingOptions |  | Padding between the text and the backing box edge. Has no effect unless `fill` or `stroke` is set. A number applies uniform padding; an object sets each side. |
| node.title.fontSize | FontSize |  | The size of the font in pixels for text elements. |
| node.title.fontFamily | FontFamily |  | The font family for text elements. |
| node.title.fontStyle | FontStyle |  | The style to use for text elements. |
| node.title.fontWeight | FontWeight |  | The font weight to use for text elements. |
| node.title.fill | CssColor |  | The colour for filling shapes. |
| node.title.fillOpacity | Opacity |  | The opacity of the fill colour. |
| node.title.stroke | CssColor \| AgColorRef \| AgColorRefMixOnto \| AgColorRefMixOntoColor |  | The colour for the stroke. |
| node.title.strokeWidth | PixelSize |  | The width of the stroke in pixels. |
| node.title.strokeOpacity | Opacity |  | The opacity of the stroke colour. |
| node.title.enabled | boolean |  | Whether the associated elements and properties should be used in the chart. |
| node.clickToExpand | boolean |  | When set to true, clicking the card will expand/collapse the node. Defaults to `false` when node-clicks are used for something else (e.g. data selection), otherwise defaults to `true`. |
| node.cornerRadius | PixelSize |  |  |
| node.height | PixelSize |  |  |
| node.image | AgOrganizationSeriesOptionsNodeImage |  |  |
| node.image.cornerRadius | PixelSize |  |  |
| node.image.key | string | image |  |
| node.image.height | number |  |  |
| node.image.width | number |  |  |
| node.image.position | 'bottom' \| 'left' \| 'right' \| 'top' |  |  |
| node.image.spacing | number |  |  |
| node.image.enabled | boolean |  | Whether the associated elements and properties should be used in the chart. |
| node.maxHeight | PixelSize |  |  |
| node.maxWidth | PixelSize |  | Maximum width of the card in pixels. When set, long text content wraps onto multiple lines (subject to each text tier's `wrapping` and `overflowStrategy`) instead of pushing the card wider, so cards do not overlap on tightly packed graphs. |
| node.padding | PixelSize \| PaddingOptions |  | Padding around the node content. A number applies uniform padding; an object sets each side. |
| node.width | PixelSize |  |  |
| node.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. |
| node.fillOpacity | Opacity |  | The opacity of the fill colour. |
| node.lineDash | PixelSize[] |  | An array specifying the length in pixels of alternating dashes and gaps. |
| node.lineDashOffset | PixelSize |  | The initial offset of the dashed line in pixels. |
| node.stroke | CssColor \| AgColorRef \| AgColorRefMixOnto \| AgColorRefMixOntoColor |  | The colour for the stroke. |
| node.strokeWidth | PixelSize |  | The width of the stroke in pixels. |
| node.strokeOpacity | Opacity |  | The opacity of the stroke colour. |
| 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. |
| idKey | string | 'id' | The key of the data field containing the unique node identifier. |
| parentIdKey | string | 'parentId' | The key of the data field containing the parent node identifier. The root node should have a `null` value for this field. |
| direction | 'horizontal' \| 'vertical' |  | The direction child nodes are arranged relative to their parent. Sibling nodes are arranged along the perpendicular axis.  Default: 'vertical' |
| reverse | boolean |  | Whether the direction should be reversed.  Default: false |
| link | AgOrganizationSeriesOptionsLink |  |  |
| link.itemStyler | Styler |  |  |
| link.interpolation | AgOrganizationSeriesOptionsLinkInterpolation |  |  |
| link.lineDash | PixelSize[] |  | An array specifying the length in pixels of alternating dashes and gaps. |
| link.lineDashOffset | PixelSize |  | The initial offset of the dashed line in pixels. |
| link.stroke | CssColor \| AgColorRef \| AgColorRefMixOnto \| AgColorRefMixOntoColor |  | The colour for the stroke. |
| link.strokeWidth | PixelSize |  | The width of the stroke in pixels. |
| link.strokeOpacity | Opacity |  | The opacity of the stroke colour. |
| 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. |
| selection | AgSelectionOptions |  | Configuration for data selection. |
| selection.enabled | boolean |  | Set to `true` to enable the data-selection on this series. |
| selection.containment | 'any' \| 'all' | chart.selection.containment | Override the drag-to-select containment rule for this series. |
| selection.selectedItem | AgSelectionStyleOptions |  | Styling options for selected items. |
| selection.selectedItem.opacity | Opacity |  | The opacity of the whole series (line, fill, labels and markers, if any) |
| selection.selectedItem.stroke | CssColor \| AgColorRef \| AgColorRefMixOnto \| AgColorRefMixOntoColor |  | The colour for the stroke. |
| selection.selectedItem.strokeWidth | PixelSize |  | The width of the stroke in pixels. |
| selection.selectedItem.strokeOpacity | Opacity |  | The opacity of the stroke colour. |
| selection.selectedItem.lineDash | PixelSize[] |  | An array specifying the length in pixels of alternating dashes and gaps. |
| selection.selectedItem.lineDashOffset | PixelSize |  | The initial offset of the dashed line in pixels. |
| selection.selectedItem.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. |
| selection.selectedItem.fillOpacity | Opacity |  | The opacity of the fill colour. |
| selection.unselectedItem | AgSelectionStyleOptions |  | Styling options for unselected items. |
| selection.unselectedItem.opacity | Opacity |  | The opacity of the whole series (line, fill, labels and markers, if any) |
| selection.unselectedItem.stroke | CssColor \| AgColorRef \| AgColorRefMixOnto \| AgColorRefMixOntoColor |  | The colour for the stroke. |
| selection.unselectedItem.strokeWidth | PixelSize |  | The width of the stroke in pixels. |
| selection.unselectedItem.strokeOpacity | Opacity |  | The opacity of the stroke colour. |
| selection.unselectedItem.lineDash | PixelSize[] |  | An array specifying the length in pixels of alternating dashes and gaps. |
| selection.unselectedItem.lineDashOffset | PixelSize |  | The initial offset of the dashed line in pixels. |
| selection.unselectedItem.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. |
| selection.unselectedItem.fillOpacity | Opacity |  | The opacity of the fill colour. |
| selection.unselectedSeries | AgSelectionStyleOptions |  | Styling options for series with no selections when there is at least one other selected series. |
| selection.unselectedSeries.opacity | Opacity |  | The opacity of the whole series (line, fill, labels and markers, if any) |
| selection.unselectedSeries.stroke | CssColor \| AgColorRef \| AgColorRefMixOnto \| AgColorRefMixOntoColor |  | The colour for the stroke. |
| selection.unselectedSeries.strokeWidth | PixelSize |  | The width of the stroke in pixels. |
| selection.unselectedSeries.strokeOpacity | Opacity |  | The opacity of the stroke colour. |
| selection.unselectedSeries.lineDash | PixelSize[] |  | An array specifying the length in pixels of alternating dashes and gaps. |
| selection.unselectedSeries.lineDashOffset | PixelSize |  | The initial offset of the dashed line in pixels. |
| selection.unselectedSeries.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. |
| selection.unselectedSeries.fillOpacity | Opacity |  | The opacity of the fill colour. |
| depthSpacing | PixelSize | 52 | Gap in pixels between parent and child nodes. |
| innerSpacing | PixelSize | 20 | Gap in pixels between sibling nodes (nodes that share the same parent). |
| outerSpacing | PixelSize | 40 | Gap in pixels between adjacent nodes whose immediate parents differ (cousins). The layout uses `outerSpacing` for these cross-subtree gaps and `innerSpacing` for gaps between nodes that share the same parent. |