Organization chart

Bootstrap 5 Organization chart plugin

Responsive family tree chart built with the latest Bootstrap 5. Organize data with a branching visualization.

Note: Read the API tab to find all available options and advanced customization

Basic example

Create simple Organization Chart.

CEO

Director

Manager

Employee

Manager

Employee

Director

Manager

Employee

Manager

Employee

Advanced example

Create organization chart including avatar and name.

CIO

Walter White

Manager

Jon Snow

Britney Morgan

Director

Jimmy McGill

Phoebe Buffay

Operations

Kim Wexler

Development

Rachel Green

Manager

Michael Scott

Pam Beasly

Alex Morgan

R&D

Fran Kirby

HTML
JavaScript

<div id="advancedChartExample"></div>

const advancedChart = document.getElementById('advancedChartExample');
new OrganizationChart(advancedChart, {
  data: {
    name: 'Walter White',
    label: 'CIO',
    avatar: 'https://mdbcdn.b-cdn.net/img/new/avatars/1.webp',
    children: [
      {
        label: 'Manager',
        name: 'Jon Snow',
        avatar: 'https://mdbcdn.b-cdn.net/img/new/avatars/2.webp',
        children: [
          {
            label: 'SE',
            name: 'Britney Morgan',
            avatar: 'https://mdbcdn.b-cdn.net/img/new/avatars/9.webp',
          },
        ],
      },
      {
        label: 'Director',
        name: 'Jimmy McGill',
        avatar: 'https://mdbcdn.b-cdn.net/img/new/avatars/3.webp',
        children: [
          {
            label: 'PM',
            name: 'Phoebe Buffay',
            avatar: 'https://mdbcdn.b-cdn.net/img/new/avatars/7.webp',
            children: [
              {
                label: 'Operations',
                avatar: 'https://mdbcdn.b-cdn.net/img/new/avatars/4.webp',
                name: 'Kim Wexler',
              },
              {
                label: 'Development',
                name: 'Rachel Green',
                avatar: 'https://mdbcdn.b-cdn.net/img/new/avatars/6.webp',
              },
            ],
          },
        ],
      },
      {
        label: 'Manager',
        name: 'Michael Scott',
        avatar: 'https://mdbcdn.b-cdn.net/img/new/avatars/8.webp',
        children: [
          {
            label: 'SA',
            name: 'Pam Beasly',
            avatar: 'https://mdbcdn.b-cdn.net/img/new/avatars/5.webp',
          },
          {
            label: 'SP',
            name: 'Alex Morgan',
            avatar: 'https://mdbcdn.b-cdn.net/img/new/avatars/14.webp',
          },
        ],
      },
      {
        label: 'R&D',
        name: 'Fran Kirby',
        avatar: 'https://mdbcdn.b-cdn.net/img/new/avatars/10.webp',
      },
    ],
  },
});

Mixed example

Create mixed organization chart.

CEO

Walter White

CFO

Jon Snow

Analysis

Sales

CMO

Kim Wexler

Marketing

CIO

Phoebe Buffay

Development

Chandler Bing

Analysis

Front End

Back End

Rachel Green

R&D

Monica Geller

Organization chart - API

Usage

<div id="organizationChartExample"></div>

const organizationChart = document.getElementById('organizationChartExample');
new OrganizationChart(organizationChart, { data: { label: "MDB" }}

Via jQuery

Note: By default, MDB does not include jQuery and you have to add it to the project on your own.

HTML
jQuery

<div id="organizationChartExample"></div>

$('#organizationChartExample').organizationChart({ data: { label: "MDB" });

Options

Options can be passed via data JavaScript, or jQuery. Each option can be passed with value or null.

Name	Type	Default	Description
`data`	Object	`{}`	Data for chart construction.
`switchHeaderText`	Boolean	`false`	Switch the name with title in node (only for advanced charts).

Methods

Name	Parameters	Description	Example
`getInstance`	element	Static method which allows to get the ScrollStatus instance associated with a DOM element.	`ScrollStatus.getInstance(element)`
`dispose`	element	Disposes ScrollStatus instance.	`instance.dispose()`

JavaScript

const orgChartElement = document.getElementById('organization-chart');
const instance = OrganizationChart.getInstance(orgChartElement);
instance.dispose();

Import

MDB UI KIT also works with module bundlers. Use the following code to import this component:

JavaScript

import OrganizationChart from 'mdb-organization-chart';