Org Chart (SPFx)

A SharePoint Online web part that visualizes organizational structure using Microsoft Graph.

Features

• Movable graph view — grab and move the chart with the mouse.
• Search engine with live suggestions, person focus, and automatic screen movement to the selected person.
• Set the root user by email.
• Expand branches downward when a user has subordinates.
• Hide users from the tree.
• Restore hidden users to the tree.
• Enable or disable dark mode, including fullscreen mode support.
• Enable or disable logs.
• Enable or disable inactive accounts.
• Set maximum card size.
• Set spacing between cards.
• Enable or disable profile photos.
• Enable or disable job titles.
• Change card background color using HEX/CSS values and a floating on-screen color picker.
• Enable or disable card click navigation to the person’s profile.
• Adjust node height with a slider.
• Use the side panel to view account details.
• Use fullscreen mode with centered view and preserved tree state.
• Choose graph orientation: horizontal or vertical.
• Improved fullscreen user settings styles.
• Persistent graph data caching with configurable TTL.
• Option to disable animations.
• Export chart to PDF/PNG with improved visible graph capture.
• Saved views support with load, save, and delete options.

How to Install

Prerequisites

• Download the latest .sppkg package from GitHub Releases

Deployment Steps

1. Open SharePoint Admin Center → Manage apps

   

2. Upload the package

   • Click Upload

   • Select the .sppkg file downloaded in step 1

     

3. Deploy and approve permissions

   • Click Deploy
   • Approve API permissions when prompted (User.Read.All, Group.Read.All)

4. Add web part to SharePoint page

   • Navigate to your SharePoint site

   • Edit a page and add the Org Chart web part

     

5. Configure the web part

   • Set Root user email (the manager whose hierarchy to display)

   • Configure additional options: photos, dark mode, compact view, etc.

   • Publish the page

     

Component Version

Version	Release date	Notes
2.0.0.0	2026-05-11	New dagre/d3 graph layout, graph orientation option, improved node highlighting and animations, fixed node zoom, card scaling, dark mode, and fullscreen issues
1.3.0.0	2026-04-13	Node caching with TTL, option to disable animations, user-specific settings, improved search box effects, dark mode and export fixes
1.2.0.0	2026-03-18	Export chart to PDF/PNG, live search suggestions, F11 fullscreen, path highlight from user to root, improved preview
1.1.0.0	2026-03-12	Side panel, node height slider, on-screen color picker, fullscreen centering, search improvements, bug fixes
1.0.0.0	2026-03-08	Initial release

License

MIT License