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.

        
            
          <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.

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

Mixed example

Create mixed organization chart.

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

Organization chart - API


Usage

Via JavaScript

        
            
        <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.

        
            
        <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()
        
            
        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:

        
            
        import OrganizationChart from 'mdb-organization-chart';