Org Chart

Org Chart renders an interactive, pan-zoom organisation chart from Microsoft 365 and an optional SharePoint overrides list. It handles how companies are really structured - matrix teams, multiple line managers, dotted functional lines, external contractors and vacant positions - with a zero-setup default.

Permissions

Org Chart uses two read-only Graph scopes, both of which the Directory already uses, so existing customers grant nothing new (approve in SharePoint admin → Advanced → API access):

Scope	Used for
`User.Read.All`	Users, managers, profile photos and office location
`Presence.Read.All`	Live Teams presence dots on cards

The overrides list is read and written on SharePoint as the signed-in user, with no extra scope.

Set up

Install the package and approve the two Graph scopes (see the Install guide).
Edit a page → add the Org Chart web part. With the default Hybrid source it renders immediately from your directory.
To shape the org, open the property pane, page 1 (source), and click Provision overrides list.

Source modes

Mode	What it does
Microsoft 365 directory	Zero configuration; users and managers paged from Microsoft Graph.
SharePoint list	The overrides list is the org; rows define everyone, including people not in Microsoft 365.
Hybrid (recommended)	The directory baseline with the overrides list applied on top.

The overrides list

Provisioning creates the GCS Org Chart list and is idempotent; once it exists the button becomes Repair list to add any missing columns. With the list you can:

Re-parent a reporting line, and add extra solid-line or dotted-line managers.
Override a title or department, hide a person, or add someone who is not in Microsoft 365.
Set an office location. The directory holds one only for the people it knows about, so in SharePoint list mode, and for an external person in Hybrid, this column is what puts a location on the card; where both exist the row wins. On a list created before 1.7, click Repair list once to add the column.
Mark a vacant position (role name and manager), shown as a dashed muted card.
Order siblings with a sort weight.

Add rows directly in the list, or from the Manage org chart panel (edit the page, then the toolbar button), which uses people pickers and saves back to the chart live.

Display options

Chart height - a fixed depth, or fill the page: the canvas runs to the bottom of the screen and stays there as the window is resized. Fixed is the default, so an existing web part keeps the height it has until you change it. Use fill on a page given over to the chart; keep fixed when other web parts sit below it in the same section.
Layout - top-down, left-to-right or compact (grouped-leaf grid, with a max-columns slider).
Connectors - elbow, straight or curved, applied to primary, additional and dotted lines.
Card design - Standard, Compact, Portrait, Accent bar or Spotlight preset; circle or rounded-square photo; toggles for job title, department, office location, email and a report-count badge.
Toolbar - search across name, title and department; Department and Job title filter facets; collapse to level; zoom and fit-to-view.

Title banner

The banner carrying the chart's title is styled from the property pane, page 3 (header banner and colours), in the Header banner group. On a people or About us page the chart is usually the whole page, so the banner is the first thing a reader sees. Only the fields that apply to the style you choose are shown.

Setting	What it does
Title banner style	Solid colour, soft tint, gradient fade, two colours, no fill (ghost), underline, accent bar, overline label, or background image.
Banner shape	Pill or square corners, on the styles that draw a banner behind the title.
Banner colour	Your own colour, or clear it to follow the chart accent and the site theme.
Second colour	The far end of the two-colour gradient; leave it empty for a darker shade of the first.
Banner background image	Pick or upload a picture; a readability overlay keeps the title legible over it.
Overline text	The small label above the title on the overline style - a division or site name, for example.
Title text colour	Automatic, light or dark. Offered on the gradient, image, ghost and underline styles, where the automatic choice may not be the one you want.

Title contrast is computed against the real banner colour using WCAG ratios, so a banner set to a brand colour keeps a legible title. Existing charts are unchanged: the defaults reproduce the banner that shipped before these settings existed, and nothing moves until an author chooses a style.

On screens under 640px the canvas swaps for a drill-down accordion with the same data. Reporting cycles are detected and broken safely, with a dismissable warning naming the affected people.