Show / Hide Table of Contents

Controls

Controls are small buttons displayed on the chart that let users quickly perform actions such as exporting, zooming, switching layouts, or fitting the chart to the screen.

You can configure controls through the controls option in your chart configuration.

Example

 
 
controls: {
    pdf_export: { title: 'Export to PDF' },
    fit: { title: "Fit the chart"}
}
BALKAN Code Edit in BALKAN Code

Built-in Controls

OrgChartJS comes with a set of predefined controls that you can enable by adding them to the controls object:

  • svg_export – Exports chart to SVG file
  • pdf_export – Exports chart to PDF file
  • png_export – Exports chart to PNG file
  • visio_export – Exports chart to Visio (VSDX) file
  • pp_export – Exports chart to PowerPoint (PPTX) file
  • pp_preview – Opens a PPTX preview of the chart
  • pdf_preview – Opens a PDF preview of the chart
  • svg_preview – Opens a SVG preview of the chart
  • png_preview – Opens a PNG preview of the chart
  • csv_export – Exports chart to CSV file
  • xml_export – Exports chart to XML file
  • json_export – Exports chart to JSON file
  • fit – Fits chart to the visible screen
  • expand_all – Expands all collapsed nodes
  • full_screen – Toggles fullscreen mode
  • zoom_in – Zooms into the chart
  • zoom_out – Zooms out of the chart
  • layout_mixed – Switches chart layout to Mixed
  • layout_normal – Switches chart layout to Normal
  • layout_right_offset – Switches chart layout to Right Offset
  • layout_left_offset – Switches chart layout to Left Offset
  • layout_tree – Switches chart layout to Tree
  • layout_grid – Switches chart layout to Grid

Positioning Controls

The anchor property specifies where the control is displayed on the chart. It can be set to either:
  • OrgChart.anchor.bottom
  • OrgChart.anchor.bottom_left
  • OrgChart.anchor.bottom_right
  • OrgChart.anchor.left
  • OrgChart.anchor.left_bottom
  • OrgChart.anchor.left_top
  • OrgChart.anchor.right
  • OrgChart.anchor.right_bottom
  • OrgChart.anchor.right_top
  • OrgChart.anchor.top
  • OrgChart.anchor.top_left
  • OrgChart.anchor.top_right
Here is a code example: 
 
 
controls: {
    full_screen: {title: 'test', anchor: OrgChart.anchor.top_left},
},
By default, controls are anchored to the bottom_right of the chart.

Here is a demo for positioning:
BALKAN Code Edit in BALKAN Code

On/Off effect

The isOn property is used to show if the button is "on" or "off".
The value can be true or false. The default value is false 
 
 
controls: {
    full_screen: {title: 'test', isOn: true},
},

Custom Controls

You can add your own control button with a custom title and onClick function:

 
 
  controls: {
    myControl: { 
        title: 'My Control', 
        onClick: function(){
            alert('My Control clicked')
        } 
    }
}
Code demo:
BALKAN Code Edit in BALKAN Code

Custom Icons

Each built-in control comes with a default icon. For custom controls, if you do not set an icon, a default placeholder icon will be shown.

Here is how to use a custom icon:

Define the icon: 

 
 
let expandUpIcon = '<svg width="32px" height="32px"><path stroke-width="3" fill="none" stroke="#757575" d="M8,16 L16,8 L24,16"></path<>line x1="16" y1="8" x2="16" y2="24" stroke-width="3" stroke="#757575"></line></svg>';

Use it for the control: 

 
 
controls: {
    myControl: {
        title: 'Expand Up',
        icon: expandUpIcon,
        onClick: expandUp
    },
},

Full code example:

BALKAN Code Edit in BALKAN Code

The icons could be SVG or HTML
Here is an example of custom animated and google material icons:
BALKAN Code Edit in BALKAN Code

In this article