OrganizationChart

New

Make reporting lines, teams and hierarchical relationships easy to explore.

Custom nodesMultiple selectionKeyboard navigation

Meet the team

Choose a person or department. Use the round controls to collapse a branch, and scroll horizontally to explore a wider chart.

Selection

Alex MorganChief Executive Officer
- Jamie ChenHead of Product
  - DesignTEAM
  - ResearchTEAM
- Sam RiveraHead of Engineering
  - PlatformTEAM
  - ApplicationsTEAM

Select a person or a team to inspect the organization.

Selected keys: none

Simple hierarchy

Labels work without templates. Set collapsible to false to keep all branches visible.

Avero Studio
- Delivery
  - Web
  - Mobile
- Operations

Node templates

Import AvOrganizationChart and AvOrganizationChartNodeTemplate from avero-ui. Match a template's type to node.type; omitted type is the default fallback. Each template receives the node, level, expanded and selected.

HTML

<av-organization-chart inputId="team" label="Our team" [value]="nodes"
  selectionMode="multiple" [(selection)]="selectedKeys" [(expandedKeys)]="expandedKeys"
  (onNodeSelect)="onSelect($event.node)">
  <ng-template [avOrganizationChartNode]="nodes" type="person" let-node>
    <strong>{{ node.label }}</strong>
    <span>{{ node.data?.title }}</span>
  </ng-template>
  <ng-template [avOrganizationChartNode]="nodes" let-node>
    {{ node.label }}
  </ng-template>
</av-organization-chart>

Usage and API

value accepts AvOrganizationChartNode<T>[]. Each node requires a globally unique key and label. Optional fields: data, children, type, expanded, leaf, disabled, selectable, styleClass and style. Existing AvTreeNode arrays also work. inputId must be unique on the page.

Selection. selectionMode defaults to none. In single mode, selection is a key or null; in multiple mode it is an array of keys. Click or press Enter/Space to toggle a node independently, without modifier keys. Reset selection when changing modes. selectable: false prevents selection; disabled also prevents expansion. Selecting a parent does not select its children.

Expansion. collapsible defaults to true. expandedKeys supports two-way binding: null follows node.expanded (true by default), while an array explicitly lists open branches. The first toggle materializes this list without mutating your data. Collapse keeps descendant expansion and selection. Set leaf: false for a branch awaiting children, then load them in onNodeExpand.

Events and state. onNodeSelect, onNodeUnselect, onNodeExpand and onNodeCollapse emit node and originalEvent. Programmatic input changes do not emit interaction events. loading and disabled block chart selection and expansion. Templates may contain independent actions; their clicks do not select the node. Manage those actions' disabled state in your template.

Keyboard. Tab focuses the chart. Up/Down follow visible nodes in tree order; Right expands or enters a branch; Left collapses or returns to the parent. Home/End jump to the first/last node. Enter/Space toggle selection. Nested lists expose tree roles, levels, positions and selection state.

Theme. Customize --av-organization-chart-accent, --av-organization-chart-background, --av-organization-chart-node-background, --av-organization-chart-color, --av-organization-chart-border, --av-organization-chart-line-color, --av-organization-chart-radius, --av-organization-chart-node-width, --av-organization-chart-node-height, --av-organization-chart-max-height and --av-organization-chart-selection-background. Per-node style can override these tokens; styleClass targets global application styles.