--- title: "Interactive Organization Chart Web Part for SharePoint Online and Teams" description: "Explore our customizable organization chart web part with real-time data from Microsoft Entra ID, zoom and search, employee profile cards, presence status, PDF/JPEG export and Microsoft Teams integration." url: https://vitextra.com/en/products/org-chart language: en published: 2021-05-23 modified: 2026-10-23 products: - "Organizational Chart" --- # Organizational Chart Interactive Organizational Chart web part for SharePoint Online and Microsoft Teams with real-time data from Microsoft Entra ID, zoom, search, presence and export. The Organizational Chart web part provides an interactive, dynamic visualization of your company's structure in SharePoint Online and Microsoft Teams. Built on the Microsoft Graph API, it draws live data from Microsoft Entra ID to give everyone a clear, always up-to-date view of reporting relationships and team hierarchies — with zoom, search, "Find me", export and live presence built in. ## Features - Horizontal and Vertical Layouts - Entire Company or a Specific Manager's Team - Easy Attribute Selection to Display - Direct Reports Counter - Data Filtering Criteria and Exclusions - Zoom, Fit to Screen, Expand/Collapse All - "Find Me" and Employee Search - Employee Profile Card and Presence Status - Export to PDF and JPEG - Lazy Loading for Large Organizations - Microsoft Teams App with Tenant Defaults - Theme Variants Support ## Overview The Organizational Chart web part turns your ::SharePoint Online:: intranet into a living map of your company. Employees can explore reporting lines and team hierarchies interactively, drill into any branch of the organization, and see at a glance who works where and for whom. Built on the ::SharePoint Framework::, the web part retrieves data through the ::Microsoft Graph API:: directly from ::Microsoft Entra ID::. The chart always reflects your directory in real time — there is no separate data source to maintain, and robust Microsoft Graph authentication and authorization keep data retrieval smooth and secure. The responsive design ensures the chart looks great and is easy to navigate on any device, and the solution scales efficiently to organizations of any size. ### Horizontal or Vertical — Your Hierarchy, Your Way Choose the layout that best fits the page. The **Horizontal** layout renders the classic organization chart: a tree of cards connected by lines, with expandable branches — ideal for exploring the structure visually on a wide page or a full-page app. The **Vertical** layout stacks the same hierarchy into a compact, drill-down list — a great fit for narrow page columns and mobile screens. Use the **Levels to Display** setting to decide how many levels are open when the page loads (1 to 10); people expand the rest with a single click on the +/− control under any card. Controls are also reachable from the keyboard (Enter/Space) and are exposed to screen readers. ![Vitextra Organizational Chart. Horizontal and Vertical Layouts](https://static.vitextra.com/products/org-chart-layouts-en.png) ### Show Exactly the Attributes You Need Decide which employee attributes appear on each card — name, job title, department, office location, e-mail, phone, city, country or any other property available in Microsoft Entra ID. Pick up to three lines (header, secondary and tertiary) and one of four card sizes, from a compact avatar-and-name card to a large card with a big photo. Simple settings let you tailor each chart to its audience without writing a single line of code. Turn on the **direct reports counter** to show a small badge with the number of direct reports on every manager's card — a quick way to see span of control at a glance. ![Vitextra Organizational Chart. Card Attributes and Direct Reports Counter](https://static.vitextra.com/products/org-chart-cards-en.png) ### The Whole Company or One Manager's Team In **Entire Company** mode the chart starts from the top of the hierarchy. In **Employees reporting to a specific user** mode you pick a person, and the chart shows only that person and everyone beneath them — so a department site shows that department's own structure, a project site shows the project lead's team. Place several web parts with different starting persons on different pages from the same solution, and every chart stays in sync with Microsoft Entra ID. ![Vitextra Organizational Chart. Chart Mode and Starting Person](https://static.vitextra.com/products/org-chart-mode-en.png) ### Focus the Chart with Data Filtering Filtering criteria let you display precisely the part of the organization a page is about. Build conditions on any available attribute — with operators such as *equals*, *contains*, *begins with* or *contains data* — and combine them with AND/OR groups using the visual filter editor. Keep the chart clean with one-click exclusions: **unlicensed employees**, employees with a **blank department** and employees with a **blank job title** (typically service accounts and shared mailboxes) are left out. Disabled accounts are never shown. Filtering is applied at the data level through Microsoft Graph queries, which keeps the chart fast and responsive even in large organizations. ![Vitextra Organizational Chart. Data Filtering and Exclusions](https://static.vitextra.com/products/org-chart-filtering-en.png) ### Navigate Large Structures with Ease A built-in toolbar makes even a very large organization manageable: **Expand all** and **Collapse all** open or fold the entire tree at once; **Zoom in / Zoom out** with a live percentage indicator, **Fit to screen** that scales the whole tree to the container width, and **Reset view** that returns to 100% (zoom controls are available in the horizontal layout). Zooming with the mouse wheel works while you hold Ctrl (⌘ on Mac) — so ordinary page scrolling is never hijacked, and the chart can safely sit in the middle of a long intranet page. Drag the chart to pan. ![Vitextra Organizational Chart. Zoom and Navigation Toolbar](https://static.vitextra.com/products/org-chart-navigation-en.png) ### Find Me — Where Do I Sit in the Company? One click on **Find me** locates the signed-in user in the chart: the web part expands every manager along the chain up to that person, highlights their card and scrolls it into view. New employees instantly see where they fit, and managers see their team in context. ![Vitextra Organizational Chart. Find Me](https://static.vitextra.com/products/org-chart-findme.png) ### Search the Chart Enable the search box to let people find colleagues by name, job title, department, e-mail, phone, location and other loaded fields. The chart narrows to the matching employees together with their management chain and highlights the hits; clear the query to return to the full structure. ![Vitextra Organizational Chart. Employee Search](https://static.vitextra.com/products/org-chart-search-en.png) ### Employee Profile Card at a Glance Hover over or select a person on the chart to open the familiar Microsoft 365 profile card with their photo, contact information, job role and place in the organization — plus quick actions to e-mail, call or start a chat. Colleagues get the context they need to reach out without leaving the page or searching a separate directory. ![Vitextra Organizational Chart. Employee Profile Card](https://static.vitextra.com/products/org-chart-card-en.png) ### Real-Time Presence Status See who is available before you reach out. The chart shows each person's live ::Microsoft Teams:: presence — available, busy, do not disturb, in a meeting, in a call, away, out of office or offline — drawn in real time from Microsoft 365. It is a small detail that makes a real difference for distributed and hybrid teams: people contact each other at the right moment, and unnecessary interruptions drop. ![Vitextra Organizational Chart. Presence Status](https://static.vitextra.com/products/org-chart-presence-en.png) ### Export the Whole Chart to PDF or JPEG Need the structure for a presentation, an audit or a printout? Let users export the **entire chart** — not just the visible part — to **PDF** or **JPEG** with one click. Administrators choose which formats are offered, or switch export off completely. ![Vitextra Organizational Chart. Export to PDF and JPEG](https://static.vitextra.com/products/org-chart-export-en.png) ### Fast Even in Very Large Organizations Photos and presence are requested from Microsoft Graph only when a card scrolls into view, and collapsed branches make no calls at all. The result is far fewer Graph requests, much less throttling and a page that opens quickly even with tens of thousands of employees. Directory data is cached in the browser. The chart shows when it was last updated ("Last updated: 5 minutes ago", localized to the page language) and a **Refresh** link to reload the data on demand. If Microsoft Graph is unavailable, users see a clear error message instead of an endless spinner. ![Vitextra Organizational Chart. Last Updated and Refresh](https://static.vitextra.com/products/org-chart-performance-en.png) ### At Home in Microsoft Teams — and On Theme Add the Organizational Chart to Microsoft Teams as a personal app or a tab and let people explore the company structure without leaving their conversations. The same real-time data, the same interactive navigation — right inside Teams. Because the property pane is not available inside Teams, an administrator configures the chart once in SharePoint and clicks **Save current settings as Microsoft Teams default** — the settings are then applied to the Teams app across the whole tenant. The web part also supports theme variants: it automatically adapts to your SharePoint site theme, including the color variant of the page section it is placed in, and matches the selected mode in Teams. The chart always looks like a native part of your workspace, in light and dark modes alike. ![Vitextra Organizational Chart. Microsoft Teams Integration and Theme Variants](https://static.vitextra.com/products/org-chart-teams-en.png) ## Pricing - Monthly subscription: $29 USD per month - Annual subscription: $299 USD / year ## Platforms - SharePoint Online - Microsoft Teams ## Supported Languages: 33 العربية (المملكة العربية السعودية), euskara (euskara), български (България), 中文(中国), čeština (Česko), dansk (Danmark), Nederlands (Nederland), English, eesti (Eesti), suomi (Suomi), français (France), galego (galego), Deutsch, Ελληνικά (Ελλάδα), italiano (Italia), 日本語 (日本), қазақ тілі (Қазақстан), 한국어(대한민국), latviešu (Latvija), lietuvių (Lietuva), norsk bokmål (Norge), polski (Polska), português (Brasil), português (Portugal), română (România), русский, slovenčina (Slovensko), slovenščina (Slovenija), español (España, alfabetización internacional), svenska (Sverige), ไทย (ไทย), Türkçe (Türkiye), українська (Україна) ## Latest version - v26.10.7 (2026-10-11) — [Download](https://vitextra.blob.core.windows.net/downloads/Vitextra.OrganizationalChart.2026Q4.zip) - [Change Log](https://vitextra.com/en/products/org-chart/changelog) ([RSS](https://vitextra.com/en/rss/changelog)) ## Customer Questions ### Where does Organizational Chart take the reporting structure from? Organizational Chart builds an interactive org chart in real time from **Microsoft Entra ID** via the Microsoft Graph API, using the manager and direct-report relationships maintained in your directory. There is no separate data store — keep the *Manager* attribute up to date in Entra ID and the chart updates automatically. See the [product page](https://vitextra.com/en/products/org-chart). ### What views and navigation options are available? The chart can be shown as a **Tree** or a **List**. Users can zoom in and out, fit the chart to the screen, expand or collapse all branches, search for employees (including by samAccountName or userPrincipalName), and use **Find me** to locate themselves and highlight their management chain. An optional badge shows the number of direct reports on each card, and the whole chart can be exported to JPEG or PDF. ### Can I choose which employee attributes are shown on the cards? Yes. In the web part property pane you select the user attributes to display on cards, apply filtering criteria to limit which accounts appear, pick a theme variant and enable the employee details card and Teams presence status. In Microsoft Teams the current settings can be saved as the tenant-wide default. ### Does it work in Microsoft Teams and on mobile devices? Yes. Organizational Chart supports SharePoint Online and Microsoft Teams (as a tab or app), shows real-time presence from Microsoft Graph and is responsive across desktop, tablet and smartphone screens. Keyboard navigation (Enter/Space to expand or collapse) is supported for accessibility. ### How does it perform in large organizations? Photos and presence information are loaded lazily from Microsoft Graph, which reduces the number of API calls and avoids throttling in large tenants. The web part is localized into more than 40 interface languages. It is a cloud product for SharePoint Online and Microsoft Teams only; SharePoint Server is not supported. Installation steps are in [Installing a Cloud-based Product](https://vitextra.com/en/support/kb/10035). ## Knowledge Base - [How to Add and Configure the Organizational Chart Web Part](https://vitextra.com/en/support/kb/10233) ([Markdown](https://vitextra.com/en/support/kb/10233.md)) - [Microsoft Graph Permissions Required by Organizational Chart](https://vitextra.com/en/support/kb/10235) ([Markdown](https://vitextra.com/en/support/kb/10235.md)) - [Organizational Chart: A Quick Guide for End Users](https://vitextra.com/en/support/kb/10234) ([Markdown](https://vitextra.com/en/support/kb/10234.md)) - [Organizational Chart. Solution Overview](https://vitextra.com/en/support/kb/10232) ([Markdown](https://vitextra.com/en/support/kb/10232.md)) - [Why Is Someone Missing from the Organizational Chart?](https://vitextra.com/en/support/kb/10236) ([Markdown](https://vitextra.com/en/support/kb/10236.md)) [Knowledge Base](https://vitextra.com/en/products/org-chart/articles)