Organization chart MDB Pro component

Bootstrap 5 Organization chart plugin

Organization Chart presents structure of the organization.

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