Organization chart#

An organization chart (org chart) is a diagram that portrays the structure of an organization and the relationships and relative ranks of its parts and positions.

Options structure#

In Highcharts, the organization chart resembles the sankey chart in the way it is built around nodes and links. The nodes of an org chart are the positions or persons, while the links are the lines showing the relations between them. The data structure of the options defines the links.

In the nodes array of the series, each node is identified by an id refering to the id in the link. Additional properties like title, description and image may be set in the individual node options.

Data labels#

Each person or position is represented by a card or label. This card is actually the node's data label, and is subject to the dataLabel options of the series. In org charts, the dataLabel's useHTML option is set to true by default, because we want to leverage layout capabilities that are more complicated to achieve using SVG alone.

The actual HTML rendered inside the chart is determined by dataLabels.nodeFormat or dataLabels.nodeFormatter. The default nodeFormatter output depends on whether there is an image setting on the node, and produces a layout based on flex boxes in order to get positioning and alignment right. See the example of overriding the nodeFormatter.

Levels#

In an org chart typically, we may want to define specific styling for all nodes on a specific level, for example having all C-level positions in the same color. For this, we can use the [levels option and set the properties there. An example can be seen in the main demo above.

API options#

For the full set of available options, see the API.