Organization chart data is arranged in a hierarchy with a root node at the top, feeding parent nodes, which are set first within the child nodes. Automatic layouts ensure your org chart looks great without collisions or overlaps. In addition, animation and dynamic direction orientations are supported through the toolbar with integrated events for left, right, down and up.
This example shows a family tree and you can see how the parent and child nodes and drawing linking connector lines with the automatic layout system.
Tooltips are also supported which enables you to create a visually clean org chart while also adding additional information, such as contact information or other metrics on the individuals in the organizational chart. Micro charts and sparkline charts can also be seamlessly integrated into tooltips for performance visualizations. This sub charts are also rendered natively and included with all licenses of the the JSCharting JS library.
Org charts can be combined with linear gauges, bar charts and other chart widgets to create interactive animated comparisons. You can make Key Performance Indicators (KPI) organizational comparisons between employees by clicking organizational nodes within the org tree, while bars below show quality, initiative and cooperative scores. JSCharting animates transitions of both values and text seamlessly—try it for yourself by clicking two names in the org hierarchy above.
JSCharting org charts have been enhanced with organizational chart connector line styling including corner radius rounding. Now you can combine circular employee pictures with smoothly curved connectors creating a minimal and modern org chart in minutes. This example also demonstrates a multiple parent organizational chart placing the CEO in the middle.