BALKAN OrgChart JS - JavaScript Org Chart Library | Docs

OrgChart JS Controls: Add Built-in and Custom Controls to Your Organizational Chart ​

OrgChart JS Controls: Add Controls Anywhere Around Your Org Chart in Seconds

If you are searching for a way to add controls to an organizational chart, OrgChart JS gives you a flexible and production-ready solution.

With OrgChart JS Controls, you can place controls on any side or corner of the chart and turn a static diagram into an interactive application.

Why Org Chart Controls Matter ​

In large organizations, users need more than just visualization. They need fast actions near the data they are viewing. Controls help teams:

  • Switch layouts quickly to analyze structure from multiple angles
  • Export chart snapshots to PDF for reporting and sharing
  • Open full-screen mode for focused presentations
  • Trigger custom actions without leaving the chart UI

Built-in OrgChart JS Controls ​

OrgChart JS includes powerful built-in controls such as:

  • Layout switchers
  • PDF export
  • Full screen mode

These built-in options cover common organizational chart workflows out of the box.

Custom Controls in OrgChart JS ​

You can also define your own control and attach any custom logic:

javascript
myControl: {
    title: 'My Control',
    anchor: OrgChart.anchor.right,
    onClick: function () {
        alert('My Control clicked');
    }
}

Use the anchor option to place each control exactly where it makes the most sense for your users.

Control Positioning with anchor ​

One of the most useful features is control placement flexibility. You can position controls on any side or corner of the chart to keep your interface clean and task-oriented.

This is especially valuable when different teams use the same org chart for different goals, such as HR operations, management reporting, or internal directory navigation.

What Custom Controls Can Trigger ​

Controls are not limited to predefined actions. They can trigger:

  • Modals
  • API calls
  • Theme switching
  • Data export
  • Any custom business workflow

This turns your organizational chart into an interactive workspace instead of a read-only visual.

Real-World Use Cases ​

  • HR teams: launch profile modals and employee actions from chart nodes
  • Leadership teams: export current structures for planning sessions
  • Operations teams: trigger API actions for approvals and updates
  • Internal tools: connect controls with filters, themes, and data sync features

Start Building with OrgChart JS ​

With OrgChart JS Controls, you can build a faster and more usable organizational chart experience with minimal code.

Read the full Controls documentation: OrgChart JS Controls Docs