How to configure the "Org chart" component?

The Involv Org Chart component visualises who reports to whom inside your organization. It is built on top of your existing identity data — either the manager relationships in Microsoft Entra ID, or a SharePoint list you maintain — so the chart stays in sync without manual upkeep.

Org charts are a fast way for employees to find the right person, understand a department's structure, or get an overview of the company during onboarding. They also work well on a Who is who page, a department landing page, or an executive team page.

This article is for content creators who add the Org Chart to a page and configure how it looks and behaves. No coding is required for the standard configuration.

2. What you'll learn

• How to add the Org Chart component to a page
• How to choose between a vertical or horizontal layout and decide how deep the chart goes
• How to pick the data source — Microsoft Graph or a SharePoint list
• How to set the starting manager and sort employees inside each level
• How to limit visibility to a specific audience
• How to improve performance with caching and apply custom styling

3. Watch interactive tutorial

Watch the interactive demo below to follow each step.

4. Add the Org Chart component to your page

Open the page where you want the chart to appear and switch to edit mode. Click the + button to add a new component, search for Involv Org Chart, and select it from the results. The component is added to the page with a placeholder rendering of the default chart.

Click the component to select it, then open the property pane on the right side of the screen. All configuration happens from this pane.

5. Choose how the chart looks

The Display section controls the visual presentation of the chart.

Set a Title to show a heading above the chart — for example Our Leadership or IT Department. Leave it blank if the surrounding page already provides context.

Choose a Template to set the layout direction. Vertical stacks each level top-to-bottom and works well in narrow page sections; Horizontal spreads each level side-to-side and is better suited to wide sections.

Toggle Show Teams status on to display Microsoft Teams presence indicators (Available, Busy, Away) next to each person. This helps users see at a glance whether the right colleague is reachable right now.

Use Initial amount of levels to expand to decide how many hierarchy levels are open by default when the page loads. A value of 1 shows only direct reports; 2 includes one extra layer; and so on. Users can always expand further by clicking on a person.

If you want to limit how deep the chart can go, toggle Enable maximum levels on and set Maximum levels to show to a number that matches your organization's depth. This keeps very large org structures readable.

Toggle Allow moving up in the hierarchy on to let users navigate upward from the chart — for example by clicking on a manager to see their manager. With this off, users can only navigate downward.

6. Pick the data source

The Technical Settings section controls where the chart pulls its data from. The Source dropdown offers two options:

• Graph uses the manager relationships stored in Microsoft Entra ID through Microsoft Graph. This is the right choice for most organizations because the data is already maintained as part of standard user management.
• List uses a SharePoint list as the source. Choose this if your organization's reporting structure is not reflected in Entra ID, or if you want to maintain a manually curated chart that differs from the system structure.

For Graph, no further source configuration is needed beyond selecting the starting manager (next section). For List, additional setup may be required — contact Involv support for guidance.

7. Set the starting manager and sort order

Use the Manager to start from picker to select the person at the top of the chart. The chart builds downward from this person, showing everyone who reports up to them, directly or indirectly. To change the entry point — for example to focus on a single department — pick that department's lead.

Use the Sort field dropdown to decide how employees are ordered inside each level of the chart. The available options are:

• Name — alphabetical by display name (most common)
• Email — alphabetical by email address
• Job — alphabetical by job title

8. Limit visibility to a specific audience

If the chart should only be shown to part of your audience — for example only to employees of a particular department — toggle Enable target audience on in the Target Audience Settings section and pick the relevant audience. Users outside that audience will not see the chart.

For more information on creating and managing audiences, see How to configure audiences.

9. Improve performance with caching

For organizations with many employees, building the chart on every page load can slow the page down. Toggle Enable caching on in the Caching section to store results temporarily, and set Cache duration (in minutes) to control how long the cached version is reused.

The default of 15 minutes is a good starting point for most organizations. Lower values keep the chart more in sync with recent changes; higher values reduce load further at the cost of slightly stale data.

10. Apply custom styling and identifiers

The Element ID and Class section and the Advanced section both expose styling options for organizations that want to apply custom CSS to the chart.

In Element ID and Class, set a Custom CSS class to add a class name to the chart's main element, and a Custom element ID to add a unique identifier for use as an anchor link or scripting hook. Use the Custom CSS class field in the Advanced section to add an additional class on the wrapper element when needed.

These settings are optional — leave them blank if your organization is using the default Involv styling.

11. Choose where the chart appears

The Visibility section controls which surfaces show the chart.

Toggle Show in mobile and email view on to include the chart in the Involv mobile app and in newsletter emails sent from this page. Turn it off if the chart is only relevant on the desktop intranet — for example when it is too dense to render well on small screens.

12. Publish your changes

When the configuration is complete, click Publish changes in the top right of the page editor. The Org Chart is now live for your audience, sourced from your chosen data and rendered with the layout, sorting and styling you configured.

Involv version 5.3