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

Note: Currently, the plugin is only compatible with the basic MDB package imported in UMD format. More about import MDB formats.


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

        
            
          <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


Import

        
            
          import OrganizationChart from 'mdb-organization-chart';
        
        
    
        
            
          @import '~mdb-organization-chart/css/organization-chart.min.css';
        
        
    

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>
      
        
    
        
            
        $(document).ready(() => { 
          $('#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 {} Pass data for the structure illustrated on the chart. At every level there should be name. Properties label, avatar and children are optional.
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 OrganizationChart instance associated with a DOM element. OrganizationChart.getInstance(element)
dispose element Disposes OrganizationChart instance. instance.dispose()
        
            
        const orgChartElement = document.getElementById('organization-chart');
        const instance = OrganizationChart.getInstance(orgChartElement);
        instance.dispose();