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.
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.
nodes array of the series, each node is identified by an
id refering to the id in the link. Additional properties like
image may be set in the individual node options.
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.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.
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.
For the full set of available options, see the API.