JavaScript ChartsOrg Chart

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

The Organisation Series is an enterprise feature and is created using the organization series type.

Setup Copy Link

Each data row represents a node. The idKey and parentIdKey properties define the parent-child relationships. The root node has a null parent, and sibling order follows the data array order.

{
    series: [
        {
            type: 'organization',
            idKey: 'id',
            parentIdKey: 'parentId',
            node: {
                title: { key: 'name' },
                subtitle: { key: 'jobTitle' },
                image: { key: 'photoUrl' },
                labels: [{ key: 'location' }],
            },
        },
    ],
}

Node Presentation Copy Link

Each card can display a title, subtitle, additional labels, and an image. The title and subtitle support fontSize, fontWeight, and color. Each entry in the labels array maps a data field via key and stacks vertically below the subtitle.

Image Copy Link

The image property accepts a URL string and supports shape ('circle' or 'square'), width, height, and position within the card.

{
    series: [
        {
            type: 'organization',
            node: {
                image: {
                    key: 'photoUrl',
                    shape: 'circle',
                    width: 48,
                    height: 48,
                    position: 'left',
                },
            },
        },
    ],
}

Connectors Copy Link

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

The cornerRadius property rounds the corners of the step routing. Use link.itemStyler to style connectors per-relationship — the callback receives fromDatum (parent) and toDatum (child).

{
    series: [
        {
            type: 'organization',
            link: {
                stroke: '#999',
                strokeWidth: 2,
                interpolation: { type: 'step', cornerRadius: 8 },
                itemStyler: ({ fromDatum }) => {
                    if (fromDatum.department === 'Engineering') {
                        return { stroke: '#43A047' };
                    }
                },
            },
        },
    ],
}

Collapse and Expand Copy Link

Nodes with children can be collapsed and expanded by clicking. Use initialState.collapsed to specify which node subtrees start collapsed.

{
    initialState: {
        collapsed: ['finance', 'hr'],
    },
    series: [{ type: 'organization' }],
}

The chart state can also be read and updated programmatically. setState() performs a full replacement — to toggle a single node, read the current state, modify the array, then set it back.

const state = chart.getState();
chart.setState({ collapsed: [...state.collapsed, 'marketing'] });

When a node is set as the active item via initialState.active, all its collapsed ancestors are automatically expanded and the viewport pans to centre on it. This enables deep-linking to a specific person in a large chart.

Tooltips Copy Link

Tooltips are disabled by default. When enabled, they display all label fields for the hovered node. A tooltip.renderer callback can be used for custom formatting.

{
    series: [
        {
            type: 'organization',
            tooltip: { enabled: true },
        },
    ],
}

Customisation Copy Link

Node Styling Copy Link

The node.itemStyler callback provides per-node visual customisation based on data and tree state. It receives datum, depth, and isCollapsed, and can return fill, stroke, strokeWidth, opacity, cornerRadius, and lineDash.

{
    series: [
        {
            type: 'organization',
            node: {
                itemStyler: ({ datum, depth }) => {
                    if (depth === 0) return { fill: '#1565C0', stroke: '#0D47A1' };
                    if (datum.department === 'Engineering') return { fill: '#E8F5E9', stroke: '#43A047' };
                },
            },
        },
    ],
}

Label Styling Copy Link

Each entry in the labels array supports an itemStyler callback for per-node text customisation.

{
    series: [
        {
            type: 'organization',
            node: {
                labels: [
                    {
                        key: 'department',
                        itemStyler: ({ datum }) => {
                            if (datum.department === 'Engineering') {
                                return { color: '#2E7D32', fontWeight: 'bold' };
                            }
                        },
                    },
                ],
            },
        },
    ],
}

Navigation Copy Link

Click and drag on the chart background to pan across the hierarchy. The viewport centres on the root node on first render and adjusts to keep a node visible after expanding or collapsing.

Organisation Charts support full keyboard navigation:

Screen readers announce the node content and sibling position (e.g. "3 of 5").

API Reference Copy Link