Home Services Work About Blog Contact Let's Talk
Back to Case Studies
SPFx  ·  D3.js

Interactive Organisation
Chart Web Part

Enterprise Clients

Real-time
Azure AD sync via Microsoft Graph API
D3.js
Interactive visualisation with smooth transitions
Drill-down
Navigation through the full reporting structure
5+
Enterprise tenants with active deployment
SPFx Web Part SPFx 1.18+ D3.js Microsoft Graph API React TypeScript Azure AD Fluent UI

Static PowerPoint Org Charts That Go Out of Date Overnight

Across enterprise clients, the organisation chart was an afterthought — usually a PowerPoint slide deck or Visio file maintained by a single HR administrator. Every time someone joined, left, was promoted, or changed teams, the chart needed a manual update. In practice, those updates happened quarterly at best and were nearly always out of date.

New employees had no way to understand the reporting structure of the organisation they had just joined. Managers could not see who reported to whom across departments without chasing HR. The chart, when shared at all, was distributed as a PDF attachment to an email — no interactivity, no drill-down, no ability to click on a person to get their contact details or reach out directly.

The data needed to build an accurate, always-current org chart was already in Azure AD — the reporting lines, manager assignments, department memberships, and profile photos were all there. The challenge was building a web part that could turn that data into a beautiful, interactive visual that employees would actually want to use.

Static PowerPoint or PDF org charts — outdated within days, no interactivity, no drill-down

Manual maintenance burden — every personnel change required HR to update and redistribute the file

No employee profile links — viewing the chart gave you a name but no way to contact the person

No connection to live data — chart was a snapshot, not a reflection of the actual current organisation

D3.js Org Chart Web Part with Live Graph API Data

Akshara Technologies built an interactive organisation chart SPFx web part powered by D3.js and Microsoft Graph API. On load, the web part fetches the complete reporting hierarchy from Azure AD via Graph, constructs the tree data structure, and renders it as a fully interactive D3.js visualisation directly on the SharePoint page.

Users can drill down by clicking any node in the chart — the view smoothly transitions to show that person's direct reports and their sub-tree. Navigating back up the chain is handled by breadcrumb navigation at the top of the chart. Department colour coding is applied automatically based on Azure AD department data, making it immediately clear which teams belong to which function.

Each node in the chart shows the employee's profile photo, name, and job title. Clicking the node opens a profile panel with contact details and direct links to start a Teams chat or send an email — turning the org chart from a passive reference into an active communication tool. The web part is packaged as a tenant-deployable SPFx solution, usable on any SharePoint site across the tenant.

What Was Delivered

D3.js interactive tree visualisation rendering the full reporting hierarchy from Azure AD
Real-time data from Microsoft Graph API — always reflects current Azure AD reporting structure
Drill-down navigation with smooth D3.js transitions and breadcrumb trail for navigation context
Department colour coding applied automatically from Azure AD department data
Employee profile panel on node click — photo, title, contact details, Teams chat link, and email link
Zero maintenance — reporting lines update automatically when Azure AD changes
Tenant-deployable SPFx package — any SharePoint site in the organisation can host the web part

Always Up to Date, Zero Maintenance

Real-time
Org chart always reflects current Azure AD reporting structure — no update required
5+
Enterprise tenants with the interactive org chart web part in active use
Drill-down
Full reporting tree navigation with smooth D3.js transitions and breadcrumb trail
Zero
Admin maintenance — org chart updates automatically with every Azure AD change

The Organisation Chart in Action

Tools & Technologies Used

Framework
SPFx 1.18+
SharePoint Framework for building and packaging the org chart as a tenant-deployable solution
Visualisation
D3.js
Data-driven tree visualisation with animated transitions, zoom, pan, and drill-down navigation
API
Microsoft Graph API
Live reporting hierarchy, manager chains, direct reports, and profile photos from Azure AD
Frontend
React + TypeScript
Component architecture managing D3.js lifecycle, profile panels, and breadcrumb state
Identity
Azure AD
Single source of truth for all reporting lines, department data, and employee profiles
UI Library
Fluent UI
Profile panels, navigation elements, and search components consistent with SharePoint design language

Start Your Project

Replace Your Static
Org Chart Today

We deploy our interactive D3.js org chart web part to your Microsoft 365 tenant — always current from Azure AD, drill-down navigation, zero maintenance required.