AG Grid
Best JavaScript Grid in the World
AG Charts
Best JavaScript Charts in the World
AG Studio
Best JavaScript Dashboard in the World
Bryntum Gantt
Speed-tuned Gantt chart for project planning
Bryntum Scheduler
Resource scheduling timeline component
PROPRO
Bryntum Scheduler Pro
Scheduler with auto-scheduling and constraints
Bryntum Calendar
Flexible JavaScript event calendar
Bryntum Task Board
Kanban-style task board component
Search⌘ KCtrl K
What's New
Getting started
Quick StartKey FeaturesCommunity vs. Enterprise
AI Features
Skills
Core features
Specialised Charts
Org ChartQuadrant Chart
Series
BarLineAreaScatterBubblePieDonutCombinationBox PlotCandlestickOHLCHeatmapHistogramNightingaleRadar AreaRadar LineRadial BarRadial ColumnRange AreaRange BarWaterfallSunburstTreemapSankeyChordFunnelCone FunnelPyramid
Gauges
Radial GaugeLinear Gauge

Vue ChartsOrg Chart

Version 14.2.0
Enterprise

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

Simple Organisation Chart Copy Link

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.

{
    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 Copy Link

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

 
{
    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 for the available styling options for each text element.

Image Copy Link

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

 
{
    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 Copy Link 

{
    series: [
        {
            type: 'organization',
            direction: 'horizontal',
            reverse: false,
        },
    ],
}

Stacked Layout Copy Link

The 'stacked' layout lists a node's children in a single indented column beneath their parent, starting at a given depth. This stops wide hierarchies growing wider at their lower levels.

 
{
    series: [
        {
            type: 'organization',
            layout: {
                type: 'stacked',
                stackFromDepth: 4,
                linkIndentation: 26,
                nodeIndentation: 26,
            },
        },
    ],
}

In this example:

  • stackFromDepth is the first depth to be stacked, with levels above it keeping the tree layout. The root node, 'Ashley Rivers', is at depth 1, so in this case stacking starts at the fourth level, with the reports under 'Nathan Jones' listed in a column.
  • linkIndentation indents the connector lines from the parent's leading edge. Every connector from a parent shares this line, so it reads as a single trunk running down the stack.
  • nodeIndentation indents each child card from the connector lines.
  • Stacking follows direction, with children listed downwards and indented right for a vertical direction, or listed right and indented downwards for a horizontal one.

Expander Copy Link

The expander is displayed on nodes with children and is used to collapse and expand subtrees.

 
{
    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 for more details.

Customisation Copy Link

Node Styling Copy Link 

{
    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 for the full list of available styling options.

Connectors Copy Link

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

{
    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 Copy Link

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

 
{
    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 Copy Link

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.

 
{
    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 'Gabriella Garcia' and 'Lawrence Martinez'.

Interactivity Copy Link

Collapse and Expand Copy Link

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

 
{
    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.
  • The collapsed array contains the identifiers of all currently collapsed nodes.
  • 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.

Zoom Copy Link

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 page for the full range of zoom options.

Accessibility Copy Link

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 for more details.

Org Chart Examples Copy Link

See more Org Chart examples in the AG Charts Gallery.

Org Chart With Images Example
Org Chart With Categories Example
Org Chart With Many Nodes Example

API Reference Copy Link

Properties available on the AgOrganizationSeriesOptions interface.

type required 'organization'
Configuration for the Organization Series.
expander AgOrganizationSeriesOptionsExpander
node AgOrganizationSeriesOptionsNode
id string default: auto-generated value
Primary identifier for the series. This is provided as `seriesId` in user callbacks to differentiate multiple series. Auto-generated ids are subject to future change without warning, if your callbacks need to vary behaviour by series please supply your own unique `id` value.
context ContextDefault
Context object to use in callbacks.
data DatumDefault[]
The data to use when rendering the series. If this is not supplied, data must be set on the chart instead.
visible boolean
Whether to display the series.
cursor string
The cursor to use for hovered markers. This config is identical to the CSS `cursor` property.
highlight AgHighlightOptions
Configuration for highlighting when a series or legend item is hovered over.
nodeClickRange InteractionRange
Range from a node that a click triggers the listener.
showInLegend boolean
Whether to include the series in the legend.
listeners AgSeriesListeners
A map of event names to event listeners.
idKey string default: 'id'
The key of the data field containing the unique node identifier.
parentIdKey string default: 'parentId'
The key of the data field containing the parent node identifier. The root node should have a `null` value for this field.
direction AgOrganizationSeriesDirection
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
layout AgOrganizationSeriesLayout
Configuration for the series layout.
link AgOrganizationSeriesOptionsLink
tooltip AgSeriesTooltip
Series-specific tooltip configuration.
selection AgSelectionOptions
Configuration for data selection.
depthSpacing PixelSize default: 52
Gap in pixels between parent and child nodes.
innerSpacing PixelSize default: 20
Gap in pixels between sibling nodes (nodes that share the same parent).
outerSpacing PixelSize default: 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.