Organizational Charts
JavaScript Chart Types
Organizational Charts
JSCharting supports organizational charts with automatic layout, interactive rendering and real-time orientation animations. An organizational chart, or org chart, visually represents a company's hierarchical structure, showcasing its relationships and roles. JS Org charts are now available as part of the JSCharting Bundle or separately with the Org Chart Bundle Download or Purchase.
![](../../../images/thumbs/Javascript_OrgStyling1_Chart.png)
Organizational chart with HTML annotations and tooltips.
![](../../../images/thumbs/Javascript_OrgLevelSelect_Chart.png)
Select, deselect and highlight on hover different levels within an organizational chart.
![](../../../images/thumbs/Javascript_OrgPathHighlightOptions_Chart.png)
Highlight organizational hierarchy paths in different directions and style states.
![](../../../images/thumbs/Javascript_OrgPathHighlightSelect_Chart.png)
Select and highlight a path from a point up the tree in an organizational chart with custom styles, colors and images using point click, select and mute states.
![](../../../images/thumbs/Javascript_OrgPointSelectionModes_Chart.png)
Try different point selection modes with organizational chart hierarchy highlighting.
![](../../../images/thumbs/Javascript_OrgArrowLayout_Chart.png)
Org chart interactive orientation with padded connector line arrow layout.
![](../../../images/thumbs/Javascript_OrgCentralImage_Chart.png)
Multiple Parent organizational chart with circular pictures and curved connectors.
![](../../../images/thumbs/Javascript_OrgConnectorAdvStyling_Chart.png)
Specifies connector line and point styling by role with a minimal modern design.
![](../../../images/thumbs/Javascript_OrgConnectorDashedLine_Chart.png)
Organizational chart connector line dashed styling.
![](../../../images/thumbs/Javascript_OrgConnectorRadiusStyling_Chart.png)
Organizational chart connector line corner radius rounding customization.
![](../../../images/thumbs/Javascript_OrgDataHierarchy_Chart.png)
Organizational chart showing positional hierarchy with orientation customization.
![](../../../images/thumbs/Javascript_OrgFixedPointSizes_Chart.png)
Organizational chart layout with fixed point size boxes using sync height.
![](../../../images/thumbs/Javascript_OrgGroupConnectorStyling_Chart.png)
Styles organizational chart line connectors and point outlines by group.
![](../../../images/thumbs/Javascript_OrgGroupHighlight_Chart.png)
Customized organizational chart point coloring by role including point and legend highlight on hover.
![](../../../images/thumbs/Javascript_OrgIconGradient_Chart.png)
An organizational chart using point specific icons on circular gradient fills.
![](../../../images/thumbs/Javascript_OrgLabelOverflowEllipsis_Chart.png)
Use maxWidth and no wrapping to truncate the leaf labels on an organizational chart.
![](../../../images/thumbs/Javascript_OrgLeafPointDetails_Chart.png)
Organizational chart with leaf points used to show details about the parent node.
![](../../../images/thumbs/Javascript_OrgMatrixIcons_Chart.png)
Organizational chart with an integrated area chart sparkline showing sales per month and other visual customization.
![](../../../images/thumbs/Javascript_OrgMultiParentColorConnector_Chart.png)
Multiple parent organizational chart with per node colors and color synchronized connector lines with custom corner radius settings.
![](../../../images/thumbs/Javascript_OrgPictogram_Chart.png)
Organizational chart that dynamically generates a pictogram for each node.
![](../../../images/thumbs/Javascript_OrgPictogramIcons_Chart.png)
Organizational chart with dynamically generated a pictogram icons for each node.
![](../../../images/thumbs/Javascript_OrgPointCompare_Chart.png)
Allows selecting two employees from an organizational chart to compare key metrics with bar charts.
![](../../../images/thumbs/Javascript_OrgSimpleStyling_Chart.png)
Minimal styling organizational chart demonstrating right angled and straight connector types with rounded radius connector lines.
![](../../../images/thumbs/Javascript_OrgSparkline_Chart.png)
Organizational chart with an integrated area chart sparkline showing sales per month and other visual customization.
![](../../../images/thumbs/Javascript_OrgSyncWidthHeightUI_Chart.png)
Organizational chart annotation width and height synchronization options.
![](../../../images/thumbs/Javascript_OrgVerticalColumn_Chart.png)
Organizational chart with vertical leaf layout colored by groups.
![](../../../images/thumbs/Javascript_OrgVerticalColumnStyled_Chart.png)
Organizational chart with vertical layout annotations.
![](../../../images/thumbs/Javascript_OrgVerticalGroups_Chart.png)
Organizational chart with vertical layout grouped by color with dynamic legend entries.
![](../../../images/thumbs/Javascript_OrgVerticalImages_Chart.png)
Organizational chart with images in nodes and vertical leaf point layout.
![](../../../images/thumbs/Javascript_OrgVerticalLargeStyledParents_Chart.png)
Large organizational chart with vertical leaf point layout and synced node widths.