Org Chart Editor

You can modify the arrangement of the Org Chart shapes and their content in the special editor mode. To initialize an org chart in this mode, use a separate instance called DiagramEditor.

The constructor of the editor doesn't differ much from that of the diagram. The constructor function takes as parameters either an HTML container or the document body, and a configuration object. It is obligatory to set the type:"org" config option in this object to initialize Org Chart editor:

var editor = new dhx.DiagramEditor(document.body, { type: "org" });

The editor is populated with data that has the same structure as the data of an Org Chart. Use the parse method to load data into the editor:


Related sample:  Basic editor - DHTMLX Diagram

Using editor with Org chart

It is possible to use the editor together with the org chart, e.g. create an application that will allow switching between the org chart and the editor views and saving changes made in the editor to the diagram.

See the related article for details.

Configuration properties

You can use the following properties specific for the Org Chart Editor in its configuration object:

  • type - (string) the type of the edited diagram, "org" to render an organization chart
  • shapeType - (string) the type of the shapes, "card" by default
  • showApply - (boolean) enables the Apply All button in the editor, true by default
  • showExport - (boolean) enables the Export Data button in the editor, true by default
  • showReset - (boolean) enables the Reset Changes button in the editor, true by default
  • gridStep - (number) sets the size of a grid cell that defines the step of moving a shape, 10 by default


The interface of an org chart in the editor mode consists of three parts:

  • the toolbar with buttons for controlling the editing process

    The toolbar can contain the following buttons:

    • the Reset Changes button that resets all the applied changes to the previous state. This button is shown by default and can be hidden via the showReset option.
    • the Apply All button. This button is shown by default and can be hidden via the showApply option. The button works in tandem with the AfterApply event and is useful if you want to apply changes made in the editor to the diagram. See the example;
    • the Export Data button allows exporting the data of the org chart to the JSON format. This button is shown by default and can be hidden via the showExport option.
    • the Reset and Apply buttons for resetting changes to the previous step or reverting them;
    • the Edit Mode button to hide and show the editor mode;
    • the Zoom group of buttons to zoom a diagram in the editor in and out;
  • the grid area for editing the diagram. It is an area intended for editing the org chart and its shapes. It allows setting exact position for the shapes;
  • the sidebar with a property sheet that provides fields for modifying values of the shapes' attributes.

Modes of Editing

Editing via the interface elements

You can drag shapes to place them on the desired positions relative to the root shape, or drag the root shape to move the whole diagram. In the editing mode each selected shape gets resizing handles. You can pull the handles of an editable shape to change its sizes.

When you click any shape, it becomes editable and gets a personal toolbar with editing options.

The toolbar allows:

  • adding a new child for the selected shape
  • deleting the selected shape (except for the root one)
  • choosing the mode of arranging children of the selected shape (vertical or horizontal)

Editing via the sidebar options

The sidebar of the editor allows adjusting the attributes of the shape:

  • modify the color of a shape header via the related colorpicker;

  • set the left and top offsets to define the position of a shape;

  • set the width and height of a shape;

  • edit the title (for the "img-card" type);

  • edit the text of a shape;

  • load an image for the card and update it (for the "img-card" type).
    An image is loaded from the computer and saved in the base64 format right into the data.

    Note that the size of an image shouldn't be bigger than 60x60 for correct rendering


Editor API

The editor object owns individual methods, properties and events. There is a list of available methods and events applied to the editor object:


  • parse()

loads data into the editor from a local data source

The method takes as a parameter the data that should be parsed into the editor.

var data = [
    // shapes
        "id": "1",
        "text": "Chairman & CEO",
        "title": "Henry Bennett",
        "img": "../common/img/avatar-1.png"
        "id": "2",
        "text": "Manager",
        "title": "Mildred Kim",
        "img": "../common/img/avatar-2.png"
        "id": "3",
        "text": "Technical Director",
        "title": "Jerry Wagner",
        "img": "../common/img/avatar-3.png"
    // connectors
    { "id": "1-2", "from": "1", "to": "2", "type": "line" },
    { "id": "1-3", "from": "1", "to": "3", "type": "line" }
var editor = new dhx.DiagramEditor("editor_container", {type: "org"}); 

You can load data in any supported data format. See the details in the parse article.

Related sample:  Basic editor - DHTMLX Diagram

  • serialize()

serializes the data of the editor into an array of JSON objects

var data = editor.serialize();

The method returns an array of JSON objects for each shape and link from the editor data.

Related sample:  Live Org Chart edit - DHTMLX Diagram

  • import()

imports data from an existing diagram into the editor

The method takes the diagram object as a parameter.


Related sample:  Live Org Chart edit - DHTMLX Diagram

  • paint()

repaints the editor



  • ApplyButton

fires after the Apply All button has been clicked"ApplyAll",function(){
    console.log("The changes are applied")
  • ExportData

fires after the Export Data button has been clicked"ExportData",function() {
    console.log("The data are exported to the JSON format")
  • ResetButton

fires after the Reset Changes button has been clicked"ResetButton",function(){
    console.log("The changes are reset")

Related sample:  Live Org Chart edit - DHTMLX Diagram

  • ShapeMove

fires after a shape has been moved"ShapeMove",function() {
    console.log("The shape is moved")
  • ShapeResize

fires after a shape has been resized"ShapeResize",function() {
    console.log("The shape is resized")
  • Visibility

fires after the Visibility button has been clicked"Visibility",function() {
    console.log("The side panels are hidden")
  • ZoomIn

fires after the Zoom In button has been clicked"ZoomIn",function() {
    console.log("The diagram in the editor is zoomed in")
  • ZoomOut

fires after the Zoom Out button has been clicked"ZoomOut",function() {
    console.log("The diagram in the editor is zoomed out")


It is possible to localize the interface of the Org Chart editor into a desired language. For this, you need to provide the corresponding locale settings via the dhx.i18n.setLocale method. The method takes two parameters: the diagram container and an object that contains rules of localization for a particular country.

dhx.i18n.setLocale("diagram", {
    applyAll: "Apply all",
    resetChanges: "Reset Changes",
    editCard: "Edit Card",
    color: "Color",
    position: "Position",
    size: "Size"

After that, you need to initialize the editor and check how the labels' names have changed.

var editor = new dhx.DiagramEditor(document.body, { 
    type: "org" 
    // other config options
Back to top