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.

You can initialize the component with MDBOrganizationChart. 

        
            
                  import { MDBOrganizationChart } from 'mdb-react-organization-chart';

                  export default function App() {
                    const myData = {
                      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' }] },
                          ],
                        },
                      ],
                    };
                  
                    return <MDBOrganizationChart data={myData} />;
                  }

Advanced example

Create organization chart including avatar and name.

        
            
                  import { MDBOrganizationChart } from 'mdb-react-organization-chart';

                  export default function App() {
                    const myData = {
                      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',
                        },
                      ],
                    };
                  
                    return <MDBOrganizationChart data={myData} className='my-class' />;
                  }                  
                    
        
    
        
            
                  .my-class {
                    .organization-card {
                      border-radius: calc(0.5rem - 1px);
                      box-shadow: 0 10px 15px -3px rgb(0 0 0 / 7%), 0 4px 6px -2px rgb(0 0 0 / 5%);
                  
                      & > p {
                        border-radius: calc(0.5rem - 1px) calc(0.5rem - 1px) 0 0;
                        background-color: rgba(18, 102, 241);
                        padding: 0.75rem 1.5rem;
                        margin-bottom: 0;
                        color: #fff;
                      }
                  
                      div {
                        display: flex;
                        flex-direction: column-reverse;
                        padding: 1.5rem;
                  
                        img {
                          margin: 0.5rem auto;
                        }
                      }
                    }
                  }

Mixed example

Create mixed organization chart.

        
            
                  import { MDBOrganizationChart } from 'mdb-react-organization-chart';

                  export default function App() {
                    const myData = {
                      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',
                            },
                          ],
                        },
                      ],
                    };
                  
                    return <MDBOrganizationChart data={myData} className='my-class' />;
                  }
                  
                    
        
    
        
            
                    .my-class {
                      .organization-card {
                        border-radius: calc(0.5rem - 1px);
                        box-shadow: 0 10px 15px -3px rgb(0 0 0 / 7%), 0 4px 6px -2px rgb(0 0 0 / 5%);
                    
                        & > p {
                          border-radius: calc(0.5rem - 1px) calc(0.5rem - 1px) 0 0;
                          background-color: rgba(18, 102, 241);
                          padding: 0.75rem 1.5rem;
                          margin-bottom: 0;
                          color: #fff;
                        }
                    
                        div {
                          display: flex;
                          flex-direction: column-reverse;
                          padding: 1.5rem;
                    
                          img {
                            margin: 0.5rem auto;
                          }
                        }
                      }
                    }

Organization chart - API

Import

        
            
              import { MDBOrganizationChart } from 'mdb-react-organization-chart';

Properties

MDBOrganizationChart

Name Type Default Description Example
className string '' Adds user's custom class to charts wrapping div element <MDBOrganizationChart className="class" />
data DataInterface null Data for chart construction. <MDBOrganizationChart data={myData} />
style React.CSSProperties null Set styles to charts wrapping div element <MDBOrganizationChart style={myStyles} />

Advanced types

DataInterface

        
            
              interface DataInterface {
                label: string;
                name?: string;
                avatar?: string;
                children?: DataInterface[];
              }