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.

Edit in sandbox 
        
            
          <div id="simpleChartExample"></div>
        
        
    
        
            
          const simpleChart = document.getElementById('simpleChartExample');
          new OrganizationChart(simpleChart, {
            data: {
              label: 'CEO',
              children: [
                {
                  label: 'Director',
                  children: [
                    { label: 'Manager', children: [{ label: 'Employee' }] },
                    { label: 'Manager', children: [{ label: 'Employee' }, { label: 'Employee' }] },
                  ],
                },
                {
                  label: 'Director',
                  children: [
                    { label: 'Manager', children: [{ label: 'Employee' }, { label: 'Employee' }] },
                    { label: 'Manager', children: [{ label: 'Employee' }] },
                  ],
                },
              ],
            },
          });

Advanced example

Create organization chart including avatar and name.

Edit in sandbox 
        
            
          <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.

Edit in sandbox 
        
            
          <div id="mixedChartExample"></div>
        
        
    
        
            
          const mixedChart = document.getElementById('mixedChartExample');
          new OrganizationChart(mixedChart, {
            data: {
              name: 'Walter White',
              label: 'CEO',
              avatar: 'https://mdbcdn.b-cdn.net/img/new/avatars/1.webp',
              children: [
                {
                  name: 'Jon Snow',
                  label: 'CFO',
                  avatar: 'https://mdbcdn.b-cdn.net/img/new/avatars/2.webp',
                  children: [
                    {
                      label: 'Analysis',
                    },
                    {
                      label: 'Sales',
                    },
                  ],
                },
                {
                  label: 'CMO',
                  name: 'Kim Wexler',
                  avatar: 'https://mdbcdn.b-cdn.net/img/new/avatars/9.webp',
                  children: [
                    {
                      label: 'Marketing',
                    },
                  ],
                },
                {
                  label: 'CIO',
                  name: 'Phoebe Buffay',
                  avatar: 'https://mdbcdn.b-cdn.net/img/new/avatars/5.webp',
                  children: [
                    {
                      label: 'Development',
                      name: 'Chandler Bing',
                      avatar: 'https://mdbcdn.b-cdn.net/img/new/avatars/3.webp',
                      children: [
                        {
                          label: 'Analysis',
                        },
                        {
                          label: 'Front End',
                        },
                        {
                          label: 'Back End',
                        },
                      ],
                    },
                    {
                      label: 'QA',
                      name: 'Rachel Green',
                      avatar: 'https://mdbcdn.b-cdn.net/img/new/avatars/10.webp',
                    },
                    {
                      label: 'R&D',
                      name: 'Monica Geller',
                      avatar: 'https://mdbcdn.b-cdn.net/img/new/avatars/11.webp',
                    },
                  ],
                },
              ],
            },
          });

Organization chart - API

Usage

Via JavaScript

Edit in sandbox 
        
            
        <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.

Edit in sandbox 
        
            
        <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()
Edit in sandbox 
        
            
        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:

Edit in sandbox 
        
            
        import OrganizationChart from 'mdb-organization-chart';