An organization chart, also known as an org chart or organizational chart, is a graphical representation of a company’s structure, showing the hierarchy of positions and the relationships between them. It is an essential tool for communicating the reporting structure and responsibilities within an organization.
The organization chart typically displays the levels of management and their respective roles and responsibilities. It can include all the positions within the organization, or just those relevant to a particular department or function. The chart may also show other relevant information, such as job titles, reporting lines, and levels of authority. Here is a working demo for the same with a link to Github.
Github – https://github.com/dabeng/OrgChart
See the Pen Center on selected node by Puneet Sharma (@webdevpuneet) on CodePen.
Features
- Supports both local data and remote data (JSON).
- Smooth expand/collapse effects based on CSS3 transitions.
- Align the chart in 4 orientations.
- Allows users to change org chart structure by drag/drop nodes.
- Allows users to edit org chart dynamically and save the final hierarchy as a JSON object.
- Supports exporting charts as a picture or pdf document.
- Supports pan and zoom.
- Allows users to customize the internal structure for every node.
- Users can adopt multiple solutions to build up a huge organization chart(please refer to multiple layers or hybrid layout sections).
- touch-enabled plugin for mobile devices.
- Available for – ES6 Version, Web Components Version, Vue.js, Angular Version