--- title: "Org Chart" enterprise: true framework: javascript 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 ```ts import { AgChartOptions, AgCharts, ContextMenuModule, ModuleRegistry, OrganizationSeriesModule, } from "ag-charts-enterprise"; import { getData } from "./data"; ModuleRegistry.registerModules([OrganizationSeriesModule, ContextMenuModule]); const options: 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", }, ], }, }, ], }; options.container = document.getElementById("myChart"); const chart = AgCharts.create(options); ``` [Live example: Simple Organisation Chart](https://www.ag-grid.com/charts/typescript/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 ```ts import { AgChartOptions, AgCharts, ContextMenuModule, ModuleRegistry, OrganizationSeriesModule, } from "ag-charts-enterprise"; import { getData } from "./data"; ModuleRegistry.registerModules([OrganizationSeriesModule, ContextMenuModule]); const options: 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", }; }, }, ], }, }, ], }; options.container = document.getElementById("myChart"); const chart = AgCharts.create(options); ``` [Live example: Text Customisation](https://www.ag-grid.com/charts/typescript/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 ```ts import { AgChartOptions, AgCharts, AgOrganizationSeriesOptions, AgOrganizationSeriesOptionsNodeImagePosition, AgStandaloneChartOptions, ContextMenuModule, ModuleRegistry, OrganizationSeriesModule, } from "ag-charts-enterprise"; import { getData } from "./data"; ModuleRegistry.registerModules([OrganizationSeriesModule, ContextMenuModule]); const options: 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" }], }, }, ], }; options.container = document.getElementById("myChart"); const chart = AgCharts.create(options); function changePosition( position: AgOrganizationSeriesOptionsNodeImagePosition, ) { (options.series![0] as AgOrganizationSeriesOptions).node!.image!.position = position; chart.update(options); } function changeCornerRadius(event: any) { const value = Number(event.target.value); document.getElementById("cornerRadiusValue")!.innerHTML = String(value); ( options.series![0] as AgOrganizationSeriesOptions ).node!.image!.cornerRadius = value; chart.update(options); } if (typeof window !== "undefined") { // Attach external event handlers to window so they can be called from index.html (window).changePosition = changePosition; (window).changeCornerRadius = changeCornerRadius; } ``` [Live example: Image Position](https://www.ag-grid.com/charts/typescript/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 ```ts import { AgCharts, AgOrganizationSeriesOptions, AgStandaloneChartOptions, ContextMenuModule, ModuleRegistry, OrganizationSeriesModule, } from "ag-charts-enterprise"; import { getData } from "./data"; ModuleRegistry.registerModules([OrganizationSeriesModule, ContextMenuModule]); const options: 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", }, ], }, }, ], }; options.container = document.getElementById("myChart"); const chart = AgCharts.create(options); function changeDirection(direction: "horizontal" | "vertical") { (options.series![0] as AgOrganizationSeriesOptions).direction = direction; chart.update(options); } function toggleReverse() { (options.series![0] as AgOrganizationSeriesOptions).reverse = !( options.series![0] as AgOrganizationSeriesOptions ).reverse; chart.update(options); } if (typeof window !== "undefined") { // Attach external event handlers to window so they can be called from index.html (window).changeDirection = changeDirection; (window).toggleReverse = toggleReverse; } ``` [Live example: Direction](https://www.ag-grid.com/charts/typescript/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 ```ts import { AgCharts, AgOrganizationSeriesOptions, AgStandaloneChartOptions, ModuleRegistry, OrganizationSeriesModule, } from "ag-charts-enterprise"; import { getData } from "./data"; ModuleRegistry.registerModules([OrganizationSeriesModule]); const options: 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, }, }, }, ], }; options.container = document.getElementById("myChart"); const chart = AgCharts.create(options); function setShowAllChildren(showAllChildren: boolean) { ( options.series![0] as AgOrganizationSeriesOptions ).expander!.text!.showAllChildren = showAllChildren; chart.update(options); } function setShowDirectChildren(showDirectChildren: boolean) { ( options.series![0] as AgOrganizationSeriesOptions ).expander!.text!.showDirectChildren = showDirectChildren; chart.update(options); } if (typeof window !== "undefined") { // Attach external event handlers to window so they can be called from index.html (window).setShowAllChildren = setShowAllChildren; (window).setShowDirectChildren = setShowDirectChildren; } ``` [Live example: Expander Child Counts](https://www.ag-grid.com/charts/typescript/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 ```ts import { AgChartOptions, AgCharts, ContextMenuModule, ModuleRegistry, OrganizationSeriesModule, } from "ag-charts-enterprise"; import { getData } from "./data"; ModuleRegistry.registerModules([OrganizationSeriesModule, ContextMenuModule]); const options: 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" }], }, }, ], }; options.container = document.getElementById("myChart"); const chart = AgCharts.create(options); ``` [Live example: Node Styling](https://www.ag-grid.com/charts/typescript/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 ```ts import { AgCharts, AgOrganizationSeriesOptions, AgStandaloneChartOptions, ContextMenuModule, ModuleRegistry, OrganizationSeriesModule, } from "ag-charts-enterprise"; import { getData } from "./data"; ModuleRegistry.registerModules([OrganizationSeriesModule, ContextMenuModule]); const options: 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" }], }, }, ], }; options.container = document.getElementById("myChart"); const chart = AgCharts.create(options); function changeCornerRadius(event: any) { const value = Number(event.target.value); document.getElementById("cornerRadiusValue")!.innerHTML = String(value); (options.series![0] as AgOrganizationSeriesOptions).link!.interpolation = { type: "step", cornerRadius: value, }; chart.update(options); } if (typeof window !== "undefined") { // Attach external event handlers to window so they can be called from index.html (window).changeCornerRadius = changeCornerRadius; } ``` [Live example: Connector Styling](https://www.ag-grid.com/charts/typescript/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 ```ts import { AgChartOptions, AgCharts, ContextMenuModule, ModuleRegistry, OrganizationSeriesModule, } from "ag-charts-enterprise"; import { getData } from "./data"; ModuleRegistry.registerModules([OrganizationSeriesModule, ContextMenuModule]); const options: 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" }], }, }, ], }; options.container = document.getElementById("myChart"); const chart = AgCharts.create(options); ``` [Live example: Expander Styling](https://www.ag-grid.com/charts/typescript/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 ```ts import { AgCharts, AgOrganizationSeriesOptions, AgStandaloneChartOptions, ContextMenuModule, ModuleRegistry, OrganizationSeriesModule, } from "ag-charts-enterprise"; import { getData } from "./data"; ModuleRegistry.registerModules([OrganizationSeriesModule, ContextMenuModule]); const options: 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" }], }, }, ], }; options.container = document.getElementById("myChart"); const chart = AgCharts.create(options); function changeInnerSpacing(event: any) { const value = Number(event.target.value); document.getElementById("innerSpacingValue")!.innerHTML = String(value); (options.series![0] as AgOrganizationSeriesOptions).innerSpacing = value; chart.update(options); } function changeOuterSpacing(event: any) { const value = Number(event.target.value); document.getElementById("outerSpacingValue")!.innerHTML = String(value); (options.series![0] as AgOrganizationSeriesOptions).outerSpacing = value; chart.update(options); } function changeDepthSpacing(event: any) { const value = Number(event.target.value); document.getElementById("depthSpacing")!.innerHTML = String(value); (options.series![0] as AgOrganizationSeriesOptions).depthSpacing = value; chart.update(options); } if (typeof window !== "undefined") { // Attach external event handlers to window so they can be called from index.html (window).changeInnerSpacing = changeInnerSpacing; (window).changeOuterSpacing = changeOuterSpacing; (window).changeDepthSpacing = changeDepthSpacing; } ``` [Live example: Spacing](https://www.ag-grid.com/charts/typescript/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 ```ts import { AgCharts, AgOrganizationSeriesOptions, AgStandaloneChartOptions, ContextMenuModule, ModuleRegistry, OrganizationSeriesModule, } from "ag-charts-enterprise"; import { getData } from "./data"; ModuleRegistry.registerModules([OrganizationSeriesModule, ContextMenuModule]); const options: 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), ); }, }, }; options.container = document.getElementById("myChart"); const chart = AgCharts.create(options); function setClickToExpand(clickToExpand: boolean) { (options.series![0] as AgOrganizationSeriesOptions).node!.clickToExpand = clickToExpand; chart.update(options); } function expandAll() { const { version } = chart.getState(); chart.setState({ version, collapsed: [] }); } function collapseAll() { const { version } = chart.getState(); chart.setState({ version, collapsed: [ "Joseph Howe", "Gary Garcia", "Mr. Jeffrey Brown", "Nicole Jones", "Justin Contreras", "Lawrence Martinez", "Eric Jensen", ], }); } function toggleCTO() { const { version, collapsed: prev } = chart.getState(); const collapsed = prev?.filter((id) => id !== "Joseph Howe"); if (!prev?.includes("Joseph Howe")) { collapsed?.push("Joseph Howe"); } chart.setState({ version, collapsed }); } if (typeof window !== "undefined") { // Attach external event handlers to window so they can be called from index.html (window).setClickToExpand = setClickToExpand; (window).expandAll = expandAll; (window).collapseAll = collapseAll; (window).toggleCTO = toggleCTO; } ``` [Live example: Collapse and Expand](https://www.ag-grid.com/charts/typescript/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/javascript/events/#seriesnodeclick-and-seriesnodedoubleclick) or has [Data Selection](https://www.ag-grid.com/charts/javascript/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/javascript/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/javascript/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/javascript/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/javascript/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. |