Organization chart

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

        
            
            <template>
              <MDBOrganizationChart 
                :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' }] },
                      ],
                    },
                  ],
                }"
              />
            </template>
          
        
    
        
            
            <script>
              import { MDBOrganizationChart } from "mdb-vue-organization-chart";

              export default {
                components: {
                  MDBOrganizationChart
                },
              };
            </script>
          
        
    
        
            
            <script setup lang="ts">
              import { MDBOrganizationChart } from "mdb-vue-organization-chart";
            </script>

Advanced example

Create organization chart including avatar and name.

        
            
          <template>
            <MDBOrganizationChart 
              :data="{
                name: 'Walter White',
                label: 'CEO',
                img: 'https://mdbcdn.b-cdn.net/img/new/avatars/1.webp',
                children: [
                  {
                    label: 'Manager',
                    name: 'Jon Snow',
                    img: 'https://mdbcdn.b-cdn.net/img/new/avatars/2.webp',
                    children: [
                      {
                        label: 'SE',
                        name: 'Britney Morgan',
                        img: 'https://mdbcdn.b-cdn.net/img/new/avatars/9.webp',
                      },
                    ],
                  },
                  {
                    label: 'Director',
                    name: 'Jimmy McGill',
                    img: 'https://mdbcdn.b-cdn.net/img/new/avatars/3.webp',
                    children: [
                      {
                        label: 'PM',
                        name: 'Phoebe Buffay',
                        img: 'https://mdbcdn.b-cdn.net/img/new/avatars/7.webp',
                        children: [
                          {
                            label: 'Operations',
                            img: 'https://mdbcdn.b-cdn.net/img/new/avatars/4.webp',
                            name: 'Kim Wexler',
                          },
                          {
                            label: 'Development',
                            name: 'Rachel Green',
                            img: 'https://mdbcdn.b-cdn.net/img/new/avatars/6.webp',
                          },
                        ],
                      },
                    ],
                  },
                  {
                    label: 'Manager',
                    name: 'Michael Scott',
                    img: 'https://mdbcdn.b-cdn.net/img/new/avatars/8.webp',
                    children: [
                      {
                        label: 'SA',
                        name: 'Pam Beasly',
                        img: 'https://mdbcdn.b-cdn.net/img/new/avatars/5.webp',
                      },
                      {
                        label: 'SP',
                        name: 'Alex Morgan',
                        img: 'https://mdbcdn.b-cdn.net/img/new/avatars/14.webp',
                      },
                    ],
                  },
                  {
                    label: 'R&D',
                    name: 'Fran Kirby',
                    img: 'https://mdbcdn.b-cdn.net/img/new/avatars/10.webp',
                  },
                ],
              }"
            />
          </template>
        
        
    
        
            
          <script>
            import { MDBOrganizationChart } from "mdb-vue-organization-chart";
            
            export default {
              components: {
                MDBOrganizationChart
              },
            };
          </script>
          
        
    
        
            
            <script setup lang="ts">
              import { MDBOrganizationChart } from "mdb-vue-organization-chart";
            </script>

Mixed example

Create mixed organization chart.

        
            
            <MDBOrganizationChart
              :data="{
                name: 'Walter White',
                label: 'CEO',
                img: 'https://mdbcdn.b-cdn.net/img/new/avatars/1.webp',
                children: [
                  {
                    name: 'Jon Snow',
                    label: 'CFO',
                    img: 'https://mdbcdn.b-cdn.net/img/new/avatars/2.webp',
                    children: [
                      {
                        label: 'Analysis',
                      },
                      {
                        label: 'Sales',
                      },
                    ],
                  },
                  {
                    label: 'CMO',
                    name: 'Kim Wexler',
                    img: 'https://mdbcdn.b-cdn.net/img/new/avatars/9.webp',
                    children: [
                      {
                        label: 'Marketing',
                      },
                    ],
                  },
                  {
                    label: 'CIO',
                    name: 'Phoebe Buffay',
                    img: 'https://mdbcdn.b-cdn.net/img/new/avatars/5.webp',
                    children: [
                      {
                        label: 'Development',
                        name: 'Chandler Bing',
                        img: 'https://mdbcdn.b-cdn.net/img/new/avatars/3.webp',
                        children: [
                          {
                            label: 'Analysis',
                          },
                          {
                            label: 'Front End',
                          },
                          {
                            label: 'Back End',
                          },
                        ],
                      },
                      {
                        label: 'QA',
                        name: 'Rachel Green',
                        img: 'https://mdbcdn.b-cdn.net/img/new/avatars/10.webp',
                      },
                      {
                        label: 'R&D',
                        name: 'Monica Geller',
                        img: 'https://mdbcdn.b-cdn.net/img/new/avatars/11.webp',
                      },
                    ],
                  },
                ],
              }"
            />
          
        
    
        
            
            <script>
              import { MDBOrganizationChart } from "mdb-vue-organization-chart";
              
              export default {
                components: {
                  MDBOrganizationChart
                },
              };
            </script>
          
        
    
        
            
            <script setup lang="ts">
              import { MDBOrganizationChart } from "mdb-vue-organization-chart";
            </script>

Organization chart - API

Import

        
            
            <script>
              import { MDBOrganizationChart } from "mdb-vue-organization-chart";
            </script>

Properties

Name Type Default Description
data Object - Setup structure of tree elements.

Events

Name Description
collapse This event fires when a user collapses a tree. Collapsed tree is available with HTML structure (includes also all of the tree's children). 
        
            
            <template>
              <MDBOrganizationChart @collapse="doSomething"/>
            </template>