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.

Advanced example

Create organization chart including avatar and name.

Mixed example

Create mixed organization chart.

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';