Configuration Options

jOrgChart can be configured by passing a JavaScript object to the initialization function. This allows you to customize its behavior and appearance.

How to Pass Options

You pass the options object as the first argument to the .jOrgChart() method.

$(document).ready(function(){
    $("#org-data").jOrgChart({
        chartElement : '#chart-container',
        depth        : 3,
        dragAndDrop  : true
    });
});

Available Options

Here is a complete list of the available configuration options.

chartElement

Specifies the HTML element where the generated organization chart markup will be appended.

  • Type: String (CSS Selector)
  • Default: 'body'
  • Description: Use this to render the chart inside a specific <div> or other container element on your page.

Example:

// Renders the chart inside the element with id="my-chart"
$("#org").jOrgChart({ chartElement: '#my-chart' });

depth

Tells the plugin how many levels of the tree to parse and render. A value of -1 instructs it to render all levels.

  • Type: Number
  • Default: -1
  • Description: This can be useful for performance optimization on very large trees or for showing only the top levels of a hierarchy by default.

Example:

// Renders only the root node and its direct children (2 levels total)
$("#org").jOrgChart({ depth: 2 });

chartClass

The name of the CSS class that is assigned to the top-level container of the generated chart.

  • Type: String
  • Default: 'jOrgChart'
  • Description: This is useful if you need to avoid class name conflicts or apply a specific set of styles to the chart container.

Example:

// The generated chart's container will have the class "my-custom-chart"
$("#org").jOrgChart({ chartClass: 'my-custom-chart' });

dragAndDrop

Determines whether the drag-and-drop feature for reordering tree nodes is enabled.

  • Type: Boolean
  • Default: false
  • Description: Setting this to true enables the functionality. Note: This feature requires the jQuery UI library to be included on your page.

Example:

// Enables drag-and-drop functionality
$("#org").jOrgChart({ dragAndDrop: true });