BALKAN OrgChart React - React Org Chart Library | Docs

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 ​

javascript
controls={{
  pdf_export: { title: 'Export to PDF' },
  fit: { title: "Fit the chart"}
}}

Controls

Built-in Controls ​

OrgChartJS comes with predefined controls that you can enable:

  • svg_export – Export to SVG
  • pdf_export – Export to PDF
  • png_export – Export to PNG
  • visio_export – Export to Visio (VSDX)
  • pp_export – Export to PowerPoint (PPTX)
  • pp_preview – PPTX preview
  • pdf_preview – PDF preview
  • svg_preview – SVG preview
  • png_preview – PNG preview
  • csv_export – Export to CSV
  • xml_export – Export to XML
  • json_export – Export to JSON
  • fit – Fit chart to screen
  • expand_all – Expand all nodes
  • full_screen – Toggle fullscreen
  • zoom_in – Zoom in
  • zoom_out – Zoom out
  • layout_mixed – Mixed layout
  • layout_normal – Normal layout
  • layout_right_offset – Right offset layout
  • layout_left_offset – Left offset layout
  • layout_tree – Tree layout
  • layout_grid – Grid layout

Custom Controls ​

You can add your own control:

javascript
controls: {
    myControl: { 
        title: 'My Control', 
        onClick: function(){
            alert('My Control clicked')
        } 
    }
}

Custom Controls

Custom Icons ​

Each control has a default icon. You can define your own:

javascript
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:

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

Custom Control Icons

The icons can be SVG or HTML.

Example with animated / material icons:

Custom Animated Icons