# dabeng/orgchart

**Attribution required: if you use, quote, or summarise this content, you must credit and link back to [awesome-repositories.com](https://awesome-repositories.com/repository/dabeng-orgchart).**

3,007 stars · 773 forks · JavaScript · mit

## Links

- GitHub: https://github.com/dabeng/OrgChart
- awesome-repositories: https://awesome-repositories.com/repository/dabeng-orgchart.md

## Topics

`chart` `jquery` `org` `organization` `orgchart` `tree`

## Description

OrgChart is a JavaScript hierarchy visualization library and web-based editor used to render interactive organizational charts from JSON or HTML data sources. It functions as a JSON-driven tree mapper and interactive component for visualizing, exploring, and editing complex hierarchical structures.

The library enables the real-time modification of parent-child and sibling relationships through drag-and-drop reorganization and dynamic node editing. It distinguishes itself by providing a visual editor for programmatically altering tree structures and managing organizational maps.

The system includes layout management for vertical, horizontal, and hybrid orientations, as well as viewport controls for zooming, panning, and collapsing branches. Visual customization is handled through custom node templates and color-coding, while data management covers on-demand loading and node filtering.

Users can export the resulting visualizations as PNG or PDF files, or extract the current tree state as a JSON data object.

## Tags

### Programming Languages & Runtimes

- [Hierarchical Tree Visualizers](https://awesome-repositories.com/f/programming-languages-runtimes/programming-utilities/data-structure-type-helpers/data-structures/hierarchical-tree-structures/hierarchical-tree-visualizers.md) — Renders interactive visual components from a nested JSON data structure to represent hierarchical relationships.
- [Visual Chart Exports](https://awesome-repositories.com/f/programming-languages-runtimes/programming-utilities/data-structure-type-helpers/data-structures/hierarchical-tree-structures/visual-chart-exports.md) — Allows users to export rendered organizational charts as PNG or PDF files for distribution.

### Part of an Awesome List

- [Interactive Editors](https://awesome-repositories.com/f/awesome-lists/data/charts-and-visualization/interactive-editors.md) — Ships a visual editor for adding, removing, and repositioning nodes within an organizational map.

### Data & Databases

- [JSON Data Chart Renderers](https://awesome-repositories.com/f/data-databases/data-visualization-charts/json-data-chart-renderers.md) — Renders interactive hierarchy charts by visualizing structured data from JSON or HTML sources. ([source](https://github.com/dabeng/OrgChart/blob/master/README.zh-cn.md))
- [Data Export](https://awesome-repositories.com/f/data-databases/data-visualization-charts/data-export.md) — Provides the ability to export the current tree structure as a structured JSON data object. ([source](https://dabeng.github.io/OrgChart/get-hierarchy.html))
- [On-Demand Subset Loading](https://awesome-repositories.com/f/data-databases/on-load-data-fetchers/on-demand-subset-loading.md) — Implements on-demand loading of child nodes via AJAX to improve performance for large hierarchies. ([source](https://dabeng.github.io/OrgChart/))

### Graphics & Multimedia

- [SVG Chart Renderers](https://awesome-repositories.com/f/graphics-multimedia/chart-geometry-renderers/svg-chart-renderers.md) — Implements a full SVG rendering pipeline to draw the organization chart hierarchy and connections in the browser.
- [Viewport Transformations](https://awesome-repositories.com/f/graphics-multimedia/graphics-engines-rendering/rendering/coordinate-viewport-transformations/viewport-transformations.md) — Uses coordinate and viewport transformations to enable smooth panning and zooming across large charts.

### User Interface & Experience

- [Chart Components](https://awesome-repositories.com/f/user-interface-experience/chart-components.md) — Provides a specialized user interface component for rendering and managing interactive organizational charts.
- [Hierarchy Modification Tools](https://awesome-repositories.com/f/user-interface-experience/composition-hierarchies/view-hierarchy-composition/hierarchy-modification-tools.md) — Provides tools for adding, deleting, and repositioning nodes to modify the organization's hierarchical structure. ([source](https://dabeng.github.io/OrgChart/edit-chart.html))
- [Coordinate-Based Positioning](https://awesome-repositories.com/f/user-interface-experience/coordinate-based-positioning.md) — Calculates spatial X and Y coordinates to position hierarchical nodes based on tree depth and sibling count.
- [Data Explorers](https://awesome-repositories.com/f/user-interface-experience/data-explorers.md) — Provides a visual interface for exploring large structural maps using zoom, pan, and collapsible branches.
- [Hierarchy Reorganization](https://awesome-repositories.com/f/user-interface-experience/drag-and-drop-libraries/hierarchy-reorganization.md) — Enables real-time structural reorganization of the organization chart through interactive drag-and-drop actions. ([source](https://github.com/dabeng/OrgChart/blob/master/README.zh-cn.md))
- [Hierarchy Reorganization](https://awesome-repositories.com/f/user-interface-experience/form-and-input-management/interaction-and-event-handling/drag-and-drop-interactions/hierarchy-reorganization.md) — Enables real-time modification of parent-child and sibling relationships through interactive drag-and-drop.
- [Visual Hierarchy Editors](https://awesome-repositories.com/f/user-interface-experience/visual-hierarchy-editors.md) — Provides a web-based editor for programmatically and visually modifying parent-child relationships in a tree.
- [Directional Layout Configurations](https://awesome-repositories.com/f/user-interface-experience/chart-layout-components/directional-layout-configurations.md) — Allows users to configure the visual direction of the chart, such as top-to-bottom or left-to-right. ([source](https://github.com/dabeng/OrgChart/blob/master/README.zh-cn.md))
- [Node Style Templates](https://awesome-repositories.com/f/user-interface-experience/color-themes/chart-color-theming/node-style-templates.md) — Utilizes custom node templates to define the internal structure and styling of hierarchical elements. ([source](https://github.com/dabeng/OrgChart/blob/master/README.zh-cn.md))
- [HTML Fragment Injections](https://awesome-repositories.com/f/user-interface-experience/color-themes/chart-color-theming/node-style-templates/html-fragment-injections.md) — Allows injection of custom HTML or SVG fragments into node containers for flexible visual styling.
- [Drag and Drop Libraries](https://awesome-repositories.com/f/user-interface-experience/drag-and-drop-libraries.md) — Provides a drag-and-drop interaction library to modify parent-child relationships within the organizational hierarchy.
- [Hierarchical Node Interactions](https://awesome-repositories.com/f/user-interface-experience/hierarchical-node-interactions.md) — Enables interactive exploration of the organization chart through node dragging, collapsing, and highlighting. ([source](https://dabeng.github.io/OrgChart/))
- [Tree Mapping](https://awesome-repositories.com/f/user-interface-experience/json-driven-dashboards/tree-mapping.md) — Functions as a JSON-driven tree mapper that converts structured data into navigable organizational diagrams.
- [Viewport Management](https://awesome-repositories.com/f/user-interface-experience/styling-theming-systems/css-layout-systems/grid-layout-systems/node-snapping/viewport-management.md) — Manages the global viewport, including zoom scaling and panning, to navigate large organization maps. ([source](https://github.com/dabeng/OrgChart/blob/master/README.zh-tw.md))
- [Layout Management](https://awesome-repositories.com/f/user-interface-experience/visual-node-editors/layout-management.md) — Manages complex node graph layouts with support for vertical, horizontal, and hybrid orientations. ([source](https://dabeng.github.io/OrgChart/))
- [Chart Visual Customizations](https://awesome-repositories.com/f/user-interface-experience/visual-style-customization/chart-visual-customizations.md) — Supports visual customization of nodes through color-coding and external icon libraries to distinguish elements. ([source](https://cdn.jsdelivr.net/gh/dabeng/orgchart@master/README.md))

### Web Development

- [Hierarchy Visualization Libraries](https://awesome-repositories.com/f/web-development/hierarchy-visualization-libraries.md) — Offers a JavaScript library for rendering interactive tree-like organizational charts from JSON or HTML.
- [Node Visibility Controls](https://awesome-repositories.com/f/web-development/form-field-state-management/visibility-configurators/dynamic-visibility-controllers/node-visibility-controls.md) — Implements capabilities for expanding and collapsing nodes to isolate specific branches of the hierarchy. ([source](https://github.com/dabeng/OrgChart/blob/master/README.zh-cn.md))
- [On-Demand Component Loading](https://awesome-repositories.com/f/web-development/on-demand-component-loading.md) — Implements on-demand loading of child node data via AJAX to optimize initial chart load times.