ejDiagram

26 Dec 201724 minutes to read

The diagram control provides 2D surface to visualize the data as shapes, lines, text and images. It can be configured to DOM element such as DIV.

Example

Requires

  • module:jquery.js
  • module:jquery.easing.min.js
  • module:jsrender.min.js
  • module:ej.core.js
  • module:ej.draggable.js
  • module:ej.scroller.js
  • module:ej.touch.js
  • module:ej.diagram.js
  • module:ej.diagramcommon.js
  • module:ej.diagraminteraction.js
  • module:ej.diagramsvg.js
  • module:ej.diagramtools.js
  • module:ej.diagramlayout.js
  • module:ej.matrix.js

Members

backgroundColor string

Defines the background color of diagram elements

Default Value:

  • “transparent”

Example

  • HTML
  • <ej-diagram width="1000" height="1000" [pageSettings]="pageSettings" >
        
    </ej-diagram
    
    <ej-diagram width="1000" height="1000" backgroundColor="black" >
        
    </ej-diagram>
  • TS
  • backgroundColor:"whiteSmoke";

    backgroundImage string

    Defines the path of the background image of diagram elements

    Default Value:

    • ””

    Example

    BACKGROUNDIMAGE

    backgroundImage.alignment enum

    Defines how to align the background image over the diagram area.

    Name Description
    None Scales the graphic content non-uniformly to the width and height of the diagram area
    XMinYMin Used to align the image at the top left of diagram area
    XMinYMid Used to align the image at the left center of diagram area
    XMinYMax Used to align the image at the bottom left of diagram area
    XMidYMin Used to align the image at the top center of diagram area
    XMidYMid Used to align the image at the center of diagram area
    XMidYMax Used to align the image at the bottom center of diagram area
    XMaxYMin Used to align the image at the top right of diagram area/node
    XMaxYMid Used to align the image at the right center of diagram area/node
    XMaxYMax Used to align the image at the bottom right of diagram area/node

    Default Value:

    • ej.datavisualization.Diagram.ImageAlignment.XMidYMid

    backgroundImage.scale enum

    Defines how the background image should be scaled/stretched

    Name Description
    None Used to scale the image non-uniformly to the given width/height
    Meet Used to scale the image uniformly so that it fits the viewport
    Slice Used to scale the image uniformly to the maximum

    Default Value:

    backgroundImage.source string

    Sets the source path of the background image

    Default Value:

    • null

    Example

    bridgeDirection enum

    Sets the direction of line bridges.

    Name Description
    Left Used to set the direction of line bridges as left
    Right Used to set the direction of line bridges as right
    Top Used to set the direction of line bridges as top
    Bottom Used to set the direction of line bridges as bottom

    Default Value:

    • ej.datavisualization.Diagram.BridgeDirection.Top

    Example

  • HTML
  • <ej-diagram width="1000" height="1000" [pageSettings]="pageSettings"  [connectors]="connectors"> </ej-diagram>
  • TS
  • connectors:Array<any>;
    	constructor(){
    	    this.connectors=[{
    	        bridgeDirection:ej.datavisualization.Diagram.BridgeDirection.Bottom,
            }];
        }

    commandManager object

    Defines a set of custom commands and binds them with a set of desired key gestures.

    commandManager.commands object

    An object that maps a set of command names with the corresponding command objects

    Default Value:

    • {}

    Example

    COMMANDMANAGER.COMMANDS

    commandManager.commands.canExecute function

    A method that defines whether the command is executable at the moment or not.

    Example

  • TS
  • commandManager: Object;
            constructor(){
                this.commandManager={
                    "clone":{
                        canExecute: function(args){
                            if(args.model.length){
                                return true;
                            }
                        }
                    }
                }
            }

    commandManager.commands.execute function

    A method that defines what to be executed when the key combination is recognized.

    Example

  • TS
  • execute: function(args) {
        this.copy();
        this.paste();
    	},

    commandManager.commands.gesture object

    Defines a combination of keys and key modifiers, on recognition of which the command will be executed

    commandManager.commands.gesture.key enum

    Sets the key value, on recognition of which the command will be executed.

    Name Description
    None No key pressed.
    A The A key.
    B The B key.
    C The C key.
    D The D Key.
    E The E key.
    F The F key.
    G The G key.
    H The H Key.
    I The I key.
    J The J key.
    K The K key.
    L The L Key.
    M The M key.
    N The N key.
    O The O key.
    P The P Key.
    Q The Q key.
    R The R key.
    S The S key.
    T The T Key.
    U The U key.
    V The V key.
    W The W key.
    X The X key.
    Y The Y key.
    Z The Z key.
    Number0 The 0 key.
    Number1 The 1 key.
    Number2 The 2 key.
    Number3 The 3 key.
    Number4 The 4 key.
    Number5 The 5 key.
    Number6 The 6 key.
    Number7 The 7 key.
    Number8 The 8 key.
    Number9 The 9 key.
    Left The LEFT ARROW key.
    Up The UP ARROW key.
    Right The RIGHT ARROW key.
    Down The DOWN ARROW key.
    Escape The ESC key.
    Delete The DEL key.
    Tab The TAB key.
    Enter The ENTER key.

    Default Value:

    • ej.datavisualization.Diagram.Keys.None

    Example

  • TS
  • gesture: {
        key: ej.datavisualization.Diagram.Keys.C,
    }

    commandManager.commands.gesture.keyModifiers enum

    Sets a combination of key modifiers, on recognition of which the command will be executed.

    Name Description
    None No modifiers are pressed.
    Alt The ALT key.
    Control The CTRL key.
    Shift The SHIFT key.

    Default Value:

    • ej.datavisualization.Diagram.KeyModifiers.None

    Example

  • TS
  • constructor(){
    	    this.commandManager={
    	        "clone":{
    	            gesture: {
    	                key: ej.datavisualization.Diagram.Keys.C,
    	                keyModifiers: ej.datavisualization.Diagram.KeyModifiers.Shift
    	            }
    	        }
    	    }
    	}

    commandManager.commands.parameter object

    Defines any additional parameters that are required at runtime

    Default Value:

    • null

    Example

  • TS
  • constructor(){
    	    this.commandManager={
    	        "clone":{
    	            canExecute: function(args){
    	                if(args.model.length){
    	                    return true;
    	                }
    	            },
    	            execute: function(args) {
    	                this.copy();
    	                this.paste();
    	            }
    	        },
    	        parameter:"node"
    	    }
    	}

    connectors array

    A collection of JSON objects where each object represents a connector

    Default Value:

    • []

    Example

  • HTML
  • <ej-diagram width="1000" height="1000"[connectors]="connectors"> </ej-diagram>
  • TS
  • this.connectors = [{
        name:"connector",
        sourcePoint:{
            x:100,
            y:100
        },
        targetPoint:{
            x:200,
            y:200
        }
    }];

    connectors.addInfo object

    To maintain additional information about connectors

    Default Value:

    • null

    Example

  • TS
  • this.connectors = [{
            name:"connector",
                sourcePoint:{
                    x:100,
                    y:100
                },
                targetPoint:{
                    x:200,
                    y:200
                },
            addInfo:"Bidirectional Flow"
            }];

    connectors.bridgeSpace number

    Defines the width of the line bridges

    Default Value:

    • 10

    Example

  • TS
  • this.connectors=[{
                name:"connector1",
                sourcePoint:{
                    x:100,
                    y:100
                },
                targetPoint:{
                    x:200,
                    y:200
                },
                constraints: ej.datavisualization.Diagram.ConnectorConstraints.Default & ~ej.datavisualization.Diagram.ConnectorConstraints.InheritBridging | ej.datavisualization.Diagram.ConnectorConstraints.Bridging
            },
            {
                name:"connector2",
                sourcePoint:{
                    x:1000,
                    y:1000
                },
                targetPoint:{
                    x:2000,
                    y:2000
                },
                bridgeSpace:15,
                constraints: ej.datavisualization.Diagram.ConnectorConstraints.Default & ~ej.datavisualization.Diagram.ConnectorConstraints.InheritBridging | ej.datavisualization.Diagram.ConnectorConstraints.Bridging
            }
            ];

    connectors.constraints enum

    Enables or disables the behaviors of connectors.

    Name Description
    None Disable all connector Constraints
    Select Enables connector to be selected
    Delete Enables connector to be Deleted
    Drag Enables connector to be Dragged
    DragSourceEnd Enables connectors source end to be selected
    DragTargetEnd Enables connectors target end to be selected
    DragSegmentThumb Enables control point and end point of every segment in a connector for editing
    Bridging Enables bridging to the connector
    DragLabel Enables label of node to be Dragged
    InheritBridging Inherit the bridging option defined in the diagram constraints.
    AllowDrop Allows the object to drop over the connector.
    InheritTooltip Inherit the tooltip option defined in the diagram constraints.
    PointerEvents Enables user interaction to the connector
    CrispEdges Enables the contrast between clean edges of connector over rendering speed and geometric precision
    InheritCrispEdges Enables the contrast between clean edges of connector over rendering speed and geometric precision
    DragLimit Enables the contrast between clean edges of connector over rendering speed and geometric precision
    Interaction Enables connector to be selected and dragged.
    Default Enables all constraints

    Default Value:

    • ej.datavisualization.Diagram.ConnectorConstraints.Default

    Example

  • TS
  • this.connectors=[{
                name:"connect1",
                sourcePoint:{
                    x:100,
                    y:100
                },
                targetPoint:{
                    x:200,
                    y:200
                },
                constraints: ej.datavisualization.Diagram.ConnectorConstraints.Default & ~ej.datavisualization.Diagram.ConnectorConstraints.Select };
            }];

    connectors.cornerRadius number

    Defines the radius of the rounded corner

    Default Value:

    • 0

    Example

  • TS
  • this.connectors=[{
            name:"connect1",
            segments:[{ type: "orthogonal"}],
            //setting Corner Radius
            cornerRadius:10,
            sourcePoint:{
                x:100,
                y:100
            },
            targetPoint:{
                x:200,
                y:200
            },
        }];

    connectors.cssClass string

    Configures the styles of shapes

    Default Value:

    • ””

    Example

  • HTML
  • <style>
        .hoverConnector:hover {
            stroke:blue
        }
    </style>
    <ej-diagram width="1000" height="1000" [pageSettings]="pageSettings"  [connectors]="connectors">
    </ej-diagram>
  • TS
  • this.connectors=[{
            name:"connect1",
                sourcePoint:{
                    x:100,
                    y:100
                },
                targetPoint:{
                    x:200,
                    y:200
                },
            cssClass:"hoverConnector",
        }
        ];

    connectors.horizontalAlign enum

    Sets the horizontal alignment of the connector. Applicable, if the parent of the connector is a container.

    Name Description
    Left Used to align text horizontally on left side of node/connector
    Center Used to align text horizontally on center of node/connector
    Right Used to align text horizontally on right side of node/connector

    Default Value:

    • ej.datavisualization.Diagram.HorizontalAlignment.Left

    Example

  • TS
  • this.connectors = [{
        name: "group1",
        type: "group",
        children: [{
            name: "connect1",
            sourcePoint: {
                x: 100,
                y: 100
            },
            targetPoint: {
                x: 200,
                y: 200
            },
            //Set the horizontal alignment
            horizontalAlign: ej.datavisualization.Diagram.HorizontalAlignment.Right
        }]
    }];

    connectors.labels array

    A collection of JSON objects where each object represents a label.

    Default Value:

    • []

    Example

  • TS
  • this.connectors=[{
        name:"connect1",
        segments:[{ type: "orthogonal"}],
        //Connector label collection
        labels:[{ text:"label" }],
            sourcePoint:{
    	            x:100,
    	            y:100
            },
            targetPoint:{
    	            x:200,
    	            y:200
            },
    }];

    connectors.labels.alignment enum

    Defines how the label should be aligned with respect to the segment

    Name Description
    Before Used to align the label either top or left(before) of the connector segment
    Center Used to align the label at center of the connector segment
    After Used to align the label either bottom or right(after) of the connector segment

    Default Value:

    • ej.datavisualization.Diagram.Alignment.Center

    Example

  • TS
  • this.connectors=[{
    	        name:"connect1",
    	        segments:[{ type: "orthogonal"}],
                //Define the labels collection
    	        labels:[{ text:"label" , alignment:"before"}],
    	        sourcePoint:{
    	            x:100,
    	            y:100
    	        },
    	        targetPoint:{
    	            x:200,
    	            y:200
    	        },
    	    }];

    connectors.labels.bold boolean

    Enables/disables the bold style

    Default Value:

    • false

    Example

  • TS
  • this.connectors=[{
    	    name:"connect1",
    	    segments:[{ type: "orthogonal"}],
    	    labels:[{ text:"label" , bold:true}],
                sourcePoint:{
    	            x:100,
    	            y:100
    	    },
    	        targetPoint:{
    	            x:200,
    	            y:200
                },
        }];

    connectors.labels.borderColor string

    Sets the border color of the label

    Default Value:

    • “transparent”

    Example

  • TS
  • this.connectors=[{
            name:"connect1",
            segments:[{ type: "orthogonal"}],
    	    labels:[{ text:"label" , borderColor:"red", borderWidth: 2}],
    	    sourcePoint:{
                x:100,
                y:100
    	    },
    	    targetPoint:{
                x:200,
    	        y:200
            },
        }];

    connectors.labels.borderWidth number

    Sets the border width of the label

    Default Value:

    • 0

    Example

  • TS
  • this.connectors=[{
        name:"connect1",
        segments:[{ type: "orthogonal"}],
        labels:[{ text:"label" , borderColor:"red", borderWidth: 2}],
        sourcePoint:{
            x:100,
            y:100
        },
        targetPoint:{
    	    x:200,
    	    y:200
        },
    }];

    connectors.labels.boundaryConstraints boolean

    Defines whether the label should be aligned within the connector boundaries

    Default Value:

    • true

    Example

  • TS
  • this.connectors=[{
    	name:"connect1",
        segments:[{ type: "orthogonal"}],
    	labels:[{ text:"label" , boundaryConstraints: "false"}],
    	sourcePoint:{
    	    x:100,
    	    y:100
        },
    	targetPoint:{
    	    x:200,
    	    y:200
        },
    	}];

    connectors.labels.fillColor string

    Sets the fill color of the text area

    Default Value:

    • “transparent”

    Example

  • TS
  • this.connectors=[{
    	        name:"connect1",
    	        segments:[{ type: "orthogonal"}],
    	        labels:[{ text:"label", fillColor: "green" }],
    	        sourcePoint:{
    	            x:100,
    	            y:100
    	        },
    	        targetPoint:{
    	            x:200,
    	            y:200
    	        },
    	    }];

    connectors.labels.fontColor string

    Sets the font color of the text

    Default Value:

    • “black”

    Example

  • TS
  • this.connectors=[{
    	name:"connect1",
    	segments:[{ type: "orthogonal"}],
    	labels:[{ text:"label", fontcolor: "green" }],
    	sourcePoint:{
    	    x:100,
    	    y:100
        },
        targetPoint:{
    	    x:200,
    	    y:200
        },
        }];

    connectors.labels.fontFamily string

    Sets the font family of the text

    Default Value:

    • “Arial”

    Example

  • TS
  • this.connectors=[{
    	    name:"connect1",
    	    segments:[{ type: "orthogonal"}],
    	    labels:[{ text:"label", fontcolor: "green",fontFamily:"seugoe UI"}],
    	    sourcePoint:{
    	        x:100,
    	        y:100
            },
    	    targetPoint:{
    	        x:200,
    	        y:200
            },
        }];

    connectors.labels.fontSize number

    Defines the font size of the text

    Default Value:

    • 12

    Example

  • TS
  • this.connectors=[{
    	    name:"connect1",
    	    segments:[{ type: "orthogonal"}],
    	    labels:[{ text:"label", fontSize: 14}],
            sourcePoint:{
    	        x:100,
    	        y:100
            },
    	    targetPoint:{
    	        x:200,
    	        y:200
            },
        }];

    connectors.labels.horizontalAlignment enum

    Sets the horizontal alignment of the label.

    Default Value:

    • ej.datavisualization.Diagram.HorizontalAlignment.Center

    Example

  • TS
  • this.connectors=[{
    	    name:"connect1",
    	    segments:[{ type: "orthogonal"}],
    	    labels:[{ text:"label", offset:{ x:0 }, horizontalAlignment:ej.datavisualization.Diagram.HorizontalAlignment.Left}],
    	    sourcePoint:{
    	        x:100,
    	        y:100
            },
    	    targetPoint:{
    	        x:200,
    	        y:200
            },
        }];

    Sets the hyperlink for the labels in the connectors.

    Default Value:

    • none

    Example

  • TS
  • this.connectors=[{
        name:"connect1",
    	segments:[{ type: "orthogonal"}],
    	labels:[{  "hyperLink": "https://www.syncfusion.com"}],
    	sourcePoint:{
    	    x:100,
    	    y:100
    	    },
    	targetPoint:{
    	    x:200,
    	    y:200
    	    },
    }];

    connectors.labels.italic boolean

    Enables/disables the italic style

    Default Value:

    • false

    Example

  • TS
  • this.connectors=[{
        name:"connect1",
    	segments:[{ type: "orthogonal"}],
    	labels:[{  text:"label", italic:true}],
    	sourcePoint:{
    	    x:100,
    	    y:100
        },
    	targetPoint:{
    	x:200,
    	y:200
        },
    }];

    connectors.labels.mode enum

    Gets whether the label is currently being edited or not.

    Default Value:

    • ej.datavisualization.Diagram.LabelEditMode.Edit

    Example

  • TS
  • @ViewChild('Diagram') diagram: EJComponents<any, any>;
    
    ngAfterViewInit() {
        let connector = this.Diagram.widget.selectionList[0]
        console.log(connector.labels[0].mode);
    }

    connectors.labels.name string

    Sets the unique identifier of the label

    Default Value:

    • ””

    Example

  • TS
  • this.connectors=[{
    	    name:"connect1",
    	    segments:[{ type: "orthogonal"}],
    	    labels:[{  text:"label", name:"label1"}],
    	    sourcePoint:{
    	        x:100,
    	        y:100
            },
    	    targetPoint:{
    	        x:200,
    	        y:200
            },
        }];

    connectors.labels.offset object

    Sets the fraction/ratio(relative to connector) that defines the position of the label

    Default Value:

    • ej.datavisualization.Diagram.Point(0.5, 0.5)

    Example

  • TS
  • this.connectors=[{
        name:"connect1",
    	segments:[{ type: "orthogonal"}],
    	labels:[{  text:"label",offsetX:0 , offsetY:0.5 }],
    	sourcePoint:{
    	    x:100,
    	    y:100
        },
    	targetPoint:{
    	    x:200,
    	    y:200
    	    },
    }];

    connectors.labels.margin object

    Sets the fraction/ratio(relative to connector) that defines the position of the label

    Default Value:

    • ej.datavisualization.Diagram.Point(0.5, 0.5)

    Example

  • HTML
  • this.connectors=[{
    	    name:"connect1",
    	    segments:[{ type: "orthogonal"}],
    	    labels:[{  text:"label",offsetX:0 , offsetY:0.5 }],
    	    sourcePoint:{
    	        x:100,
    	        y:100
            },
    	    targetPoint:{
    	        x:200,
    	        y:200
            },
        }];

    connectors.labels.margin.right number

    To set the margin of the label in right direction

    Default Value:

    • 0

    Example

  • TS
  • this.connectors=[{
        name:"connect1",
    	segments:[{ type: "orthogonal"}],
    	labels:[{text:"label", offset:{ x:0 }, horizontalAlignment:"left", margin:{ right: 105 }}],
    	sourcePoint:{
    	    x:100,
    	    y:100
        },
    	targetPoint:{
    	x:200,
    	y:200
        },
    }];

    connectors.labels.margin.left number

    To set the margin of the label in left direction

    Default Value:

    • 0

    Example

  • TS
  • this.connectors=[{
        name:"connect1",
    	segments:[{ type: "orthogonal"}],
        //Leaves 5px space between the left boundary of connector and label
    	labels:[{text:"label", offset:{ x:0 }, horizontalAlignment:"left", margin:{ left: 5 }}],
    	sourcePoint:{
    	    x:100,
    	    y:100
        },
    	targetPoint:{
    	    x:200,
    	    y:200
        },
    }];

    connectors.labels.margin.top number

    To set the margin of the label in top direction

    Default Value:

    • 0

    Example

  • TS
  • this.connectors=[{
        name:"connect1",
    	segments:[{ type: "orthogonal"}],
        //Leaves 5px space between the left boundary of connector and label
    	labels:[{text:"label", offset:{ x:0 }, horizontalAlignment:"left", margin:{ top: 5 }}],
    	sourcePoint:{
    	    x:100,
    	    y:100
        },
    	targetPoint:{
    	x:200,
    	y:200
        },
    }];

    connectors.labels.margin.bottom number

    To set the margin of the label in bottom direction

    Default Value:

    • 0

    Example

  • TS
  • this.connectors=[{
        name:"connect1",
    	segments:[{ type: "orthogonal"}],
        //Leaves 5px space between the left boundary of connector and label
    	labels:[{text:"label", offset:{ x:0 }, horizontalAlignment:"left", margin:{ bottom: 5 }}],
    	sourcePoint:{
    	    x:100,
    	    y:100
        },
    	targetPoint:{
    	x:200,
    	y:200
    	},
    }];

    connectors.labels.dragLimit object

    Sets the value which is used to drag the label within certain bounds.

    Default Value:

    • null

    connectors.labels.dragLimit.right number

    To set the drag limit of the label in right direction

    Default Value:

    • 10

    Example

  • TS
  • this.connectors=[{
    	    name:"connect1",
    	    segments:[{ type: "orthogonal"}],
            //Leaves 5px space between the left boundary of connector and label
    	    labels:[{text:"label", offset:{ x:0 }, horizontalAlignment:"left", dragLimit:{ right: 5 }}],
    	    sourcePoint:{
    	        x:100,
    	        y:100
            },
    	    targetPoint:{
    	    x:200,
    	    y:200
            },
        }];

    connectors.labels.dragLimit.left number

    To set the drag limit of the label in left direction

    Default Value:

    • 10

    Example

  • TS
  • this.connectors=[{
    	    name:"connect1",
    	    segments:[{ type: "orthogonal"}],
            //Leaves 5px space between the left boundary of connector and label
    	    labels:[{text:"label", offset:{ x:0 }, horizontalAlignment:"left", dragLimit:{ left: 5 }}],
    	    sourcePoint:{
    	        x:100,
    	        y:100
            },
    	    targetPoint:{
    	    x:200,
    	    y:200
            },
        }];

    connectors.labels.dragLimit.top number

    To set the drag limit of the label in top direction

    Default Value:

    • 10

    Example

  • TS
  • this.connectors=[{
    	    name:"connect1",
    	    segments:[{ type: "orthogonal"}],
            //Leaves 5px space between the left boundary of connector and label
    	    labels:[{text:"label", offset:{ x:0 }, horizontalAlignment:"left", dragLimit:{ top: 10 }}],
    	    sourcePoint:{
    	        x:100,
    	        y:100
            },
    	    targetPoint:{
    	        x:200,
    	        y:200
            },
        }];

    connectors.labels.dragLimit.bottom number

    To set the drag limit of the label in bottom direction

    Default Value:

    • 10

    Example

  • TS
  • this.connectors=[{
    	    name:"connect1",
    	    segments:[{ type: "orthogonal"}],
            //Leaves 5px space between the left boundary of connector and label
    	    labels:[{text:"label", offset:{ x:0 }, horizontalAlignment:"left", dragLimit:{ bottom: 10 }}],
    	    sourcePoint:{
    	        x:100,
    	        y:100
            },
    	    targetPoint:{
    	    x:200,
    	    y:200
            },
        }];

    connectors.labels.opacity number

    Defines the transparency of labels

    Default Value:

    • 1

    Example

  • TS
  • this.connectors=[{
    	    name:"connector1",
            labels:[{text:"label", opacity: 0.7}],
    	    sourcePoint:{
    	        x:100,
    	        y:100
            },
    	    targetPoint:{
    	        x:200,
    	        y:200
            },
        }];

    connectors.labels.readOnly boolean

    Defines whether the label is editable or not

    Default Value:

    • false

    Example

  • TS
  • this.connectors=[{
    	    name:"connector1",
            labels:[{text:"label", readOnly:true}],
    	    sourcePoint:{
    	        x:100,
    	        y:100
            },
    	    targetPoint:{
    	    x:200,
    	    y:200
            },
        }];

    connectors.labels.relativeMode enum

    Defines whether the label should be positioned whether relative to segments or connector boundaries

    Name Description
    SegmentPath Sets the relativeMode as SegmentPath
    SegmentBounds Sets the relativeMode as SegmentBounds

    Default Value:

    • ej.datavisualization.Diagram.LabelRelativeMode.SegmentPath

    Example

  • TS
  • this.connectors=[{
    	    name:"connector1",
            labels:[{text:"label", relativeMode:"segmentPath"}],
    	    sourcePoint:{
    	        x:100,
    	        y:100
            },
    	    targetPoint:{
    	        x:200,
    	        y:200
            },
        }];

    connectors.labels.rotateAngle number

    Defines the angle to which the label needs to be rotated

    Default Value:

    • 0

    Example

  • TS
  • this.connectors=[{
        name:"connector1",
        labels:[{text:"label", rotateAngle:90}],
    	sourcePoint:{
    	    x:100,
    	    y:100
        },
    	targetPoint:{
    	    x:200,
    	    y:200
        },
    }];

    connectors.labels.segmentOffset string

    Sets the position of the label with respect to the total segment length

    Default Value:

    • 0.5

    Example

  • TS
  • this.connectors=[{
        name:"connector1",
        labels:[{text:"label", segmentOffset:0.7}],
    	sourcePoint:{
    	    x:100,
    	    y:100
        },
    	targetPoint:{
    	    x:200,
    	    y:200
        },
    }];

    connectors.labels.text string

    Defines the label text

    Default Value:

    • ””

    Example

  • TS
  • this.connectors=[{
            name:"connector1",
            labels:[{text:"label"}],
    	    sourcePoint:{
    	        x:100,
    	        y:100
            },
    	    targetPoint:{
    	        x:200,
    	        y:200
            },
        }];

    connectors.labels.textAlign enum

    Defines how to align the text inside the label.

    Default Value:

    • ej.datavisualization.Diagram.TextAlign.Center

    Example

  • TS
  • this.connectors=[{
            name:"connector1",
            labels:[{text:"label", textAlign:ej.datavisualization.Diagram.TextAlign.Left}],
    	    sourcePoint:{
    	        x:100,
    	        y:100
            },
    	    targetPoint:{
    	        x:200,
    	        y:200
            },
        }];

    connectors.labels.textDecoration enum

    Sets how to decorate the label text.

    Default Value:

    • ej.datavisualization.Diagram.TextDecorations.None

    Example

  • TS
  • this.connectors=[{
        name:"connector1",
        labels:[{text:"label", textDecoration: ej.datavisualization.Diagram.TextDecorations.Underline}],
    	sourcePoint:{
    	    x:100,
    	    y:100
        },
    	targetPoint:{
    	    x:200,
    	    y:200
    	    },
    }];

    connectors.labels.verticalAlignment enum

    Sets the vertical alignment of the label.

    Default Value:

    • ej.datavisualization.Diagram.VerticalAlignment.Center

    Example

  • TS
  • this.connectors=[{
    	    name:"connector1",
            labels:[{text:"label", verticalAlignment:ej.datavisualization.Diagram.VerticalAlignment.Top}],
    	    sourcePoint:{
    	        x:100,
    	        y:100
            },
    	    targetPoint:{
    	        x:200,
    	        y:200
            },
        }];

    connectors.labels.visible boolean

    Enables or disables the visibility of the label

    Default Value:

    • true

    Example

  • TS
  • this.connectors=[{
    	    name:"connector1",
            labels:[{text:"label",visible:false}],
    	    sourcePoint:{
    	        x:100,
    	        y:100
            },
    	    targetPoint:{
    	        x:200,
    	        y:200
            },
    }];

    connectors.labels.width number

    Sets the width of the label(the maximum value of label width and the connector width will be considered as label width)

    Default Value:

    • 50

    Example

  • TS
  • this.connectors=[{
        name:"connector1",
        labels:[{text:"label", width:100}],
    	sourcePoint:{
    	    x:100,
    	    y:100
        },
    	targetPoint:{
    	    x:200,
            y:200
        },
    }];

    connectors.labels.wrapping enum

    Defines how the label text needs to be wrapped.

    Default Value:

    • ej.datavisualization.Diagram.TextWrapping.WrapWithOverflow

    Example

  • TS
  • this.connectors=[{
    	name:"connector1",
        labels:[{text:"Enter Your Text",wrapping:ej.datavisualization.Diagram.TextWrapping.NoWrap}],
    	sourcePoint:{
    	    x:100,
    	    y:100
        },
    	 targetPoint:{
    	    x:200,
    	    y:200
         },
        }];

    connectors.lineColor string

    Sets the stroke color of the connector

    Default Value:

    • “black”

    Example

  • TS
  • this.connectors=[{
    	        name:"connector1",
                labels:[{text:"Connector1"}],
    	        sourcePoint:{
    	            x:100,
    	            y:100
    	        },
    	        targetPoint:{
    	            x:200,
    	            y:200
    	        },
                lineColor:"blue"
    	    }];

    connectors.lineDashArray string

    Sets the pattern of dashes and gaps used to stroke the path of the connector

    Default Value:

    • ””

    Example

  • TS
  • this.connectors=[{
    	        name:"connector1",
                labels:[{text:"Connector1",
    	        sourcePoint:{
    	            x:100,
    	            y:100
    	        },
    	        targetPoint:{
    	            x:200,
    	            y:200
    	        },
                lineColor:"blue",
                lineDashArray: "2,2",
    	    }];

    connectors.lineHitPadding number

    Defines the padding value to ease the interaction with connectors

    Default Value:

    • 10

    Example

  • TS
  • this.connectors=[{
    	        name:"connector1",
                labels:[{text:"Connector1",
    	        sourcePoint:{
    	            x:100,
    	            y:100
    	        },
    	        targetPoint:{
    	            x:200,
    	            y:200
    	        },
                lineHitPadding: 15
    	    }];

    connectors.lineWidth number

    Sets the width of the line

    Default Value:

    • 1

    Example

  • TS
  • this.connectors=[{
    	        name:"connector1",
                labels:[{text:"Connector1",
    	        sourcePoint:{
    	            x:100,
    	            y:100
    	        },
    	        targetPoint:{
    	            x:200,
    	            y:200
    	        },
                lineWidth: 10
    	    }];

    connectors.marginBottom number

    Defines the minimum space to be left between the bottom of parent bounds and the connector. Applicable, if the parent is a container.

    Default Value:

    • 0

    Example

  • TS
  • this.connectors = [{
    	        name: "group1",
    	        type: "group",
    	        children: [{
    	            name: "connect1",
    	            sourcePoint: {
    	                x: 100,
    	                y: 100
    	            },
    	            targetPoint: {
    	                x: 200,
    	                y: 200
    	            },
    	            verticalAlign:"bottom",
    	            marginBottom: 10,
    	            //Set the horizontal alignment
    	            horizontalAlign: ej.datavisualization.Diagram.HorizontalAlignment.Right
    	        }],
    	        container:{type:"canvas"},offsetX:200,offsetY:100,minWidth:200,minHeight:200,fillColor:"gray"
    	
    	    }];

    connectors.marginLeft number

    Defines the minimum space to be left between the left of parent bounds and the connector. Applicable, if the parent is a container.

    Default Value:

    • 0

    Example

  • TS
  • this.connectors = [{
    	        name: "group1",
    	        type: "group",
    	        children: [{
    	            name: "connect1",
    	            sourcePoint: {
    	                x: 100,
    	                y: 100
    	            },
    	            targetPoint: {
    	                x: 200,
    	                y: 200
    	            },
    	            verticalAlign:"bottom",
    	            marginLeft: 10,
    	            //Set the horizontal alignment
    	            horizontalAlign: ej.datavisualization.Diagram.HorizontalAlignment.Right
    	        }],
    	        container:{type:"canvas"},offsetX:200,offsetY:100,minWidth:200,minHeight:200,fillColor:"gray"
    	
    	    }];

    connectors.marginRight number

    Defines the minimum space to be left between the right of parent bounds and the connector. Applicable, if the parent is a container.

    Default Value:

    • 0

    Example

  • TS
  • this.connectors = [{
    	        name: "group1",
    	        type: "group",
    	        children: [{
    	            name: "connect1",
    	            sourcePoint: {
    	                x: 100,
    	                y: 100
    	            },
    	            targetPoint: {
    	                x: 200,
    	                y: 200
    	            },
    	            verticalAlign:"bottom",
    	            marginRight: 10,
    	            //Set the horizontal alignment
    	            horizontalAlign: ej.datavisualization.Diagram.HorizontalAlignment.Right
    	        }],
    	        container:{type:"canvas"},offsetX:200,offsetY:100,minWidth:200,minHeight:200,fillColor:"gray"
    	
    	    }];

    connectors.marginTop number

    Defines the minimum space to be left between the top of parent bounds and the connector. Applicable, if the parent is a container.

    Default Value:

    • 0

    Example

  • TS
  • this.connectors = [{
    	        name: "group1",
    	        type: "group",
    	        children: [{
    	            name: "connect1",
    	            sourcePoint: {
    	                x: 100,
    	                y: 100
    	            },
    	            targetPoint: {
    	                x: 200,
    	                y: 200
    	            },
    	            verticalAlign:"bottom",
    	            marginTop: 10,
    	            //Set the horizontal alignment
    	            horizontalAlign: ej.datavisualization.Diagram.HorizontalAlignment.Right
    	        }],
    	        container:{type:"canvas"},offsetX:200,offsetY:100,minWidth:200,minHeight:200,fillColor:"gray"
    	
    	    }];

    connectors.name string

    Sets a unique name for the connector

    Default Value:

    • ””

    Example

  • TS
  • this.connectors=[{
    	        name:"connect1",
    	        labels:[{text:"Connector1",
    	        sourcePoint:{
    	            x:100,
    	            y:100
    	        },
    	        targetPoint:{
    	            x:200,
    	            y:200
    	        },
    	    }];
    	}

    connectors.opacity number

    Defines the transparency of the connector

    Default Value:

    • 1

    Example

  • TS
  • connectors:Array<any>;
    	labels:Array<any>;
    	constructor(){
    	    this.connectors=[{
    	        name:"connect1",
    	        labels:[{text:"Connector1",
    	        sourcePoint:{
    	            x:100,
    	            y:100
    	        },
    	        targetPoint:{
    	            x:200,
    	            y:200
    	        },
                opacity:0.5,
    	    }];
    	}

    connectors.paletteItem object

    Defines the size and preview size of the node to add that to symbol palette. To explore palette item, refer Palette Item

    Default Value:

    • null

    Example

  • TS
  • palettes: [{
    		name: "Connectors", expanded: true,
    		items: [
    		{
    			name: "connector", sourcePoint:{x: 0, y: 0}, targetPoint:{x:50, y: 50}, 
    			segments:[{ type:"bezier" }],
    			//Sets preview size
    			paletteItem: {
                    previewWidth: 100,
    				previewHeight: 100
    			}
    		}]
    	}]
        }

    connectors.parent string

    Sets the parent name of the connector.

    Default Value:

    • ””

    Example

  • TS
  • this.Connectors=[
                {
                name:"connector1", sourcePoint:{x:100, y:100}, targetPoint:{x:200, y:200}, parent:"group"
            },
            
        ];
            		this.group=[{
    		name :"group", 
            children:["connector1"],
                    }];

    connectors.segments array

    An array of JSON objects where each object represents a segment

    Default Value:

    • [ { type:”straight” } ]

    Example

  • TS
  • this.connectors = [{
        name: "connector1",
        sourcePoint: {
            x: 100,
            y: 100
        },
        targetPoint: {
            x: 200,
            y: 200
        },
        //Defines a collection of segments
        segments: [{ type: "straight", point: { x: 75, y: 150 } }],
    
    }];

    connectors.segments.direction string

    Sets the direction of orthogonal segment

    Default Value:

    • ””

    Example

  • TS
  • this.connectors = [{
    	       name: "connector1",
    	            sourcePoint: {
    	                x: 100,
    	                y: 100
    	            },
    	            targetPoint: {
    	                x: 200,
    	                y: 200
    	            },
    				segments: [{type:"orthogonal", direction:"bottom", length:50}],
    	    }];

    connectors.segments.length number

    Describes the length of orthogonal segment

    Default Value:

    • undefined

    Example

  • TS
  • this.connectors = [{
    	       name: "connector1",
    	            sourcePoint: {
    	                x: 100,
    	                y: 100
    	            },
    	            targetPoint: {
    	                x: 200,
    	                y: 200
    	            },
    				segments: [{type:"orthogonal", direction:"bottom", length:50}],
    	    }];

    connectors.segments.point object

    Describes the end point of bezier/straight segment

    Default Value:

    • Diagram.Point()

    Example

  • TS
  • this.connectors = [{
    	       name: "connector1",
    	            sourcePoint: {
    	                x: 100,
    	                y: 100
    	            },
    	            targetPoint: {
    	                x: 200,
    	                y: 200
    	            },
    				segments: [{type:"orthogonal", direction:"bottom", point: { x:75, y:150 }}],
    	    }];

    connectors.segments.point1 object

    Defines the first control point of the bezier segment

    Default Value:

    • null

    Example

  • TS
  • this.connectors = [{
    	       name: "connector1",
    	            sourcePoint: {
    	                x: 100,
    	                y: 100
    	            },
    	            targetPoint: {
    	                x: 200,
    	                y: 200
    	            },
    				segments: [{ type:"bezier", point1: { x:150, y:50} }],
    	    }];

    connectors.segments.point2 object

    Defines the second control point of bezier segment

    Default Value:

    • null

    Example

  • TS
  • this.connectors = [{
    	       name: "connector1",
    	            sourcePoint: {
    	                x: 100,
    	                y: 100
    	            },
    	            targetPoint: {
    	                x: 200,
    	                y: 200
    	            },
    				segments: [{ type:"bezier", point1: { x:150, y:50}, point2:{ x: 150, y: 150 } }],
    	    }];

    connectors.segments.type enum

    Sets the type of the segment.

    Name Description
    Straight Used to specify the lines as Straight
    Orthogonal Used to specify the lines as Orthogonal
    Bezier Used to specify the lines as Bezier

    Default Value:

    • ej.datavisualization.Diagram.Segments.Straight

    Example

  • TS
  • this.connectors = [{
    	       name: "connector1",
    	            sourcePoint: {
    	                x: 100,
    	                y: 100
    	            },
    	            targetPoint: {
    	                x: 200,
    	                y: 200
    	            },
    				segments: [{ type: ej.datavisualization.Diagram.Segments.Bezier }],
    	    }];

    connectors.segments.vector1 object

    Describes the length and angle between the first control point and the start point of bezier segment

    Default Value:

    • null

    Example

  • TS
  • this.connectors = [{
    	       name: "connector1",
    	            sourcePoint: {
    	                x: 100,
    	                y: 100
    	            },
    	            targetPoint: {
    	                x: 200,
    	                y: 200
    	            },
    				segments: [{ type:"bezier", 
                      vector1: { distance:75, angle: 0}, 
                      vector2: { distance:75, angle: 180} }]
    	    }];

    connectors.segments.vector2 object

    Describes the length and angle between the second control point and end point of bezier segment

    Default Value:

    • null

    Example

  • TS
  • this.connectors = [{
    	       name: "connector1",
    	            sourcePoint: {
    	                x: 100,
    	                y: 100
    	            },
    	            targetPoint: {
    	                x: 200,
    	                y: 200
    	            },
    				segments: [{ type:"bezier", 
                      vector1: { distance:75, angle: 0}, 
                      vector2: { distance:75, angle: 180} }]
    	    }];

    connectors.shape object

    Defines the role/meaning of the connector

    Default Value:

    • null

    connectors.shape.type enum

    Sets the type of the connector

    Name Description
    BPMN Used to specify connector type as BPMN
    UMLClassifier Used to specify connector type as UMLClassifier
    UMLActivity Used to specify connector type as UMLActivity

    Default Value:

    • ej.datavisualization.Diagram.ConnectorShapes.BPMN

    Example

  • TS
  • this.connectors = [{
    	       name: "connector1",
    	            sourcePoint: {
    	                x: 100,
    	                y: 100
    	            },
    	            targetPoint: {
    	                x: 200,
    	                y: 200
    	            },
    				shape:{type:"bpmn"}
    	    }];

    connectors.shape.flow enum

    Sets the type of the flow in a BPMN Process

    Name Description
    Sequence Used to specify the Sequence flow in a BPMN Process
    Association Used to specify the Association flow in a BPMN Process
    Message Used to specify the Message flow in a BPMN Process

    Default Value:

    • ej.datavisualization.Diagram.BPMNFlows.Sequence

    Example

  • TS
  • this.connectors = [{
    	       name: "connector1",
    	            sourcePoint: {
    	                x: 100,
    	                y: 100
    	            },
    	            targetPoint: {
    	                x: 200,
    	                y: 200
    	            },
    				shape:{type:"bpmn", flow: "message"}
    	    }];

    connectors.shape.association enum

    Sets the type of the Association in a BPMN Process

    Name Description
    Default Used to notate default association in a BPMN Process
    Directional Used to notate directional association in a BPMN Process
    BiDirectional User to notate bi-directional association in a BPMN Process

    Default Value:

    • ej.datavisualization.Diagram.AssociationFlows.Default

    Example

  • TS
  • this.connectors = [{
    	       name: "connector1",
    	            sourcePoint: {
    	                x: 100,
    	                y: 100
    	            },
    	            targetPoint: {
    	                x: 200,
    	                y: 200
    	            },
    				shape:{type:"bpmn", flow: "association", association:"bidirectional"}
    	    }];

    connectors.shape.message enum

    Sets the type of the message flow. Applicable, if the connector is of type “BPMN”

    Name Description
    Default Used to notate the default message flow in a BPMN Process
    InitiatingMessage Used to notate the instantiating message flow in a BPMN Process
    NonInitiatingMessage Used to notate the non-instantiating message flow in a BPMN Process

    Default Value:

    • ej.datavisualization.Diagram.BPMNMessageFlows.Default

    Example

  • TS
  • this.connectors = [{
    	       name: "connector1",
    	            sourcePoint: {
    	                x: 100,
    	                y: 100
    	            },
    	            targetPoint: {
    	                x: 200,
    	                y: 200
    	            },
    				shape:{type:"bpmn", flow: "message", message: "ej.datavisualization.Diagram.BPMNMessageFlows.NonInitiatingMessage"}
    	    }];

    connectors.shape.sequence enum

    Sets the type of BPMN sequence flow

    Name Description
    Normal Used to notate the normal sequence flow in a BPMN Process
    Conditional Used to notate the conditional sequence flow in a BPMN Process
    Default Used to notate the default sequence flow in a BPMN Process

    Default Value:

    • ej.datavisualization.Diagram.BPMNSequenceFlows.Normal

    Example

  • TS
  • this.connectors = [{
    	       name: "connector1",
    	            sourcePoint: {
    	                x: 100,
    	                y: 100
    	            },
    	            targetPoint: {
    	                x: 200,
    	                y: 200
    	            },
    				shape:{type:"bpmn", flow: "sequence", sequence: "default"}
    	    }];

    connectors.shape.relationship enum

    Defines the role of the connector in a UML Class Diagram. Applicable, if the type of the connector is “classifier”.

    Name Description
    class Used to define a Class
    Interface Used to define an Interface
    Enumeration Used to define an Enumeration
    Association Used to notate association in UML Class Diagram
    Aggregation Used to notate aggregation in a UML Class Diagram
    Composition Used to notate composition in a UML Class Diagram
    Dependency Used to notate dependency in a UML Class Diagram
    Inheritance Used to notate inheritance in a UML Class Diagram

    Default Value:

    • ej.datavisualization.Diagram.ClassifierShapes.Association

    Example

  • TS
  • this.connectors = [{
    	       name: "connector1",
    	            sourcePoint: {
    	                x: 100,
    	                y: 100
    	            },
    	            targetPoint: {
    	                x: 200,
    	                y: 200
    	            },
    				shape: {type: ej.datavisualization.Diagram.ConnectorShapes.UMLClassifier, relationship: ej.datavisualization.Diagram.ClassifierShapes.Aggregation,
                     }
    	    }];

    connectors.shape.multiplicity object

    Defines the multiplicity option of the connector

    Default Value:

    • null

    connectors.shape.multiplicity.type enum

    Sets the type of the multiplicity. Applicable, if the connector is of type “classifier”

    Name Description
    OneToOne Each entity instance is related to a single instance of another entity
    OneToMany An entity instance can be related to multiple instances of the other entities
    ManyToOne Multiple instances of an entity can be related to a single instance of the other entity
    ManyToMany The entity instances can be related to multiple instances of each other

    Default Value:

    • ej.datavisualization.Diagram.Multiplicity.OneToOne
  • TS
  • this.connectors = [{
    	       name:"connector1", sourcePoint:{x:100, y:100}, targetPoint:{x:200, y:200}, 
                      shape: {type: ej.datavisualization.Diagram.ConnectorShapes.UMLClassifier, relationship: ej.datavisualization.Diagram.ClassifierShapes.Dependency, multiplicity:{type: ej.datavisualization.Diagram.Multiplicity.OneToMany}
                     }
    	    }];

    connectors.shape.multiplicity.source object

    Defines the source label to connector. Applicable, if the connector is of type “UML”

    connectors.shape.multiplicity.source.optional boolean

    Defines the source label to connector. Applicable, if the connector is of type “UML”

    Type Optional Source Target
    OneToOne false false
    OneToMany false true
    ManyToOne true false
    ManyToMany true true

    Default Value:

    • true

    Example

  • TS
  • this.connectors = [{
    	       name:"connector1", sourcePoint:{x:100, y:100}, targetPoint:{x:200, y:200}, 
                      shape: {type: ej.datavisualization.Diagram.ConnectorShapes.UMLClassifier, relationship: ej.datavisualization.Diagram.ClassifierShapes.Dependency, 
                          multiplicity:{
                              type: ej.datavisualization.Diagram.Multiplicity.OneToMany, source: { optional: true, lowerBounds: 89, upperBounds: 67 }}
                     }
    	    }];

    connectors.shape.multiplicity.source.lowerBounds number

    Defines the source label to connector. Applicable, if the connector is of type “UML”

    Default Value:

    • null

    Example

  • TS
  • this.connectors = [{
    	       name:"connector1", sourcePoint:{x:100, y:100}, targetPoint:{x:200, y:200}, 
                      shape: {type: ej.datavisualization.Diagram.ConnectorShapes.UMLClassifier, relationship: ej.datavisualization.Diagram.ClassifierShapes.Dependency, 
                          multiplicity:{
                              type: ej.datavisualization.Diagram.Multiplicity.OneToMany, 
                              source: { optional: true, 
                                  lowerBounds: 1, upperBounds: 10 }}
                     }
    	    }];

    connectors.shape.multiplicity.source.upperBounds number

    Defines the source label to connector. Applicable, if the connector is of type “UML”

    Default Value:

    • null

    Example

  • TS
  • this.connectors = [{
    	       name:"connector1", sourcePoint:{x:100, y:100}, targetPoint:{x:200, y:200}, 
                      shape: {type: ej.datavisualization.Diagram.ConnectorShapes.UMLClassifier, relationship: ej.datavisualization.Diagram.ClassifierShapes.Dependency, 
                          multiplicity:{
                              type: ej.datavisualization.Diagram.Multiplicity.OneToMany, 
                              source: { optional: true, lowerBounds: 1, upperBounds: 10 }}
                     }
    	    }];

    connectors.shape.multiplicity.target object

    Defines the target label to connector. Applicable, if the connector is of type “UML”

    Default Value:

    • true

    Example

  • TS
  • this.connectors = [{
    	       name:"connector1", sourcePoint:{x:100, y:100}, targetPoint:{x:200, y:200}, 
                      shape: {type: ej.datavisualization.Diagram.ConnectorShapes.UMLClassifier, relationship: ej.datavisualization.Diagram.ClassifierShapes.Dependency, 
                          multiplicity:{type: ej.datavisualization.Diagram.Multiplicity.OneToMany,
                              source: { optional: true, lowerBounds: 1, upperBounds: 10 },
                              target: { optional: true, lowerBounds: 1, upperBounds: 10 }}
                     }
    	    }];

    connectors.shape.ActivityFlow enum

    Defines the shape of UMLActivity to connector. Applicable, if the connector is of type UMLActivity

    Name Description
    Object Defines a activity flow as Object in UML Activity Diagram
    Control Defines a activity flow as Control in UML Activity Diagram
    Exception Defines a activity flow as Exception in UML Activity Diagram

    Default Value:

    • ej.datavisualization.Diagram.UMLActivityFlow.Control

    Example

  • TS
  • this.connectors = [{
    	       name: "connector1",
    	            sourcePoint: {
    	                x: 100,
    	                y: 100
    	            },
    	            targetPoint: {
    	                x: 200,
    	                y: 200
    	            },
    				shape: { type: ej.datavisualization.Diagram.ConnectorShapes.UMLActivity, activityFlow: ej.datavisualization.Diagram.UMLActivityFlow.Exception }
    	    }];

    connectors.sourceDecorator object

    Defines the source decorator of the connector

    Default Value:

    • { shape:”arrow”, width: 8, height:8, borderColor:”black”, fillColor:”black” }

    Example

  • TS
  • this.connectors = [{
    	       name: "connector1",
    	            sourcePoint: {
    	                x: 100,
    	                y: 100
    	            },
    	            targetPoint: {
    	                x: 200,
    	                y: 200
    	            },
    				sourceDecorator : { shape:ej.datavisualization.Diagram.DecoratorShapes.OpenArrow }
    	    }];

    connectors.sourceDecorator.borderColor string

    Sets the border color of the source decorator

    Default Value:

    • “black”

    Example

  • TS
  • this.connectors = [{
    	       name: "connector1",
    	            sourcePoint: {
    	                x: 100,
    	                y: 100
    	            },
    	            targetPoint: {
    	                x: 200,
    	                y: 200
    	            },
    				sourceDecorator : { shape:ej.datavisualization.Diagram.DecoratorShapes.OpenArrow ,borderColor:"red"}
    	    }];

    connectors.sourceDecorator.borderWidth number

    Sets the border width of the decorator

    Default Value:

    • 1

    Example

  • TS
  • this.connectors = [{
    	       name: "connector1",
    	            sourcePoint: {
    	                x: 100,
    	                y: 100
    	            },
    	            targetPoint: {
    	                x: 200,
    	                y: 200
    	            },
    				sourceDecorator : { shape:ej.datavisualization.Diagram.DecoratorShapes.OpenArrow ,borderWidth:5}
    	    }];

    connectors.sourceDecorator.fillColor string

    Sets the fill color of the source decorator

    Default Value:

    • “black”

    Example

  • TS
  • this.connectors = [{
    	       name: "connector1",
    	            sourcePoint: {
    	                x: 100,
    	                y: 100
    	            },
    	            targetPoint: {
    	                x: 200,
    	                y: 200
    	            },
    				sourceDecorator : { shape:"circle" , fillColor:"red"}
    	    }];

    connectors.sourceDecorator.height number

    Sets the height of the source decorator

    Default Value:

    • 8

    Example

  • TS
  • this.connectors = [{
    	       name: "connector1",
    	            sourcePoint: {
    	                x: 100,
    	                y: 100
    	            },
    	            targetPoint: {
    	                x: 200,
    	                y: 200
    	            },
    				 sourceDecorator : { width: 10, height:10 }
    	    }];

    connectors.sourceDecorator.pathData string

    Defines the custom shape of the source decorator

    Default Value:

    • ””

    Example

  • TS
  • this.connectors = [{
    	       name: "connector1",
    	            sourcePoint: {
    	                x: 100,
    	                y: 100
    	            },
    	            targetPoint: {
    	                x: 200,
    	                y: 200
    	            },
    				 sourceDecorator : { shape:"path", pathData:"M 376.892,225.284L 371.279,211.95L 376.892,198.617L 350.225,211.95L 376.892,225.284 Z"}
    	    }];

    connectors.sourceDecorator.shape enum

    Defines the shape of the source decorator.

    Name Description
    None Used to set decorator shape as none
    Arrow Used to set decorator shape as Arrow
    OpenArrow Used to set decorator shape as Open Arrow
    Circle Used to set decorator shape as Circle
    Diamond Used to set decorator shape as Diamond
    Path Used to set decorator shape as path

    Default Value:

    • ej.datavisualization.Diagram.DecoratorShapes.Arrow

    Example

  • TS
  • this.connectors = [{
    	       name: "connector1",
    	            sourcePoint: {
    	                x: 100,
    	                y: 100
    	            },
    	            targetPoint: {
    	                x: 200,
    	                y: 200
    	            },
    				 sourceDecorator : { shape: ej.datavisualization.Diagram.DecoratorShapes.Circle }
    	    }];

    connectors.sourceDecorator.width number

    Defines the width of the source decorator

    Default Value:

    • 8

    Example

  • TS
  • this.connectors = [{
    	       name: "connector1",
    	            sourcePoint: {
    	                x: 100,
    	                y: 100
    	            },
    	            targetPoint: {
    	                x: 200,
    	                y: 200
    	            },
    				 sourceDecorator : { width: 10, height:10 } 
    	    }];

    connectors.sourceNode string

    Sets the source node of the connector

    Default Value:

    • ””

    Example

  • TS
  • this.nodes = [{
    	name:"source", offsetX:100, offsetY:100, width: 50, height: 50},
    	{name:"target" ,offsetX:300, offsetY:300, width:50, height:50}];
    	this.connectors = [{
    	    name: "connector1",
    	    sourceNode:"source",
    	    targetNode:"target",
    	    sourcePoint: {
    	        x: 100,
    	        y: 100
    	    },
    	    targetPoint: {
    	        x: 200,
    	        y: 200
    	    },
    	}];

    connectors.sourcePadding number

    Defines the space to be left between the source node and the source point of a connector

    Default Value:

    • 0

    Example

  • TS
  • this.nodes = [{
    	name:"source", offsetX:100, offsetY:100, width: 50, height: 50},
    	{name:"target" ,offsetX:300, offsetY:300, width:50, height:50}];
    	this.connectors = [{
    	    name: "connector1",
    	    sourceNode:"source",
    	    targetNode:"target",
            sourcePadding: 2, 
            targetPadding: 2 ,
    	    sourcePoint: {
    	        x: 100,
    	        y: 100
    	    },
    	    targetPoint: {
    	        x: 200,
    	        y: 200
    	    },
    	}];

    connectors.sourcePoint object

    Describes the start point of the connector

    Default Value:

    • ej.datavisualization.Diagram.Point()

    Example

  • TS
  • this.connectors = [{
    	        name: "connector1",
    	        sourcePoint:{x:100, y:100}, 
    	        targetPoint:{x:200, y:200},
    				  
    	    }];

    connectors.sourcePoint.x number

    Defines the x-coordinate of a position

    Default Value:

    • 0

    Example

  • TS
  • this.connectors = [{
    	        name: "connector1",
    	        sourcePoint:{x:100, y:100}, 
    	        targetPoint:{x:200, y:200},
    				  
    	    }];

    connectors.sourcePoint.y number

    Defines the y-coordinate of a position

    Default Value:

    • 0

    Example

  • TS
  • this.connectors = [{
    	        name: "connector1",
    	        sourcePoint:{x:100, y:100}, 
    	        targetPoint:{x:200, y:200},
    				  
    	    }];

    connectors.sourcePort string

    Sets the source port of the connector

    Default Value:

    • ””

    Example

  • HTML
  • this.nodes = [{
    	name:"source", offsetX:100, offsetY:100, width: 50, height: 50,ports:[{name:"port", offset:{x:1,y:0.5}}]},
    	{name:"target" ,offsetX:300, offsetY:300, width:50, height:50,ports:[{name:"port" , offset:{x:0,y:0.5}}]}];
    	this.connectors = [{
    	    name: "connector1",
    	    sourceNode:"source",
    	    targetNode:"target",
    	    sourcePort:"port",
    	    targetPort:"port",
    	}];

    connectors.targetDecorator object

    Defines the target decorator of the connector

    Default Value:

    • { shape:”arrow”, width: 8, height:8, borderColor:”black”, fillColor:”black” }

    Example

  • TS
  • this.connectors = [{
    	       name: "connector1",
    		        sourcePoint: {
    	                x: 100,
    	                y: 100
    	            },
    	            targetPoint: {
    	                x: 200,
    	                y: 200
    	            },
    				targetDecorator : { shape:ej.datavisualization.Diagram.DecoratorShapes.OpenArrow },
    		}];

    connectors.targetDecorator.borderColor string

    Sets the border color of the decorator

    Default Value:

    • “black”

    Example

  • TS
  • this.connectors = [{
    	       name: "connector1",
    		        sourcePoint: {
    	                x: 100,
    	                y: 100
    	            },
    	            targetPoint: {
    	                x: 200,
    	                y: 200
    	            },
    				targetDecorator : { shape:ej.datavisualization.Diagram.DecoratorShapes.OpenArrow, borderColor:"red" },
    		}];

    connectors.targetDecorator.fillColor string

    Sets the color with which the decorator will be filled

    Default Value:

    • “black”

    Example

  • TS
  • this.connectors = [{
    	       name: "connector1",
    		        sourcePoint: {
    	                x: 100,
    	                y: 100
    	            },
    	            targetPoint: {
    	                x: 200,
    	                y: 200
    	            },
    				targetDecorator : { shape:"circle" , fillColor:"red" },
    		}];

    connectors.targetDecorator.height number

    Defines the height of the target decorator

    Default Value:

    • 8

    Example

  • TS
  • this.connectors = [{
    	       name: "connector1",
    		        sourcePoint: {
    	                x: 100,
    	                y: 100
    	            },
    	            targetPoint: {
    	                x: 200,
    	                y: 200
    	            },
    				targetDecorator : { width:10,height:10 },
    		}];

    connectors.targetDecorator.pathData string

    Defines the custom shape of the target decorator

    Default Value:

    • ””

    Example

  • TS
  • this.connectors = [{
    	       name: "connector1",
    		        sourcePoint: {
    	                x: 100,
    	                y: 100
    	            },
    	            targetPoint: {
    	                x: 200,
    	                y: 200
    	            },
    				targetDecorator : { shape:"path", pathData:"M 376.892,225.284L 371.279,211.95L 376.892,198.617L 350.225,211.95L 376.892,225.284 Z" },
    		}];

    connectors.targetDecorator.shape enum

    Defines the shape of the target decorator.

    Name Description
    None Used to set decorator shape as none
    Arrow Used to set decorator shape as Arrow
    OpenArrow Used to set decorator shape as Open Arrow
    Circle Used to set decorator shape as Circle
    Diamond Used to set decorator shape as Diamond
    Path Used to set decorator shape as path

    Default Value:

    • ej.datavisualization.Diagram.DecoratorShapes.Arrow

    Example

  • TS
  • this.connectors = [{
    	       name: "connector1",
    		        sourcePoint: {
    	                x: 100,
    	                y: 100
    	            },
    	            targetPoint: {
    	                x: 200,
    	                y: 200
    	            },
    				targetDecorator : { shape:ej.datavisualization.Diagram.DecoratorShapes.Circle },
    		}];

    connectors.targetDecorator.width number

    Defines the width of the target decorator

    Default Value:

    • 8

    Example

  • TS
  • this.connectors = [{
    	       name: "connector1",
    		        sourcePoint: {
    	                x: 100,
    	                y: 100
    	            },
    	            targetPoint: {
    	                x: 200,
    	                y: 200
    	            },
                    lineColor:"red"
    				targetDecorator : { width:10,height:10 },
    		}];

    connectors.targetNode string

    Sets the target node of the connector

    Default Value:

    • ””

    Example

  • TS
  • this.nodes = [{
    	name:"source", offsetX:100, offsetY:100, width: 50, height: 50},
    	{name:"target" ,offsetX:300, offsetY:300, width:50, height:50}];
    	this.connectors = [{
    	    name: "connector1",
    	    sourceNode:"source",
    	    targetNode:"target",
    				  
    	}];

    connectors.targetPadding number

    Defines the space to be left between the target node and the target point of the connector

    Default Value:

    • 0

    Example

  • TS
  • this.nodes = [{
    	name:"source", offsetX:100, offsetY:100, width: 50, height: 50},
    	{name:"target" ,offsetX:300, offsetY:300, width:50, height:50}];
    	this.connectors = [{
    	    name: "connector1",
    	    sourceNode:"source",
    	    targetNode:"target",
            sourcePadding:2,
            targetPadding:2,
    				  
    	}];

    connectors.targetPoint object

    Describes the end point of the connector

    Default Value:

    • ej.datavisualization.Diagram.Point()

    Example

  • TS
  • this.nodes = [{
    	name:"source", offsetX:100, offsetY:100, width: 50, height: 50},
    	{name:"target" ,offsetX:300, offsetY:300, width:50, height:50}];
    	this.connectors = [{
    	    name: "connector1",
    	    sourcePoint:{x:100,y:100},
            targetPoint:{x:200,y:200},				  
    	}];

    connectors.targetPort string

    Sets the targetPort of the connector

    Default Value:

    • ””

    Example

  • TS
  • connectors:Array<any>;
    	nodes:Array<any>;
    	labels:Array<any>;
    	constructor(){
    	this.nodes = [{
    	name:"source", offsetX:100, offsetY:100, width: 50, height: 50,ports:[{name:"port", offset:{x:1,y:0.5}}]},
    	{name:"target" ,offsetX:300, offsetY:300, width:50, height:50,ports:[{name:"port" , offset:{x:0,y:0.5}}]}];
    	this.connectors = [{
    	    name: "connector1",
    	    sourceNode:"source",
    	    targetNode:"target",
    	    sourcePort:"port",
    	    targetPort:"port",
    	}];
    	}

    connectors.tooltip object

    Defines the tooltip that should be shown when the mouse hovers over connector. For tooltip properties, refer Tooltip

    Default Value:

    • null

    Example

  • TS
  • this.connectors = [{
    		//Defines connectors
    	       name: "connector1",
    		        sourcePoint: {
    	                x: 100,
    	                y: 100
    	            },
                    targetPoint: {
    	                x: 200,
    	                y: 200
    	            },
    				//Define tooltip
    				constraints: ej.datavisualization.Diagram.ConnectorConstraints.Default & ~ ej.datavisualization.Diagram.ConnectorConstraints.InheritTooltip, 
    		}];
    		this.tooltip = {
    				templateId:"mouseOverTooltip",
    								};
    	}	
    	};

    connectors.verticalAlign enum

    To set the vertical alignment of connector (Applicable,if the parent is group).

    Name Description
    Top Used to align text Vertically on left side of node/connector
    Center Used to align text Vertically on center of node/connector
    Bottom Used to align text Vertically on bottom of node/connector

    Default Value:

    • ej.datavisualization.Diagram.VerticalAlignment.Top

    Example

  • TS
  • this.connectors = [{
    		//Defines connectors
    	       name: "connector1",
    		        sourcePoint: {
    	                x: 100,
    	                y: 100
    	            },
                    targetPoint: {
    	                x: 200,
    	                y: 200
    	            },
                    verticalAlign:ej.datavisualization.Diagram.VerticalAlignment.Bottom
    	}	
    
        this.group=[{name :"group", children:[ "connector1" ], 
                  container: { type: "canvas" }, offsetX:200, offsetY:100, 
                  minWidth:200, minHeight: 200, fillColor:"gray" }]
    	};

    connectors.visible boolean

    Enables or disables the visibility of connector

    Default Value:

    • true

    Example

  • TS
  • this.connectors = [{
    		//Defines connectors
    	       name: "connector1",
    		        sourcePoint: {
    	                x: 100,
    	                y: 100
    	            },
                    targetPoint: {
    	                x: 200,
    	                y: 200
    	            },
                    visible: false
    		}];

    connectors.zOrder number

    Sets the z-index of the connector

    Default Value:

    • 0

    Example

  • TS
  • this.connectors = [{
    		//Defines connectors
    	       name: "connector1",
    		        sourcePoint: {
    	                x: 100,
    	                y: 100
    	            },
                    targetPoint: {
    	                x: 200,
    	                y: 200
    	            },
                    zOrder: 1000,
    		}];

    connectorTemplate object

    Binds the custom JSON data with connector properties

    Default Value:

    • null

    Example

  • TS
  • this.connectors = [{
    		//Defines connectors
    	       name: "connector1",
    		        sourcePoint: {
    	                x: 100,
    	                y: 100
    	            },
                    targetPoint: {
    	                x: 200,
    	                y: 200
    	            },
                    zOrder: 1000,
    		}];
    
            this.connectorTemplate = function (diagram, connector) {
                connector.lineColor="green";
            };

    constraints enum

    Enables/Disables the default behaviors of the diagram.

    Name Description
    None Disables all DiagramConstraints
    APIUpdate Enables/Disables interaction done with the help of API methods
    AllowDrop It shows highlighter on element when we drag any elements and mouse hover onto the another element
    UserInteraction Enables/Disables UserInteraction
    PageEditable Enables/Disables PageEditing
    Bridging Enables/Disables Bridging
    Zoomable Enables/Disables Zooming
    PannableX Enables/Disables panning on horizontal axis
    PannableY Enables/Disables panning on vertical axis
    Pannable Enables/Disables Panning
    Undoable Enables/Disables undo actions
    CrispEdges Enables/Disables the sharp edges
    Resizable Enables/Disables the Diagram size updation on the window resize function
    ZoomTextEditor Enables/Disables the Zooming of labels text editor
    FloatElements Enables/Disables the drag and drop of element from one diagram to the other
    Default Enables all Constraints

    Default Value:

    • ej.datavisualization.Diagram.DiagramConstraints.All

    Example

  • HTML
  • <div>
    <ej-diagram  id="diagram" width="100%" height="600px" [constraints]="constraints">
    </ej-diagram>
    </div>
  • TS
  • //Disables PageEditing
       this.constraints = ej.datavisualization.Diagram.DiagramConstraints.Default & ~ej.datavisualization.Diagram.DiagramConstraints.Bridging

    contextMenu object

    An object to customize the context menu of diagram

    contextMenu.items array

    Defines the collection of context menu items

    Default Value:

    • []

    Example

  • HTML
  • <div>
    <ej-diagram  id="diagram" width="100%" height="600px" [enableContextMenu]="enableContextMenu" [contextMenu]="contextMenu">
    </ej-diagram>
    </div>
  • TS
  • this.contextMenu = {
            // Collection of items
            items: [{
                name: "hyperLink",
                text: "hyperLink",
                image:"",
                "style:""",
            }],
            showCustomMenuItemsOnly: true
        };

    contextMenu.items.text string

    Defines the text for the collection of context menu item

    Default Value:

    • null

    Example

  • HTML
  • <div>
    <ej-diagram  id="diagram" width="100%" height="600px" [enableContextMenu]="enableContextMenu" [contextMenu]="contextMenu">
    </ej-diagram>
    </div>
  • TS
  • this.contextMenu = {
            // Collection of items
            items: [{
                name: "hyperLink",
                text: "hyperLink",
                image:"",
                "style:""",
            }],
            showCustomMenuItemsOnly: true
        };

    contextMenu.items.name string

    Defines the name for the collection of context menu items

    Default Value:

    • null

    Example

  • HTML
  • <div>
    <ej-diagram  id="diagram" width="100%" height="600px" [enableContextMenu]="enableContextMenu" [contextMenu]="contextMenu">
    </ej-diagram>
    </div>
  • TS
  • this.contextMenu = {
            // Collection of items
            items: [{
                name: "hyperLink",
                text: "hyperLink",
                image:"",
                "style:""",
            }],
            showCustomMenuItemsOnly: true
        };

    contextMenu.items.imageUrl string

    Defines the image url for the collection of context menu items

    Default Value:

    • null

    Example

  • HTML
  • <div>
    <ej-diagram  id="diagram" width="100%" height="600px" [enableContextMenu]="enableContextMenu" [contextMenu]="contextMenu">
    </ej-diagram>
    </div>
  • TS
  • this.contextMenu = {
            // Collection of items
            items: [{
                name: "hyperLink",
                text: "hyperLink",
                image:"Images/zoomIn.png",
                "style:""",
            }],
            showCustomMenuItemsOnly: true
        };

    contextMenu.items.cssClass string

    Defines the CssClass for the collection of context menu items

    Default Value:

    • null

    Example

  • HTML
  • <div>
    <ej-diagram  id="diagram" width="100%" height="600px" [enableContextMenu]="enableContextMenu" [contextMenu]="contextMenu">
    </ej-diagram>
    </div>
    
    
    
    <style>
        .menuPlace{
                background-size:14px 14px;
                }
    </style>
  • TS
  • this.contextMenu = {
            // Collection of items
            items: [{
                name: "hyperLink",
                text: "hyperLink",
                image:"Images/zoomIn.png",
                "cssClass":"menuPlace",
                "style:""",
            }],
            };

    contextMenu.items.subItems Array

    Defines the collection of sub items for the context menu items

    Default Value:

    • []

    Example

  • HTML
  • <div>
    <ej-diagram  id="diagram" width="100%" height="600px" [enableContextMenu]="enableContextMenu" [contextMenu]="contextMenu">
    </ej-diagram>
    </div>
  • TS
  • this.contextMenu = {
            // Collection of items
            items: [{
                name: "zoom",
                text: "zoom",
                subItems: [{name: "zoomIn", text: "ZoomIn"}, {name: "zoomOut",text: "ZoomOut"}]
            }],
        };

    contextMenu.showCustomMenuItemsOnly boolean

    To set whether to display the default context menu items or not

    Default Value:

    • false

    Example

  • TS
  • this.contextMenu = {
            showCustomMenuItemsOnly: true
        };
        }
    };

    dataSourceSettings object

    Configures the data source that is to be bound with diagram

    dataSourceSettings.dataSource object

    Defines the data source either as a collection of objects or as an instance of ej.DataManager

    Default Value:

    • null

    Example

  • TS
  • let data = [
            { "Id": "E1", "Name": "Maria Anders", "Designation": "Managing Director" },
            { "Id": "E2" , "Name": "Ana Trujillo", "Designation": "Project Manager", "ReportingPerson": "E1" } ];
    
            dataSourceSettings: { dataSource: data }

    dataSourceSettings.id string

    Sets the unique id of the data source items

    Default Value:

    • ””

    Example

  • TS
  • let data = [
            { "Id": "E1", "Name": "Maria Anders", "Designation": "Managing Director" },
            { "Id": "E2" , "Name": "Ana Trujillo", "Designation": "Project Manager", "ReportingPerson": "E1" } ];
    
            dataSourceSettings: { id: "Id",dataSource: data }

    dataSourceSettings.parent string

    Defines the parent id of the data source item

    Default Value:

    • ’’

    Example

  • TS
  • let data = [
            { "Id": "E1", "Name": "Maria Anders", "Designation": "Managing Director" },
            { "Id": "E2" , "Name": "Ana Trujillo", "Designation": "Project Manager", "ReportingPerson": "E1" } ];
    
            dataSourceSettings: { id: "Id" , parent: "ReportingPerson",dataSource: data }

    dataSourceSettings.query string

    Describes query to retrieve a set of data from the specified datasource

    Default Value:

    • null

    Example

  • TS
  • dataSourceSettings: {dataSource: ej.DataManager({ url: "http://mvc.syncfusion.com/Services/Northwnd.svc/" }),
           query: ej.Query().from("Employees").select("EmployeeID,ReportsTo,FirstName"),
           tableName: "Employees", id: "EmployeeID", parent: "ReportsTo" }

    dataSourceSettings.root string

    Sets the unique id of the root data source item

    Default Value:

    • ””

    Example

  • TS
  • let data = [
            { "Id": "E1", "Name": "Maria Anders", "Designation": "Managing Director" },
            { "Id": "E2" , "Name": "Ana Trujillo", "Designation": "Project Manager", "ReportingPerson": "E1" } ];
    
            dataSourceSettings: { id: "Id", parent: "ReportingPerson", root:"E1", dataSource: data }

    dataSourceSettings.tableName string

    Describes the name of the table on which the specified query has to be executed

    Default Value:

    • null

    Example

  • TS
  • dataSourceSettings: {dataSource: ej.DataManager({ url: "http://mvc.syncfusion.com/Services/Northwnd.svc/" }),
           query: ej.Query().from("Employees").select("EmployeeID,ReportsTo,FirstName"),
    	   //Table name
           tableName: "Employees", 
    	   id: "EmployeeID", parent: "ReportsTo" }

    dataSourceSettings.crudAction object

    Specifies the method name which is used to get the updated data from client side to the server side

    Default Value:

    • null

    Example

  • TS
  • dataSourceSettings: {id: "Name",
        crudAction:
            {
                read: http://js.syncfusion.com/demos/ejservices/api/Diagram/GetNodes
     } }

    dataSourceSettings.crudAction.create string

    Specifies the create method which is used to get the nodes to be added from client side to the server side

    Default Value:

    • null

    Example

  • TS
  • dataSourceSettings: Object;
    
        dataSourceSettings: {id: "Name",
            crudAction:
                {
                    create: "http://js.syncfusion.com/demos/ejservices/api/Diagram/AddNodes",
         } }

    dataSourceSettings.crudAction.update string

    Specifies the update method which is used to get the updated data from client side to the server side

    Default Value:

    • null

    Example

  • TS
  • dataSourceSettings: {id: "Name",
            crudAction:
                {
                    update: "http://js.syncfusion.com/demos/ejservices/api/Diagram/UpdateNodes",
         } }

    dataSourceSettings.crudAction.destroy string

    Specifies the destroy method which is used to get the deleted items data from client side to the server side

    Default Value:

    • null

    Example

  • TS
  • dataSourceSettings: {id: "Name",
            crudAction:
                {
                    destroy: "http://js.syncfusion.com/demos/ejservices/api/Diagram/DeleteNodes"
         } }

    dataSourceSettings.crudAction.read string

    Specifies the read method to get the created nodes from client side to the server side

    Default Value:

    • null

    Example

  • TS
  • dataSourceSettings: {id: "Name",
            crudAction:
                {
                    read: "http://js.syncfusion.com/demos/ejservices/api/Diagram/GetNodes
         } }

    dataSourceSettings.customFields array

    Specifies the custom fields to get the updated data from client side to the server side

    Default Value:

    • []

    Example

  • HTML
  • dataSourceSettings: {id: "Name",
            customFields: ["Description","Color" ] }

    dataSourceSettings.connectionDataSource object

    Defines the data source either as a collection of objects or as an instance of ej.DataManager

    Default Value:

    • null

    Example

  • TS
  • dataSourceSettings: {id: "Name",
            connectionDataSource:
                {
                    id: "Name"
         } }

    dataSourceSettings.connectionDataSource.dataSource string

    Sets the datasource for the connection datasource settings items.

    Default Value:

    • null

    Example

  • TS
  • let data = [
            { "Id": "E1", "Name": "Maria Anders", "Designation": "Managing Director" },
            { "Id": "E2" , "Name": "Ana Trujillo", "Designation": "Project Manager", "ReportingPerson": "E1" } ];
    
            dataSourceSettings: {id: "Name",
                        connectionDataSource:
                        {
                            id: "Name",
                            dataSource:data
                        } }

    dataSourceSettings.connectionDataSource.id string

    Sets the unique id of the connection data source item

    Default Value:

    • null

    Example

  • TS
  • dataSourceSettings: { id: "Name",
                        connectionDataSource:
                        {
                            id: "Name",
                            dataSource:data
                        }}

    dataSourceSettings.connectionDataSource.sourceNode string

    Sets the source node of the connection data source item

    Default Value:

    • null

    Example

  • TS
  • dataSourceSettings: { id: "Name",
                        connectionDataSource:
                        {
                             id: "Name",
                        connectionDataSource:
                        {
                            id: "Name",
                            sourceNode: "SourceNode",
                        }
                        }

    dataSourceSettings.connectionDataSource.targetNode string

    Sets the target node of the connection data source item

    Default Value:

    • null

    Example

  • TS
  • dataSourceSettings: { id: "Name",
                        connectionDataSource:
                        {
                            id: "Name",
                            targetNode: "TargetNode"
                        }
                        }

    dataSourceSettings.connectionDataSource.sourcePointX string

    Sets the sourcePointX value of the connection data source item

    Default Value:

    • null

    Example

  • TS
  • dataSourceSettings: {id: "Name",
                        connectionDataSource:
                        {
                            id: "Name",
                            sourcePointX:200
                          }
                        }

    dataSourceSettings.connectionDataSource.sourcePointY string

    Sets the sourcePointY value of the connection data source item

    Default Value:

    • null

    Example

  • TS
  • dataSourceSettings: {id: "Name",
                        connectionDataSource:
                        {
                            id: "Name",
                            sourcePointY:200
                          }
                        }

    dataSourceSettings.connectionDataSource.targetPointX string

    Sets the targetPoint-x value of the connection data source item

    Default Value:

    • null

    Example

  • TS
  • dataSourceSettings: {id: "Name",
                        connectionDataSource:
                        {
                            id: "Name",
                            targetPointX:200
                          }
                        }

    dataSourceSettings.connectionDataSource.targetPointY string

    Sets the targetPoint-y value of the connection data source item

    Default Value:

    • null

    Example

  • TS
  • dataSourceSettings: {id: "Name",
                        connectionDataSource:
                        {
                            id: "Name",
                            targetPointY:200
                          }
                        }

    dataSourceSettings.connectionDataSource.crudAction object

    Specifies the method name which is used to get updated connectors from client side to the server side

    Default Value:

    • null

    Example

  • TS
  • dataSourceSettings: {
                        id: "Name",
                        connectionDataSource:
                        {
                            id: "Name",
                            sourceNode: "SourceNode",
                            targetNode: "TargetNode",
                            crudAction: {
                            read: http://js.syncfusion.com/demos/ejservices/api/Diagram/GetConnectors"
                            }
                        }
                        }

    dataSourceSettings.connectionDataSource.crudAction.create string

    Specifies the create method which is used to get the connectors to be added from client side to the server side

    Default Value:

    • null

    Example

  • TS
  • dataSourceSettings: {
                        id: "Name",
                        connectionDataSource:
                        {
                            id: "Name",
                            sourceNode: "SourceNode",
                            targetNode: "TargetNode",
                            crudAction: {
                            read: http://js.syncfusion.com/demos/ejservices/api/Diagram/GetConnectors"
                            }
                        }
                        }

    dataSourceSettings.connectionDataSource.crudAction.update string

    Specifies the update method which is used to get the updated connectors from client side to the server side

    Default Value:

    • null

    Example

  • TS
  • dataSourceSettings: {
                        id: "Name",
                        connectionDataSource:
                        {
                            id: "Name",
                            crudAction: {
                                update: http://js.syncfusion.com/demos/ejservices/api/Diagram/UpdateConnectors",
                                }
                            }
                        }

    dataSourceSettings.connectionDataSource.crudAction.destroy string

    Specifies the destroy method which is used to get the deleted items data from client side to the server side

    Default Value:

    • null

    Example

  • TS
  • dataSourceSettings: Object;
    
            dataSourceSettings: {
                        id: "Name",
                        connectionDataSource:
                        {
                            id: "Name",
                            crudAction: {
                                destroy: http://js.syncfusion.com/demos/ejservices/api/Diagram/DeleteConnectors"
                                }
                            }
                        }

    dataSourceSettings.connectionDataSource.crudAction.read string

    Specifies the read method which is used to get the data from client side to the server side

    Default Value:

    • null

    Example

  • TS
  • dataSourceSettings: {id: "Name",
                        connectionDataSource:
                        {
                            id: "Name",
                            crudAction: {
                            read: http://js.syncfusion.com/demos/ejservices/api/Diagram/GetConnectors,
                            }
                        }
                        }

    dataSourceSettings.connectionDataSource.customFields array

    Specifies the custom fields to get the updated data from client side to the server side

    Default Value:

    • []

    Example

  • TS
  • dataSourceSettings: { id: "Name",
                        connectionDataSource:
                        {
                            id: "Name",
                            customFields: [ "Description", "Color"]
                        }
                        }

    defaultSettings object

    Initializes the default values for nodes and connectors

    Default Value:

    • {}

    Example

  • TS
  • this.defaultSettings = {
                node: {
                    fillColor:"red"
                },
            };

    defaultSettings.connector object

    Initializes the default connector properties

    Default Value:

    • null

    Example

  • TS
  • this.defaultSettings = {
        //Apply default styles to all connectors
                connector: {
                    lineColor:"red", lineWidth:4, lineDashArray:"2,2"
                },
            };

    defaultSettings.group object

    Initializes the default properties of groups

    Default Value:

    • null

    Example

  • TS
  • this.defaultSettings = {
       //Disable dragging all groups
                group: {constraints: NodeConstraints.Default & ~NodeConstraints.Drag }
            };

    defaultSettings.node object

    Initializes the default properties for nodes

    Default Value:

    • null

    Example

  • TS
  • this.defaultSettings = {
                node: {
                    fillColor:"red", borderColor:"black"
                },
            };

    drawType object

    Sets the type of JSON object to be drawn through drawing tool

    Default Value:

    • {}

    Example

  • TS
  • this.drawType = {drawType:{type:"node"}}

    enableAutoScroll boolean

    Enables or disables auto scroll in diagram

    Default Value:

    • true

    Example

  • TS
  • this.enableAutoScroll = {enableAutoScroll:false}

    enableContextMenu boolean

    Enables or disables diagram context menu

    Default Value:

    • true

    Example

  • TS
  • this.enableContextMenu = false

    height string

    Specifies the height of the diagram

    Default Value

    • null

    Example

  • HTML
  • <ej-diagram width="1000" height="1000"   >
      
    </ej-diagram>

    historyManager object

    Customizes the undo redo functionality

    historyManager.canPop function

    A method that takes a history entry as argument and returns whether the specific entry can be popped or not

    Example

  • TS
  • @ViewChild('diagram') diagram: EJComponents<any, any>;
    
    //Add a change to history manager
            let entry =  { object: this.node, prevState: this.node.EmployeeInfo };
            this.diagram.widget.model.historyManager.push(entry);
            let newValues = { role: "New role" };
            this.node.EmployeeInfo = newValues;
            //Pop if the change doesn't need to be tracked
            if(this.diagram.widget.model.historyManager.canPop(entry))
            this.diagram.widget.model.historyManager.pop();

    historyManager.closeGroupAction function

    A method that ends grouping the changes

    Example

  • TS
  • let group = this.diagram.widget.model.selectedItems;
    
            // Start to group the changes
            this.diagram.widget.model.historyManager.startGroupAction();
            
            //Makes the changes
            for(let i =0;i<this.group.children.length;i++){
                let option = {};
                let item = this.group.children[i];
                // Updates the fillColor for all the child elements.
                option.fillColor = backgroundColor;
                this.diagram.widget.updateNode(item.name,option);
            }
    
            //Ends grouping the changes
            this.diagram.widget.model.historyManager.closeGroupAction();

    historyManager.pop function

    A method that removes the history of a recent change made in diagram

    Example

  • TS
  • @ViewChild('diagram') diagram: EJComponents<any, any>;
    //Pop the last change
    this.diagram.widget.model.historyManager.pop();

    historyManager.push function

    A method that allows to track the custom changes made in diagram

    Example

  • TS
  • @ViewChild('diagram') diagram: EJComponents<any, any>;
    //Pop the last change
    //Creates a custom entry and adds that to history manager
    let entry = { object: node, prevState: node.EmployeeInfo };
    this.diagram.widget.model.historyManager.push(entry);
    
    //Updates the new information
    let newValue = { role: "New role" };
    node.EmployeeInfo = newValue;

    historyManager.redo function

    Defines what should be happened while trying to restore a custom change

    Default Value:

    • null

    Example

  • TS
  • @ViewChild('diagram') diagram: EJComponents<any, any>;
    //Pop the last change
    this.historyManager ={
        //Called to revert a custom action
    		undo: customUndoRedo,
    		//Called to restore the reverted custom action
    		redo: customUndoRedo
    }
    
    //Method to handle the custom action
     customUndoRedo(args) {
    	let node = args.object;
    	let currentState = node.EmployeeInfo;
    
    	//Resets the state
    	node.EmployeeInfo = args.prevState;
    
    	//Saves the previous state
    	args.prevState = currentState;
    }

    historyManager.redoStack array

    The redoStack property is used to get the number of redo actions to be stored on the history manager. Its an read-only property and the collection should not be modified.

    Default Value:

    • []

    Example

  • TS
  • @ViewChild('diagram') diagram: EJComponents<any, any>;
    //Pop the last change
    this.diagram.widget.model.historyManager.redoStack();

    historyManager.stackLimit number

    The stackLimit property used to restrict the undo and redo actions to a certain limit.

    Default Value:

    • null

    Example

  • TS
  • @ViewChild('diagram') diagram: EJComponents<any, any>;
    //Pop the last change
    this.diagram.widget.model.historyManager.stackLimit();

    historyManager.startGroupAction function

    A method that starts to group the changes to revert/restore them in a single undo or redo

    Example

  • TS
  • let group = this.diagram.widget.model.selectedItems;
    
            // Start to group the changes
            this.diagram.widget.model.historyManager.startGroupAction();
            
            //Makes the changes
            for(let i =0;i<group.children.length;i++){
                let option = {};
                let item = group.children[i];
                // Updates the fillColor for all the child elements.
                option.fillColor = backgroundColor;
                this.diagram.widget.updateNode(item.name,option);
            }
    
            //Ends grouping the changes
            this.diagram.widget.model.historyManager.closeGroupAction();

    historyManager.undo function

    Defines what should be happened while trying to revert a custom change

    Example

  • TS
  • @ViewChild('diagram') diagram: EJComponents<any, any>;
    //Pop the last change
    this.historyManager ={
        //Called to revert a custom action
    		undo: customUndoRedo,
    		//Called to restore the reverted custom action
    		redo: customUndoRedo
    }
    
    //Method to handle the custom action
     customUndoRedo(args) {
    	let node = args.object;
    	let currentState = node.EmployeeInfo;
    
    	//Resets the state
    	node.EmployeeInfo = args.prevState;
    
    	//Saves the previous state
    	args.prevState = currentState;
    }

    historyManager.undoStack array

    The undoStack property is used to get the number of undo actions to be stored on the history manager. Its an read-only property and the collection should not be modified.

    Default Value:

    • []

    Example

  • TS
  • @ViewChild('diagram') diagram: EJComponents<any, any>;
    //Pop the last change
    this.diagram.widget.model.historyManager.undoStack();

    labelRenderingMode enum

    Defines the type of the rendering mode of label.

    Name Description
    HTML Sets the labelRenderingMode as HTML
    SVG Sets the labelRenderingMode as SVG

    Default Value:

    • HTML

    Example

  • TS
  • this.labelRenderingMode = {labelRenderingMode:"svg"};

    layout object

    Automatically arranges the nodes and connectors in a predefined manner.

    layout.bounds object

    Specifies the custom bounds to arrange/align the layout

    Default Value:

    • ej.datavisualization.Diagram.Rectangle()

    Example

  • TS
  • <ej-diagram id="diagramCore" width="100%" height="450" [pageSettings]="pageSettings" [snapSettings]="snapSettings" 
    [dataSourceSettings]="dataSourceSettings" [layout]="layout" >
    </ej-diagram>
    
    
    this.layout = { type:  ej.datavisualization.Diagram.LayoutTypes.RadialTree, horizontalSpacing: 30, verticalSpacing: 30 };

    layout.fixedNode string

    Defines the fixed node with reference to which, the layout will be arranged and fixed node will not be repositioned

    Default Value:

    • ””

    Example

  • TS
  • <ej-diagram id="diagramCore" width="100%" height="450" [pageSettings]="pageSettings" [snapSettings]="snapSettings" 
    [dataSourceSettings]="dataSourceSettings" [layout]="layout" >
    </ej-diagram>
    
    
    this.layout = { fixedNode: "nodeName" };

    layout.getLayoutInfo object

    Customizes the orientation of trees/sub trees. For orientations, see Chart Orientations. For chart types, see Chart Types

    Default Value:

    • null

    Example

  • HTML
  • <ej-diagram id="diagramCore" width="100%" height="450" [pageSettings]="pageSettings" [snapSettings]="snapSettings" 
    [dataSourceSettings]="dataSourceSettings" [layout]="layout" >
    </ej-diagram>
  • TS
  • getLayoutInfo(diagram, node, options){
            options.orientation = "vertical"; 
            options.type = "left"; 
            offset = 10;
    }
    
       this.layout = { getLayoutInfo:getLayoutInfo };

    layout.getConnectorSegments object

    Defines a method to customize the segments based on source and target nodes.

    Default Value:

    • null

    Example

  • TS
  • <ej-diagram id="diagramCore" width="100%" height="450" [pageSettings]="pageSettings" [snapSettings]="snapSettings" 
    [dataSourceSettings]="dataSourceSettings" [layout]="layout" >
    </ej-diagram>
    
    
    getConnectorSegment(diagram, node, options) { };
    
    this.layout = { getConnectorSegments:getConnectorSegment  };

    layout.horizontalSpacing number

    Sets the space to be horizontally left between nodes

    Default Value:

    • 30

    Example

  • TS
  • <ej-diagram id="diagramCore" width="100%" height="450" [pageSettings]="pageSettings" [snapSettings]="snapSettings" 
    [dataSourceSettings]="dataSourceSettings" [layout]="layout" >
    </ej-diagram>
    
    
    
    this.layout = { { horizontalSpacing: 50 }  };

    layout.margin object

    Defines the space to be left between layout bounds and layout.

    Default Value:

    • ej.datavisualization.Diagram.Margin()

    Example

  • HTML
  • <ej-diagram id="diagramCore" width="100%" height="450" [pageSettings]="pageSettings" [snapSettings]="snapSettings" 
    [dataSourceSettings]="dataSourceSettings" [layout]="layout" >
    </ej-diagram>
  • TS
  • this.layout = { { margin:{ left: 10, right: 10, top: 10, bottom: 10}   }};

    layout.horizontalAlignment enum

    Defines how to horizontally align the layout within the layout bounds

    Name Description
    Left Used to align layout horizontally on left side of layout bounds
    Center Used to align layout horizontally on center of layout bounds
    Right Used to align layout horizontally on right side of layout bounds

    Default Value:

    • ej.datavisualization.Diagram.HorizontalAlignment.Center

    Example

  • HTML
  • <ej-diagram id="diagramCore" width="100%" height="450" [pageSettings]="pageSettings" [snapSettings]="snapSettings" 
    [dataSourceSettings]="dataSourceSettings" [layout]="layout" >
    </ej-diagram>
  • TS
  • this.layout = {  horizontalAlignment:ej.datavisualization.Diagram.HorizontalAlignment.Center   };

    layout.verticalAlignment enum

    Defines how to vertically align the layout within the layout bounds

    Name Description
    Top Used to align layout vertically on top of layout bounds
    Center Used to align layout vertically on center of layout bounds
    Bottom Used to align layout vertically on bottom of layout bounds

    Default Value:

    • ej.datavisualization.Diagram.VerticalAlignment.Center

    Example

  • HTML
  • <ej-diagram id="diagramCore" width="100%" height="450" [pageSettings]="pageSettings" [snapSettings]="snapSettings" 
    [dataSourceSettings]="dataSourceSettings" [layout]="layout" >
    </ej-diagram>
  • TS
  • this.layout = {  verticalAlignment:ej.datavisualization.Diagram.VerticalAlignment.Center   };

    layout.orientation enum

    Sets the orientation/direction to arrange the diagram elements.

    Name Description
    TopToBottom Used to set LayoutOrientation from top to bottom
    BottomToTop Used to set LayoutOrientation from bottom to top
    LeftToRight Used to set LayoutOrientation from left to right
    RightToLeft Used to set LayoutOrientation from right to left

    Default Value:

    • ej.datavisualization.Diagram.LayoutOrientations.TopToBottom

    Example

  • HTML
  • <ej-diagram id="diagramCore" width="100%" height="450" [pageSettings]="pageSettings" [snapSettings]="snapSettings" 
    [dataSourceSettings]="dataSourceSettings" [layout]="layout" >
    </ej-diagram>
  • TS
  • this.layout = {  orientation: ej.datavisualization.Diagram.LayoutOrientations.LeftToRight};

    layout.type enum

    Sets the type of the layout based on which the elements will be arranged.

    Name Description
    None Used not to set any specific layout
    HierarchicalTree Used to set layout type as hierarchical layout
    OrganizationalChart Used to set layout type as organizational chart

    Default Value:

    • ej.datavisualization.Diagram.LayoutTypes.None

    Example

  • HTML
  • <ej-diagram id="diagramCore" width="100%" height="450" [pageSettings]="pageSettings" [snapSettings]="snapSettings" 
    [dataSourceSettings]="dataSourceSettings" [layout]="layout" >
    </ej-diagram>
  • TS
  • this.layout = { type: ej.datavisualization.Diagram.LayoutTypes.HierarchicalTree };

    layout.verticalSpacing number

    Sets the space to be vertically left between nodes

    Default Value:

    • 30

    Example

  • HTML
  • <ej-diagram id="diagramCore" width="100%" height="450" [pageSettings]="pageSettings" [snapSettings]="snapSettings" 
    [dataSourceSettings]="dataSourceSettings" [layout]="layout" >
    </ej-diagram>
  • TS
  • this.layout = { verticalSpacing: 50 };

    layout.root string

    Sets the value is used to define the root node of the layout.

    Default Value:

    • 30

    Example

  • HTML
  • <ej-diagram id="diagramCore" width="100%" height="450" [pageSettings]="pageSettings" [snapSettings]="snapSettings" 
    [dataSourceSettings]="dataSourceSettings" [layout]="layout" >
    </ej-diagram>
  • TS
  • this.layout = { root: 'rootNode' };

    locale string

    Defines the current culture of diagram

    Default Value:

    • “en-US”

    Example

    }

  • TS
  • this.locale = { locale: "en-US"  };

    nodes array

    Array of JSON objects where each object represents a node

    Default Value:

    • []

    nodes.activity enum

    Defines the type of BPMN Activity. Applicable, if the node is a BPMN activity.

    Name Description
    None Used to set BPMN Activity as None
    Task Used to set BPMN Activity as Task
    SubProcess Used to set BPMN Activity as SubProcess

    Default Value:

    • ej.datavisualization.Diagram.BPMNActivity.Task

    Example

  • TS
  • this.nodes=[{
                type:"bpmn",
                shape:ej.datavisualization.Diagram.BPMNShapes.Activity,
                Activity:ej.datavisualization.Diagram.BPMNActivity.SubProcess,
                width:50,height:50,offsetX:100,offsetY:100,
            }]

    nodes.addInfo object

    To maintain additional information about nodes

    Default Value:

    • {}

    Example

  • TS
  • constructor(){
            this.addInfo = {TooltipData:"Shares the information with the customer"};
    
    this.nodes=[{
                name: "node1", addInfo: this.addInfo, offsetX:100, offsetY:100, width:50, height:50
            },
            {
                type: "swimlane", name: "swimlane", addInfo: this.addInfo
            },
    }

    nodes.annotation object

    Defines the additional information of a process. It is not directly related to the message flows or sequence flows of the process.

    Default Value:

    • ej.datavisualization.Diagram.BPMNTextAnnotation()

    Example

  • TS
  • this.nodes=[{
                name: "node1", width: 100, height:100, offsetX:50, offsetY:50, 
                type:"bpmn", shape: "activity",
                annotation: { text: "This is a BPMN Activity shape", width: 100, height: 50,
                    angle: -45, length: 150, direction: "top" }
            }];

    nodes.annotation.angle number

    Sets the angle between the BPMN shape and the annotation

    Default Value:

    • 0

    Example

  • TS
  • this.nodes=[{
                name: "node1", width: 100, height:100, offsetX:50, offsetY:50, 
                type:"bpmn", shape: "activity",
                annotation: { text: "This is a BPMN Activity shape", width: 100, height: 50,
                    angle: -45  }
            }];

    nodes.annotation.direction enum

    Sets the direction of the text annotation

    Name Description
    Left Used to set the direction of BPMN Annotation as left
    Right Used to set the direction of BPMN Annotation as right
    Top Used to set the direction of BPMN Annotation as top
    Bottom Used to set the direction of BPMN Annotation as bottom

    Default Value:

    • ej.datavisualization.Diagram.BPMNAnnotationDirections.Left

    Example

  • TS
  • this.nodes=[{
                name: "node1", width: 100, height:100, offsetX:50, offsetY:50, 
                type:"bpmn", shape: "activity",
                annotation: { text: "This is a BPMN Activity shape", 
                    direction:"right", length: 130, angle: -45, 
                    width: 100, height: 50 }
            }];

    nodes.annotation.height number

    Sets the height of the text annotation

    Default Value:

    • 20
  • TS
  • this.nodes=[
                {
                    name: "Patient",offsetX: 100,offsetY: 100,borderWidth: 2,borderColor: "black",type: ej.datavisualization.Diagram.Shapes.UMLClassifier
            },

    nodes.annotation.length number

    Sets the distance between the BPMN shape and the annotation

    Default Value:

    • 0

    Example

  • TS
  • this.nodes=[{
               name: "node1", width: 100, height:100, offsetX:50, offsetY:50, 
    		type:"bpmn", shape: "activity",
            annotation: { text: "This is a BPMN Activity shape", width: 100, height: 50,
               length: 150  } 
            }];

    nodes.annotation.text string

    Defines the additional information about the flow object in a BPMN Process

    Default Value:

    • ””

    Example

  • TS
  • this.nodes=[{
               name: "node1", width: 100, height:100, offsetX:50, offsetY:50, 
    		type:"bpmn", shape: "activity",
            annotation: { text: "This is a BPMN Activity shape", width: 100
                } 
            }];

    nodes.annotation.width number

    Sets the width of the text annotation

    Default Value:

    • 20

    Example

  • TS
  • this.nodes=[{
               name: "node1", width: 100, height:100, offsetX:50, offsetY:50, 
    		type:"bpmn", shape: "activity",
            annotation: { text: "This is a BPMN Activity shape", width: 100
                }
            }];

    nodes.borderColor string

    Sets the border color of node

    Default Value:

    • “black”

    Example

  • TS
  • this.nodes=[{
               name: "node1", width: 50, height:50, offsetX:50, offsetY:50, borderColor: "red"
            }];

    nodes.borderDashArray string

    Sets the pattern of dashes and gaps to stroke the border

    Default Value:

    • ””

    Example

  • TS
  • this.nodes=[{
                name: "node1", width: 50, height:50, offsetX:50, offsetY:50, borderColor: "red" , borderDashArray: "4,2"
            }];

    nodes.borderWidth number

    Sets the border width of the node

    Default Value:

    • 1

    Example

  • TS
  • this.nodes=[{
                name: "node1", width: 50, height:50, offsetX:50, offsetY:50, borderColor: "red" , borderDashArray: "2,2", borderWidth:2
            }];

    nodes.canUngroup boolean

    Defines whether the group can be ungrouped or not

    Default Value:

    • true

    Example

  • TS
  • this.nodes=[
                {
                name: "node1", width: 100, height:100, offsetX:50, offsetY:50, 
                type:"bpmn", shape: "activity",
                annotation: { text: "This is a BPMN Activity shape", 
                    direction:"right", length: 130, angle: -45, 
                    width: 100, height: 50 }
            },
            {
    name:"node2",width:100,height:100,offsetX:200,offsetY:100
            },
        ];
            		this.group=[{
    		name :"group", 
            children:["node1", "node2"],
            canUngroup: false
                    }];

    nodes.children array

    Array of JSON objects where each object represents a child node/connector

    Default Value:

    • []

    Example

  • TS
  • this.nodes=[
                {
                name: "node1", width: 100, height:100, offsetX:50, offsetY:50, 
                type:"bpmn", shape: "activity",
                annotation: { text: "This is a BPMN Activity shape", 
                    direction:"right", length: 130, angle: -45, 
                    width: 100, height: 50 }
            },
            {name:"node2",width:100,height:100,offsetX:200,offsetY:100
            },
        ];
    this.group=[{
                 name :"group", children:["node1", "node2"]
                }];

    nodes.classifier enum

    Sets the type of UML classifier. Applicable, if the node is a UML Class Diagram shape.

    Default Value:

    • ej.datavisualization.Diagram.ClassifierShapes.Class

    Example

  • TS
  • this.nodes=[
                {
                    name: "Patient",offsetX: 100,offsetY: 100,borderWidth: 2,borderColor: "black",type: ej.datavisualization.Diagram.Shapes.UMLClassifier, classifier: ej.datavisualization.Diagram.ClassifierShapes.Class
            },

    nodes.class object

    Defines the name, attributes and methods of a Class. Applicable, if the node is a Class.

    Default Value:

    • null

    Example

  • TS
  • this.nodes=[
                {
                    name: "Patient",offsetX: 100,offsetY: 100,borderWidth: 2,borderColor: "black",type: ej.datavisualization.Diagram.Shapes.UMLClassifier, classifier: ej.datavisualization.Diagram.ClassifierShapes.Class
            },

    nodes.class.name string

    Sets the name of class.

    Default Value:

    • ””

    Example

  • HTML
  • this.nodes=[
                {
                    name: "Patient",offsetX: 100,offsetY: 100,borderWidth: 2,borderColor: "black",type: ej.datavisualization.Diagram.Shapes.UMLClassifier, classifier: ej.datavisualization.Diagram.ClassifierShapes.Class,
                    class: {name: "Patient", }
            },];

    nodes.class.attributes array

    Defines the collection of attributes

    Default Value:

    • []

    Example

  • TS
  • this.nodes=[
                {
                    name: "Patient",offsetX: 100,offsetY: 100,borderWidth: 2,borderColor: "black",type: ej.datavisualization.Diagram.Shapes.UMLClassifier, classifier: ej.datavisualization.Diagram.ClassifierShapes.Class,
                    class: {name: "Patient", attributes: [{ name: "accepted",}], },
            },];

    nodes.class.attributes.name string

    Sets the name of the attribute

    Default Value:

    • ””

    Example

  • TS
  • this.nodes=[
                {
                     name: "Patient",offsetX: 100,offsetY: 100,borderWidth: 2,borderColor: "black",type: ej.datavisualization.Diagram.Shapes.UMLClassifier, classifier: ej.datavisualization.Diagram.ClassifierShapes.Class,
                    class: {name: "Patient", attributes: [{ name: "accepted" }], },
            },];

    nodes.class.attributes.type string

    Sets the data type of attribute

    Default Value:

    • ””

    Example

  • TS
  • this.nodes=[
                {
                    name: "Patient",offsetX: 100,offsetY: 100,borderWidth: 2,borderColor: "black",type: ej.datavisualization.Diagram.Shapes.UMLClassifier, classifier: ej.datavisualization.Diagram.ClassifierShapes.Class,
                    class: {name: "Patient", attributes: [{ name: "accepted", type: "Date", }], },
            },]

    nodes.class.attributes.scope string

    Defines the visibility of the attribute

    Default Value:

    • ej.datavisualization.Diagram.ScopeValueDefaults.Public

    Example

  • TS
  • this.nodes=[
                {
                    name: "Patient",offsetX: 100,offsetY: 100,borderWidth: 2,borderColor: "black",type: ej.datavisualization.Diagram.Shapes.UMLClassifier, classifier: ej.datavisualization.Diagram.ClassifierShapes.Class,
                    class: {name: "Patient", attributes: [{ name: "accepted", type: "Date", scope:"protected" }], },
            },]

    nodes.class.methods array

    Defines the collection of methods of a Class.

    Default Value:

    • []

    Example

  • TS
  • this.nodes=[
                {
                   name: "Patient",offsetX: 100,offsetY: 100,borderWidth: 2,borderColor: "black",type: ej.datavisualization.Diagram.Shapes.UMLClassifier, classifier: ej.datavisualization.Diagram.ClassifierShapes.Class,
                    class: {name: "Patient", methods: [{ name: "getHistory" }]  },
            },]

    nodes.class.methods.name string

    Sets the name of the method.

    Default Value:

    • ””

    Example

  • TS
  • this.nodes=[
                {
                    name: "Patient",offsetX: 100,offsetY: 100,borderWidth: 2,borderColor: "black",type: ej.datavisualization.Diagram.Shapes.UMLClassifier, classifier: ej.datavisualization.Diagram.ClassifierShapes.Class,
                    "class": {name: "Patient", methods: [{ name: "getHistory", arguments: [{name: "Date" }], }]  },
            },]

    nodes.class.methods.arguments array

    Defines the arguments of the method.

    Default Value:

    • []

    Example

  • TS
  • this.nodes=[
                {
                    name: "Patient",offsetX: 100,offsetY: 100,borderWidth: 2,borderColor: "black",type: ej.datavisualization.Diagram.Shapes.UMLClassifier, classifier: ej.datavisualization.Diagram.ClassifierShapes.Class,
                    "class": {name: "Patient", methods: [{ name: "getHistory", arguments: [{name: "Date",type:"String" }], }]  },
            }]

    nodes.class.methods.arguments.name string

    Sets the name of the argument

    Default Value:

    • ””

    Example

  • TS
  • this.nodes=[
                {
                    name: "Patient",offsetX: 100,offsetY: 100,borderWidth: 2,borderColor: "black",type: ej.datavisualization.Diagram.Shapes.UMLClassifier, classifier: ej.datavisualization.Diagram.ClassifierShapes.Class,
                    class: {name: "Patient", methods: [{ name: "getHistory", arguments: [{name: "Date" }], type: "History" }]  },
            },]

    nodes.class.methods.arguments.type string

    Sets the type of the argument

    Default Value:

    • ””

    Example

  • TS
  • this.nodes=[
                {
                     name: "Patient",offsetX: 100,offsetY: 100,borderWidth: 2,borderColor: "black",type: ej.datavisualization.Diagram.Shapes.UMLClassifier, classifier: ej.datavisualization.Diagram.ClassifierShapes.Class,
              class: {name: "Patient", methods: [{ name: "getHistory", arguments: [{name: "Date" }], type: "History" }]  },
            },]

    nodes.class.methods.type string

    Sets the return type of the method

    Default Value:

    • ””

    Example

  • TS
  • this.nodes=[
                {
                    name: "Patient",offsetX: 100,offsetY: 100,borderWidth: 2,borderColor: "black",type: ej.datavisualization.Diagram.Shapes.UMLClassifier, classifier: ej.datavisualization.Diagram.ClassifierShapes.Class,
              class: {name: "Patient", methods: [{ name: "getHistory", arguments: [{name: "Date" }], type: "History" }]  },
            },]

    nodes.class.methods.scope string

    Sets the visibility of the method.

    Default Value:

    • ej.datavisualization.Diagram.ScopeValueDefaults.Public

    Example

  • TS
  • this.nodes=[
                {
                 name: "Patient",offsetX: 100,offsetY: 100,borderWidth: 2,borderColor: "black",type: ej.datavisualization.Diagram.Shapes.UMLClassifier, classifier: ej.datavisualization.Diagram.ClassifierShapes.Class,
              "class": {name: "Patient", methods: [{ name: "getHistory", arguments: [{name: "Date" }], type: "History",scope:"protected" }]  },]

    nodes.collapseIcon object

    Defines the state of the node is collapsed.

    Example

  • TS
  • this.nodes=[
                {
                 name: "node1", width: 75, height:55, offsetX:50, offsetY:50, collapseIcon:{ shape:ej.datavisualization.Diagram.IconShapes.ArrowDown, width:10, height:10 } }]

    nodes.collapseIcon.borderColor string

    Sets the border color for collapse icon of node

    Default Value:

    • “black”

    Example

  • TS
  • this.nodes=[
                {
                 name: "node1", width: 75, height:55, offsetX:50, offsetY:50, collapseIcon:{ shape:ej.datavisualization.Diagram.IconShapes.ArrowDown, width:10, height:10,borderColor: "red"} }]

    nodes.collapseIcon.borderWidth number

    Sets the border width for collapse icon of node

    Default Value:

    • 1

    Example

  • TS
  • this.nodes=[
                {
                 name: "node1", width: 75, height:55, offsetX:50, offsetY:50, 
        collapseIcon:{ shape:ej.datavisualization.Diagram.IconShapes.ArrowDown, width:10, height:10, borderWidth: "2"}  }]

    nodes.collapseIcon.fillColor string

    Sets the fill color for collapse icon of node

    Default Value:

    • “white”

    Example

  • TS
  • this.nodes=[
                {
                 name: "node1", width: 75, height:55, offsetX:50, offsetY:50, collapseIcon:{ shape:ej.datavisualization.Diagram.IconShapes.ArrowDown, width:10, height:10,fillColor: "green"}  }]

    nodes.collapseIcon.height number

    Defines the height for collapse icon of node

    Default Value:

    • “15”

    Example

  • TS
  • this.nodes=[
                {
                 name: "node1", width: 75, height:55, offsetX:50, offsetY:50, collapseIcon:{ shape:ej.datavisualization.Diagram.IconShapes.ArrowDown, width:10, height:10} }]

    nodes.collapseIcon.horizontalAlignment enum

    Sets the horizontal alignment of the icon.

    Name Description
    Left Used to align the icon horizontally on left side of node
    Center Used to align the icon horizontally on center of node
    Right Used to align the icon horizontally on right side of node

    Default Value:

    • ej.datavisualization.Diagram.HorizontalAlignment.Center

    Example

  • TS
  • this.nodes=[
                {
                 name: "node1", width: 75, height:55, offsetX:50, offsetY:50, 
    collapseIcon:{ shape:ej.datavisualization.Diagram.IconShapes.ArrowDown, width:10, height:10, 
    horizontalAlignment:ej.datavisualization.Diagram.HorizontalAlignment.Left }}]

    nodes.collapseIcon.margin object

    To set the margin for the collapse icon of node

    Default Value:

    • ej.datavisualization.Diagram.Margin()

    Example

  • TS
  • this.nodes=[
                {
                 name: "node1", width: 75, height:55, offsetX:50, offsetY:50, 
        collapseIcon:{ shape:ej.datavisualization.Diagram.IconShapes.ArrowDown, width:10, height:10, margin:{ left: 5 }}}]

    nodes.collapseIcon.offset object

    Sets the fraction/ratio(relative to node) that defines the position of the icon

    Default Value:

    • ej.datavisualization.Diagram.Point(0.5, 1)

    Example

  • TS
  • this.nodes=[
                {
                 name: "node1", width: 75, height:55, offsetX:50, offsetY:50, 
        collapseIcon:{ shape:ej.datavisualization.Diagram.IconShapes.ArrowDown, width:10, height:10, offset:ej.datavisualization.Diagram.Point(0,0.5) }}]

    nodes.collapseIcon.shape enum

    Defines the shape of the collapsed state of the node.

    Name Description
    None Used to set collapse icon shape as none
    Arrow Used to set collapse icon shape as Arrow(Up/Down)
    Plus Used to set collapse icon shape as Plus
    Minus Used to set collapse icon shape as Minus
    Path Used to set collapse icon shape as path
    Template Used to set icon shape as template
    Image Used to set icon shape as image

    Default Value:

    • ej.datavisualization.Diagram.IconShapes.None

    Example

  • TS
  • this.nodes=[
                {
                 name: "node1", width: 75, height:55, offsetX:50, offsetY:50, 
    collapseIcon:{ shape:ej.datavisualization.Diagram.IconShapes.ArrowDown, width:10, height:10}}]

    nodes.collapseIcon.verticalAlignment enum

    Sets the vertical alignment of the icon.

    Name Description
    Top Set vertical alignment as top
    Middle Set vertical alignment as middle
    Bottom Set vertical alignment as bottom

    Default Value:

    • ej.datavisualization.Diagram.VerticalAlignment.Center

    Example

  • TS
  • this.nodes=[
                {
                 name: "node1", width: 75, height:55, offsetX:50, offsetY:50, 
    collapseIcon:{ shape:ej.datavisualization.Diagram.IconShapes.ArrowDown, width:10, height:10, 
        verticalAlignment:ej.datavisualization.Diagram.VerticalAlignment.Top }}]

    nodes.connectorPadding number

    Defines the distance to be left between a node and its connections(In coming and out going connections).

    Default Value:

    • 0

    Example

  • TS
  • this.nodes=[
                {
                 name: "node1", width: 50, height:50, offsetX:50, offsetY:50, connectorPadding: 5}]

    nodes.constraints enum

    Enables or disables the default behaviors of the node.

    Name Description
    None Disable all node Constraints
    Select Enables node to be selected
    Delete Enables node to be Deleted
    Drag Enables node to be Dragged
    Rotate Enables node to be Rotated
    Connect Enables node to be connected
    ResizeNorthEast Enables node to be resize north east
    ResizeEast Enables node to be resize east
    ResizeSouthEast Enables node to be resize south east
    ResizeSouth Enables node to be resize south
    ResizeSouthWest Enables node to be resize south west
    ResizeWest Enables node to be resize west
    ResizeNorthWest Enables node to be resize north west
    ResizeNorth Enables node to be resize north
    Resize Enables node to be Resized
    Shadow Enables shadow
    DragLabel Enables label of node to be Dragged
    AllowPan Enables panning should be done while node dragging
    AspectRatio Enables Proportional resize for node
    PointerEvents Enables the user interaction with the node
    CrispEdges Enables contrast between clean edges for the node over rendering speed and geometric precision
    Default Enables all node constraints

    Default Value:

    • ej.datavisualization.Diagram.NodeConstraints.Default

    Example

  • TS
  • this.nodes=[
                {
                 name: "node1", width: 50, height:50, offsetX:50, offsetY:50, 
                    constraints: ej.datavisualization.Diagram.NodeConstraints.Default & ~ej.datavisualization.Diagram.NodeConstraints.Select}]

    nodes.container object

    Defines how the child objects need to be arranged(Either in any predefined manner or automatically). Applicable, if the node is a group.

    Default Value:

    • null

    Example

  • TS
  • this.nodes=[
                {
                    name: "node1", width: 50, height:50, borderColor: "red" , borderDashArray: "4,2"
            },
            {
                name: "node2", width: 50, height:50, borderColor: "red" , borderDashArray: "4,2"
            },
        ];
            		this.group=[{
                        name :"group", children:["node1", "node2"], container: { type: "stack" }, offsetX:200, offsetY:100
                    }];

    nodes.container.orientation string

    Defines the orientation of the container. Applicable, if the group is a container.

    Default Value:

    • “vertical”

    Example

  • TS
  • this.nodes=[
                {
                    name: "node1", width: 50, height:50, borderColor: "red" , borderDashArray: "4,2"
            },
            {
                name: "node2", width: 50, height:50, borderColor: "red" , borderDashArray: "4,2"
            },
        ];
            		this.group=[{
                        name :"group", children:["node1", "node2"], container: { type: "stack", orientation: "horizontal" }, offsetX:200, offsetY:100
                    }];

    nodes.container.type enum

    Sets the type of the container. Applicable if the group is a container.

    Name Description
    Canvas Sets the container type as Canvas
    Stack Sets the container type as Stack

    Default Value:

    • ej.datavisualization.Diagram.ContainerType.Canvas

    Example

  • TS
  • this.nodes=[
                {
                    name: "node1", width: 50, height:50, borderColor: "red" , borderDashArray: "4,2"
            },
            {
                name: "node2", width: 50, height:50, borderColor: "red" , borderDashArray: "4,2"
            },
        ];
            		this.group=[{
                        name :"group", children:[node1, node2], container: { 
    	type: ej.datavisualization.Diagram.ContainerType.Stack }, 
    	offsetX:200, offsetY:100
                    }];

    nodes.cornerRadius number

    Defines the corner radius of rectangular shapes.

    Default Value:

    • 0

    Example

  • TS
  • this.nodes=[
                {
                     name: "node1", width: 50, height:50, offsetX:50, offsetY:50, 
                    type:"basic", shape:"rectangle", cornerRadius:5
            },
            
        ];

    nodes.cssClass string

    Configures the styles of shapes

    Default Value:

    • ””

    Example

  • HTML
  • <style>
        .hoverNode:hover {
            fill:blue
        }
    </style>
  • TS
  • this.nodes=[
                {
                     name: "node", 
                    cssClass: "hoverNode", 
                    width: 50, height: 50, offsetX: 100, offsetY: 100
            },
            
        ];

    nodes.data object

    Defines the BPMN data object

    nodes.data.type enum

    Sets the type of the BPMN Data object

    Name Description
    Input Used to notate the Input type BPMN data object
    Output Used to notate the Output type BPMN data object
    None Used to set BPMN data object type as None

    Default Value:

    • ej.datavisualization.Diagram.BPMNDataObjects.None

    Example

  • TS
  • this.nodes=[
                {
                     name:"dataObject", type: "bpmn", shape:ej.datavisualization.Diagram.BPMNShapes.DataObject, data: { type: ej.datavisualization.Diagram.BPMNDataObjects.Input }, width:50, height: 50, offsetX:100, offsetY:100
            },
            
        ];

    nodes.data.collection boolean

    Defines whether the BPMN data object is a collection or not

    Default Value:

    • false

    Example

  • TS
  • this.nodes=[
                {
                     name:"dataObject", type: "bpmn", shape:ej.datavisualization.Diagram.BPMNShapes.DataObject, data: { type: ej.datavisualization.Diagram.BPMNDataObjects.Input, collection: false }, width:50, height: 50, offsetX:100, offsetY:100
            },
            
        ];

    nodes.enumeration object

    Defines an Enumeration in a UML Class Diagram

    Default Value:

    • null

    Example

  • TS
  • this.nodes=[
                {
                     name: "Enums",offsetX: 100,offsetY: 100,borderWidth: 2,borderColor: "black",type: ej.datavisualization.Diagram.Shapes.UMLClassifier,classifier: ej.datavisualization.Diagram.ClassifierShapes.Enumeration, 
          enumeration:{ name: "AccountType", }
            },
            
        ];

    nodes.enumeration.name string

    Sets the name of the Enumeration

    Default Value:

    • ””

    Example

  • TS
  • this.nodes=[
                {
                     name: "Enums",offsetX: 100,offsetY: 100,borderWidth: 2,borderColor: "black",type: ej.datavisualization.Diagram.Shapes.UMLClassifier,classifier: ej.datavisualization.Diagram.ClassifierShapes.Enumeration, 
          enumeration:{ name: "AccountType", }
            },
            
        ];

    nodes.enumeration.members array

    Defines the collection of enumeration members

    Default Value:

    • []

    Example

  • TS
  • this.nodes=[
                {
                     name: "Enums",offsetX: 100,offsetY: 100,borderWidth: 2,borderColor: "black",type: ej.datavisualization.Diagram.Shapes.UMLClassifier,classifier: ej.datavisualization.Diagram.ClassifierShapes.Enumeration, 
          enumeration:{ name: "AccountType", members: [{ name: "CheckingAccount"}]}
            },
            
        ];

    nodes.enumeration.members.name string

    Sets the name of the enumeration member

    Default Value:

    • ””

    Example

  • TS
  • this.nodes=[
                {
                     name: "Enums",offsetX: 100,offsetY: 100,borderWidth: 2,borderColor: "black",type: ej.datavisualization.Diagram.Shapes.UMLClassifier,classifier: ej.datavisualization.Diagram.ClassifierShapes.Enumeration, 
          enumeration:{ name: "AccountType", members: [{ name: "CheckingAccount"}]}
            },
            
        ];

    nodes.event enum

    Sets the type of the BPMN Events. Applicable, if the node is a BPMN event.

    Name Description
    Start Used to set BPMN Event as Start
    Intermediate Used to set BPMN Event as Intermediate
    End Used to set BPMN Event as End
    NonInterruptingStart Used to set BPMN Event as NonInterruptingStart
    NonInterruptingIntermediate Used to set BPMN Event as NonInterruptingIntermediate
    ThrowingIntermediate Used to set BPMN Event as ThrowingIntermediate

    Default Value:

    • ej.datavisualization.Diagram.BPMNEvents.Start

    Example

  • TS
  • this.nodes=[
                {
                     type: "bpmn", shape: "event" , 
                    event: ej.datavisualization.Diagram.BPMNEvents.Intermediate, width:50, height:50
            },
            
        ];

    nodes.excludeFromLayout boolean

    Defines whether the node can be automatically arranged using layout or not

    Default Value:

    • false

    Example

  • TS
  • this.nodes=[
                {
                    //Manually positioned
                    name: "node1", width: 50, height:50, offsetX:50, offsetY:50, excludeFromLayout: true
            },
            {//Automatically arranged
                name: "node2", width: 50, height:50, borderColor: "red" , borderDashArray: "4,2"
            },
            {
                name: "node3", width: 50, height:50
            },
        ];

    nodes.expandIcon object

    Defines the state of the node is expanded or collapsed.

    Example

  • TS
  • this.nodes=[
                {
                   name: "node1", width: 75, height:55, offsetX:50, offsetY:50, expandIcon:{ shape:ej.datavisualization.Diagram.IconShapes.ArrowDown, width:10, height:10} 
            },
            
        ];

    nodes.expandIcon.borderColor string

    Sets the border color for expand icon of node

    Default Value:

    • “black”

    Example

  • TS
  • this.nodes=[
                {
                  name: "node1", width: 75, height:55, offsetX:50, offsetY:50, expandIcon:{ shape:ej.datavisualization.Diagram.IconShapes.ArrowDown, width:10, height:10,borderColor: "red"} 
            },
            
        ];

    nodes.expandIcon.borderWidth number

    Sets the border width for expand icon of node

    Default Value:

    • 1

    Example

  • TS
  • this.nodes=[
                {
                  name: "node1", width: 75, height:55, offsetX:50, offsetY:50, 
        expandIcon:{ shape:ej.datavisualization.Diagram.IconShapes.ArrowDown, width:10, height:10, borderWidth: "2"}
            },
            
        ];

    nodes.expandIcon.fillColor string

    Sets the fill color for expand icon of node

    Default Value:

    • “white”

    Example

  • TS
  • this.nodes=[
                {
                  name: "node1", width: 75, height:55, offsetX:50, offsetY:50, expandIcon:{ shape:ej.datavisualization.Diagram.IconShapes.ArrowDown, width:10, height:10,fillColor: "green"} 
            },
            
        ];

    nodes.expandIcon.height number

    Defines the height for expand icon of node

    Default Value:

    • “15”

    Example

  • TS
  • this.nodes=[
                {
                  name: "node1", width: 75, height:55, offsetX:50, offsetY:50, expandIcon:{ shape:ej.datavisualization.Diagram.IconShapes.ArrowDown, width:10, height:10}
            },
            
        ];

    nodes.expandIcon.horizontalAlignment enum

    Sets the horizontal alignment of the icon.

    Name Description
    Left Used to align the icon horizontally on left side of node
    Center Used to align the icon horizontally on center of node
    Right Used to align the icon horizontally on right side of node

    Default Value:

    • ej.datavisualization.Diagram.HorizontalAlignment.Center

    Example

  • TS
  • this.nodes=[
                {
                  name: "node1", width: 75, height:55, offsetX:50, offsetY:50, 
    expandIcon:{ shape:ej.datavisualization.Diagram.IconShapes.ArrowDown, width:10, height:10, 
    horizontalAlignment:ej.datavisualization.Diagram.HorizontalAlignment.Left }
            },
            
        ];

    nodes.expandIcon.margin object

    To set the margin for the expand icon of node

    Default Value:

    • ej.datavisualization.Diagram.Margin()

    Example

  • TS
  • this.nodes=[
                {
                  name: "node1", width: 75, height:55, offsetX:50, offsetY:50, 
        expandIcon:{ shape:ej.datavisualization.Diagram.IconShapes.ArrowDown, width:10, height:10, margin:{ left: 5 }}
            },
            
        ];

    nodes.expandIcon.offset object

    Sets the fraction/ratio(relative to node) that defines the position of the icon

    Default Value:

    • ej.datavisualization.Diagram.Point(0.5, 1)

    Example

  • TS
  • this.nodes=[
                {
                  name: "node1", width: 75, height:55, offsetX:50, offsetY:50, 
        expandIcon:{ shape:ej.datavisualization.Diagram.IconShapes.ArrowDown, width:10, height:10, offset:ej.datavisualization.Diagram.Point(0,0.5) }
            },
            
        ];

    nodes.expandIcon.shape enum

    Defines the shape of the expanded state of the node.

    Name Description
    None Used to set expand icon shape as none
    Arrow Used to set expand icon shape as Arrow(Up/Down)
    Plus Used to set expand icon shape as plus
    Minus Used to set expand icon shape as minus
    Path Used to set expand icon shape as path
    Template Used to set icon shape as template
    Image Used to set icon shape as image

    Default Value:

    • ej.datavisualization.Diagram.IconShapes.None

    Example

  • TS
  • this.nodes=[
                {
                  name: "node1", width: 75, height:55, offsetX:50, offsetY:50, 
    expandIcon:{ shape:ej.datavisualization.Diagram.IconShapes.ArrowDown, width:10, height:10}
            },
            
        ];

    nodes.expandIcon.verticalAlignment enum

    Sets the vertical alignment of the icon.

    Name Description
    Top Set vertical alignment as top
    Middle Set vertical alignment as middle
    Bottom Set vertical alignment as bottom

    Default Value:

    • ej.datavisualization.Diagram.VerticalAlignment.Center

    Example

  • TS
  • this.nodes=[
                {
                  name: "node1", width: 75, height:55, offsetX:50, offsetY:50, 
        expandIcon:{ shape:ej.datavisualization.Diagram.IconShapes.ArrowDown, width:10, height:10, 
        verticalAlignment:ej.datavisualization.Diagram.VerticalAlignment.Top }
            },
            
        ];

    nodes.fillColor string

    Defines the fill color of the node

    Default Value:

    • “white”

    Example

  • TS
  • this.nodes=[
                {
                  name: "node1", width: 50, height:50, offsetX:50, offsetY:50, fillColor:"red"
            },
            
        ];

    nodes.gateway enum

    Sets the type of the BPMN Gateway. Applicable, if the node is a BPMN gateway.

    Name Description
    None Used to set BPMN Gateway as None
    Exclusive Used to set BPMN Gateway as Exclusive
    Inclusive Used to set BPMN Gateway as Inclusive
    Parallel Used to set BPMN Gateway as Parallel
    Complex Used to set BPMN Gateway as Complex
    EventBased Used to set BPMN Gateway as EventBased
    ExclusiveEventBased Used to set BPMN Gateway as ExclusiveEventBased
    ParallelEventBased Used to set BPMN Gateway as ParallelEventBased

    Default Value:

    • ej.datavisualization.Diagram.BPMNGateways.None

    Example

  • TS
  • this.nodes=[
                {
                 type: "bpmn", shape: "gateway" , gateway: ej.datavisualization.Diagram.BPMNGateways.Exclusive, width:50, height:50 
            },
            
        ];

    nodes.gradient object

    Paints the node with a smooth transition from one color to another color

    nodes.gradient.LinearGradient object

    Paints the node with linear color transitions

    nodes.gradient.LinearGradient.stops array

    Defines the different colors and the region of color transitions

    Default Value:

    • []

    Example

  • TS
  • this.gradient={
                type: "linear", x1: 0, x2: 50, y1: 0, y2: 50, stops: [
                { color: "white", offset: 0}, { color: "red", offset: 50}]
           };
    
    this.nodes=[
                {
                 name: "Node1", width: 100, height: 100, gradient : gradient
            },
            
        ];

    nodes.gradient.LinearGradient.x1 number

    Defines the left most position(relative to node) of the rectangular region that needs to be painted

    Default Value:

    • 0

    Example

  • TS
  • this.gradient={
                type: "linear", x1: 0, x2: 100, y1: 0, y2: 100, stops: [
                { color: "white", offset: 0}, { color: "red", offset: 100}]
           };
    
           this.nodes=[
                {
                 name: "Node1", width: 100, height: 100, gradient : gradient
            },
            
        ];

    nodes.gradient.LinearGradient.x2 number

    Defines the right most position(relative to node) of the rectangular region that needs to be painted

    Default Value:

    • 0

    Example

  • TS
  • this.gradient={
                type: "linear", x1: 0, x2: 100, y1: 0, y2: 100, stops: [
                { color: "white", offset: 0}, { color: "red", offset: 100}]
           };
    
           this.nodes=[
                {
                 name: "Node1", width: 100, height: 100, gradient : gradient
            },
            
        ];

    nodes.gradient.LinearGradient.y1 number

    Defines the top most position(relative to node) of the rectangular region that needs to be painted

    Default Value:

    • 0

    Example

  • TS
  • this.gradient={
                type: "linear", x1: 0, x2: 100, y1: 0, y2: 100, stops: [
                { color: "white", offset: 0}, { color: "red", offset: 100}]
           };
    
           this.nodes=[
                {
                 name: "Node1", width: 100, height: 100, gradient : gradient
            },
            
        ];

    nodes.gradient.LinearGradient.y2 number

    Defines the bottom most position(relative to node) of the rectangular region that needs to be painted

    Default Value:

    • 0

    Example

  • TS
  • this.gradient={
                type: "linear", x1: 0, x2: 100, y1: 0, y2: 100, stops: [
                { color: "white", offset: 0}, { color: "red", offset: 100}]
           };
    
           this.nodes=[
                {
                 name: "Node1", width: 100, height: 100, gradient : gradient
            },
            
        ];

    nodes.gradient.RadialGradient object

    Paints the node with radial color transitions. A focal point defines the beginning of the gradient, and a circle defines the end point of the gradient.

    nodes.gradient.RadialGradient.cx number

    Defines the position of the outermost circle

    Default Value:

    • 0

    Example

  • TS
  • this.nodes=[
                {
                    //Manually positioned
                    name: "node", width: 50, height: 50, offsetX: 100, offsetY:100,
                    gradient:{ type:"radial", fx:50, fy:50, 
                    cx:50, cy:50,
                    stops:[{color:"white", offset:0 }, {color:"red", offset:100}] }
                
            },

    nodes.gradient.RadialGradient.cy number

    Defines the outer most circle of the radial gradient

    Default Value:

    • 0

    Example

  • TS
  • this.nodes=[
                {
                    //Manually positioned
                    name: "node", width: 50, height: 50, offsetX: 100, offsetY:100,
                    gradient:{ type:"radial", fx:50, fy:50, 
                    cx:50, cy:50,
                    stops:[{color:"white", offset:0 }, {color:"red", offset:100}] }
                
            },

    nodes.gradient.RadialGradient.fx number

    Defines the innermost circle of the radial gradient

    Default Value:

    • 0

    Example

  • TS
  • this.nodes=[
                {
                    name: "node", width: 50, height: 50, offsetX: 100, offsetY:100,
                    gradient:{ type:"radial", 
                    fx:50, fy:50, 
                    cx:50, cy:50,
                    stops:[{color:"white", offset:0 }, {color:"red", offset:100}] }
                
            },

    nodes.gradient.RadialGradient.fy number

    Defines the innermost circle of the radial gradient

    Default Value:

    • 0

    Example

  • TS
  • this.nodes=[
                {
                    name: "node", width: 50, height: 50, offsetX: 100, offsetY:100,
                    gradient:{ type:"radial", 
                    fx:50, fy:50, 
                    cx:50, cy:50,
                    stops:[{color:"white", offset:0 }, {color:"red", offset:100}] }
                
            },

    nodes.gradient.RadialGradient.stops array

    Defines the different colors and the region of color transitions.

    Default Value:

    • []

    Example

  • TS
  • this.nodes=[
                {
                    name: "node", width: 50, height: 50, offsetX: 100, offsetY:100,
                    gradient:
                    { 
                        type:"radial", fx:50, fy:50, 
                         cx:50, cy:50,
                        stops:[{color:"white", offset:0 }, 
                        { color:"red", offset:100 }] }
                
            },

    nodes.gradient.Stop object

    Defines the color and a position where the previous color transition ends and a new color transition starts

    nodes.gradient.Stop.color string

    Sets the color to be filled over the specified region

    Default Value:

    • ””

    Example

  • TS
  • this.nodes=[
                {
                    name: "node", width: 50, height: 50, offsetX: 100, offsetY:100,
                    gradient:{ type:"radial", fx:50, fy:50, 
                    cx:50, cy:50,
                    stops:[
                        {color:"white", offset:0 }, 
                        {color:"red", offset:100}] } 
            },]

    nodes.gradient.Stop.offset number

    Sets the position where the previous color transition ends and a new color transition starts

    Default Value:

    • 0

    Example

  • TS
  • this.nodes=[
                {
                    name: "node", width: 50, height: 50, offsetX: 100, offsetY:100,
                    gradient:{ type:"radial", fx:50, fy:50, 
                    cx:50, cy:50,
                    stops:[
                        {color:"white", offset:0 }, 
                        {color:"red", offset:100}] } 
            },]

    nodes.gradient.Stop.opacity number

    Describes the transparency level of the region

    Default Value:

    • 1

    Example

  • TS
  • this.nodes=[
                {
                    name: "node", width: 50, height: 50, offsetX: 100, offsetY:100,
                    gradient:{ type:"radial", fx:50, fy:50, cx:50, cy:70,
                       stops:[
                       {color:"white", offset:0 }, 
                       //Sets the opacity
                       {color:"red", offset:100, opacity: 0.5}] } 
            },]

    nodes.group object

    Sets the type of the BPMN Shapes as group. Applicable, if the node is a BPMN.

    Default Value:

    • ej.datavisualization.Diagram.BPMNShapes

    Example

  • TS
  • this.nodes=[
                {
                    type: "bpmn", shape: ej.datavisualization.Diagram.BPMNShapes.Group
            },]

    nodes.header object

    Defines the header of a swimlane/lane

    Default Value:

    • { text: “Title”, fontSize: 11 }

    Example

  • TS
  • this.nodes=[
                {
                    type: "swimlane", name: "swimlane", header: { text: "Swimlane", fontSize: 12, bold: true }
            },]

    nodes.height number

    Defines the height of the node

    Default Value:

    • 0

    Example

  • TS
  • this.nodes=[
                {
                    name: "node1", width: 50, height:150, offsetX:50, offsetY:50
            },]

    nodes.horizontalAlign enum

    Sets the horizontal alignment of the node. Applicable, if the parent of the node is a container.

    Name Description
    Left Used to align text horizontally on left side of node/connector
    Center Used to align text horizontally on center of node/connector
    Right Used to align text horizontally on right side of node/connector

    Default Value:

    • ej.datavisualization.Diagram.HorizontalAlignment.Left

    Example

  • TS
  • this.nodes=[
                {
                    name: "node1", width: 50, height:50
                
            },
            {
                name: "node2", width: 50, height:50, borderColor: "red" , borderDashArray: "4,2",horizontalAlign: ej.datavisualization.Diagram.HorizontalAlignment.Right
            },
            {
                name: "node3", width: 50, height:50
            },
        ];
            		this.group=[{
                        name :"group", children:[ "node1", "node2" ], container: { type: "canvas" }, offsetX:200, offsetY:100, minWidth:200, minHeight: 200, fillColor:"gray"
                    }];

    nodes.inEdges array

    A read only collection of the incoming connectors/edges of the node

    Default Value:

    • []

    Example

  • TS
  • //Read the incoming connections to the selected node
    let node = this.diagram.widget.selectionList[0];
            this.diagram.widget.addSelection(node);
            for(let i=0;i<node.inEdges.length;i++){
            console.log(node.inEdges[i]);
            }

    nodes.interface object

    Defines an interface in a UML Class Diagram

    Default Value:

    • null

    Example

  • TS
  • this.nodes=[
                {
                    name: "Bank",offsetX: 100,offsetY: 100,borderWidth: 2,borderColor: "black",type: ej.datavisualization.Diagram.Shapes.UMLClassifier, classifier: ej.datavisualization.Diagram.ClassifierShapes.Interface
                
            },
        ];

    nodes.interface.name string

    Sets the name of the interface

    Default Value:

    • ””

    Example

  • TS
  • this.nodes=[
                {
                    name: "Bank",offsetX: 100,offsetY: 100,borderWidth: 2,borderColor: "black",type: ej.datavisualization.Diagram.Shapes.UMLClassifier, classifier: ej.datavisualization.Diagram.ClassifierShapes.Interface,
              "interface": {name: "BankAccount",}
                
            },
        ];

    nodes.interface.attributes array

    Defines a collection of attributes of the interface

    Default Value:

    • []

    Example

  • TS
  • this.nodes=[
                {
                    name: "Bank",offsetX: 100,offsetY: 100,borderWidth: 2,borderColor: "black",type: ej.datavisualization.Diagram.Shapes.UMLClassifier, classifier: ej.datavisualization.Diagram.ClassifierShapes.Interface,
              "interface": {name: "BankAccount", attributes: [{ name: "ownar"}], },
                
            },
        ];

    nodes.interface.attributes.name string

    Sets the name of the attribute

    Default Value:

    • ””

    Example

  • TS
  • this.nodes=[
                {
                    name: "Bank",offsetX: 100,offsetY: 100,borderWidth: 2,borderColor: "black",type: ej.datavisualization.Diagram.Shapes.UMLClassifier, classifier: ej.datavisualization.Diagram.ClassifierShapes.Interface,
              "interface": {name: "BankAccount", attributes: [{ name: "ownar"}], },
                
            },
        ];

    nodes.interface.attributes.type string

    Sets the type of the attribute

    Default Value:

    • ””

    Example

  • TS
  • this.nodes=[
                {
                   name: "Bank",offsetX: 100,offsetY: 100,borderWidth: 2,borderColor: "black",type: ej.datavisualization.Diagram.Shapes.UMLClassifier, classifier: ej.datavisualization.Diagram.ClassifierShapes.Interface,
              "interface": {name: "BankAccount", attributes: [{ name: "ownar",  type: "String[*]" ,  }], },
                
            },
        ];

    nodes.interface.attributes.scope string

    Sets the visibility of the attribute

    Default Value:

    • ””

    Example

  • TS
  • this.nodes=[
                {
                   name: "Bank",offsetX: 100,offsetY: 100,borderWidth: 2,borderColor: "black",type: ej.datavisualization.Diagram.Shapes.UMLClassifier, classifier: ej.datavisualization.Diagram.ClassifierShapes.Interface,
              "interface": {name: "BankAccount", attributes: [{ name: "ownar",  type: "String[*]",scope:"protected" }], },
                
            },
        ];

    nodes.interface.methods array

    Defines the collection of public methods of an interface

    Default Value:

    • []

    Example

  • TS
  • this.nodes=[
                {
                   name: "Bank",offsetX: 100,offsetY: 100,borderWidth: 2,borderColor: "black",type: ej.datavisualization.Diagram.Shapes.UMLClassifier, classifier: ej.datavisualization.Diagram.ClassifierShapes.Interface,
              "interface": {name: "BankAccount",methods: [{ name: "deposit", }]  },
                
            },
        ];

    nodes.interfaces.methods.name string

    Sets the name of the method.

    Default Value:

    • ””

    Example

  • TS
  • this.nodes=[
                {
                   name: "Bank",offsetX: 100,offsetY: 100,borderWidth: 2,borderColor: "black",type: ej.datavisualization.Diagram.Shapes.UMLClassifier, classifier: ej.datavisualization.Diagram.ClassifierShapes.Interface,
              "interface": {name: "BankAccount",methods: [{ name: "deposit", }]  },
                
            },
        ];

    nodes.interface.methods.arguments array

    Defines the collection of arguments of a method

    Default Value:

    • []

    Example

  • TS
  • this.nodes=[
                {
                   name: "Bank",offsetX: 100,offsetY: 100,borderWidth: 2,borderColor: "black",type: ej.datavisualization.Diagram.Shapes.UMLClassifier, classifier: ej.datavisualization.Diagram.ClassifierShapes.Interface,
              "interface": {name: "BankAccount",methods: [{ name: "deposit", arguments: [{name:"amount", }],  }]  },
                
            },
        ];

    nodes.interface.methods.arguments.name string

    Sets the name of the argument

    Default Value:

    • ””

    Example

  • TS
  • this.nodes=[
                {
                   name: "Bank",offsetX: 100,offsetY: 100,borderWidth: 2,borderColor: "black",type: ej.datavisualization.Diagram.Shapes.UMLClassifier, classifier: ej.datavisualization.Diagram.ClassifierShapes.Interface,
              "interface": {name: "BankAccount",methods: [{ name: "deposit", arguments: [{name:"amount", }],  }]  },
                
            },
        ];

    nodes.interface.methods.arguments.type string

    Sets the type of the argument

    Default Value:

    • ””

    Example

  • TS
  • this.nodes=[
                {
                   name: "Bank",offsetX: 100,offsetY: 100,borderWidth: 2,borderColor: "black",type: ej.datavisualization.Diagram.Shapes.UMLClassifier, classifier: ej.datavisualization.Diagram.ClassifierShapes.Interface,
              "interface": {name: "BankAccount",methods: [{ name: "deposit", arguments: [{name:"amount", type:"Dollars"  }],  }]  },
                
            },
        ];

    nodes.interface.methods.type string

    Sets the return type of the method

    Default Value:

    • ””

    Example

  • TS
  • this.nodes=[
                {
                   name: "Bank",offsetX: 100,offsetY: 100,borderWidth: 2,borderColor: "black",type: ej.datavisualization.Diagram.Shapes.UMLClassifier, classifier: ej.datavisualization.Diagram.ClassifierShapes.Interface,
              "interface": {name: "BankAccount",methods: [{ name: "deposit", arguments: [{name:"amount", type:"Dollars"  }],  type:"account"}]  },
                
            },
        ];

    nodes.interface.methods.scope string

    Sets the visibility of the method

    Default Value:

    • ””

    Example

  • TS
  • this.nodes=[
                {
                   name: "Bank",offsetX: 100,offsetY: 100,borderWidth: 2,borderColor: "black",type: ej.datavisualization.Diagram.Shapes.UMLClassifier, classifier: ej.datavisualization.Diagram.ClassifierShapes.Interface,
              "interface": {name: "BankAccount",methods: [{ name: "deposit", arguments: [{name:"amount", type:"Dollars"  }],  type:"account",scope:"private"}]  },
                
            },
        ];

    nodes.isExpanded boolean

    Defines whether the sub tree of the node is expanded or collapsed

    Default Value

    • true

    Example

  • TS
  • this.nodes=[
                {
                    name: "node1", width: 50, height:50, offsetX:50, offsetY:50, isExpanded: false
                
            },
            {
                name: "node2", width: 50, height:50
            },
            {
                name: "node3", width: 50, height:50
            },
            ];
            this.connectors=[{
                 sourceNode:"node1", targetNode:"node2" , name:"connector"
             }];

    nodes.isSwimlane boolean

    Sets the node as a swimlane

    Default Value:

    • false

    Example

  • TS
  • this.nodes=[
                {
                    type: "swimlane",name: "swimlane", isSwimlane:true, header: {text: "Swimlane", fontSize: 12, bold: true}
                
            },

    nodes.labels array

    A collection of objects where each object represents a label

    Default Value:

    • []

    Example

  • TS
  • this.labels = [{"text": "Node1", "fontColor":"red"}];
    
    this.nodes=[
                {
                    labels:this.labels
                
            },]

    nodes.labels.bold boolean

    Enables/disables the bold style

    Default Value:

    • false

    Example

  • TS
  • this.nodes=[
                {
                    text:"label", bold:true
                
            },]

    nodes.labels.borderColor string

    Sets the border color of the label

    Default Value:

    • “transparent”

    Example

  • TS
  • this.nodes=[{name: "node1", width: 50, height:50, offsetX:50, offsetY:50,labels:[{ text:"label", borderColor:"red", borderWidth: 2}]}]

    nodes.labels.borderWidth number

    Sets the border width of the label

    Default Value:

    • 0

    Example

  • TS
  • this.nodes=[
                {
                    name: "node1", width: 50, height:50, offsetX:50, offsetY:50, 
             labels:[{ text:"label", borderColor:"red", borderWidth: 2}]
                
            },]

    nodes.labels.fillColor string

    Sets the fill color of the text area

    Default Value:

    • “transparent”

    Example

  • TS
  • this.nodes=[
                {
                     name: "node1", width: 50, height:50, offsetX:50, offsetY:50, 
             labels:[{ text:"label", fillColor: "green"}]
                
            },]

    nodes.labels.fontColor string

    Sets the font color of the text

    Default Value:

    • “black”

    Example

  • TS
  • this.nodes=[
                {
                     name: "node1", width: 50, height:50, offsetX:50, offsetY:50, 
             labels:[{ text:"label", fontColor: "green"}]
                
            },]

    nodes.labels.fontFamily string

    Sets the font family of the text

    Default Value:

    • “Arial”

    Example

  • TS
  • this.nodes=[
                {
                     name: "node1", width: 50, height:50, offsetX:50, offsetY:50, 
             labels:[{ text:"label", fontColor: "green", fontFamily:"seugoe UI"}]
                
            },]

    nodes.labels.fontSize number

    Defines the font size of the text

    Default Value:

    • 12

    Example

  • TS
  • this.nodes=[
                {
                     name: "node1", width: 50, height:50, offsetX:50, offsetY:50, 
             labels:[{ text:"label", fontSize: 14}]
                
            },]

    nodes.labels.horizontalAlignment enum

    Sets the horizontal alignment of the label.

    Name Description
    Left Used to align text horizontally on left side of node/connector
    Center Used to align text horizontally on center of node/connector
    Right Used to align text horizontally on right side of node/connector

    Default Value:

    • ej.datavisualization.Diagram.HorizontalAlignment.Center

    Example

  • TS
  • this.nodes=[
                {
                    name: "node1", width: 50, height:50, offsetX:50, offsetY:50, 
    	     //Align the text at the left most position of node
             labels:[{ text:"label", offset:{ x:0 }, horizontalAlignment:ej.datavisualization.Diagram.HorizontalAlignment.Left}]
                
            },]

    nodes.labels.italic boolean

    Enables/disables the italic style

    Default Value:

    • false

    Example

  • TS
  • this.nodes=[
                {
                    name: "node1", width: 50, height:50, offsetX:50, offsetY:50, 
             labels:[{ text:"label", italic:true}]
                
            },]

    nodes.labels.margin object

    To set the margin of the label

    Default Value:

    • ej.datavisualization.Diagram.Margin()

    Example

  • TS
  • this.nodes=[
                {
                    name: "node1", width: 50, height:50, offsetX:50, offsetY:50, 
    	     //Leaves 5px space between the left boundary of node and label
             labels:[{ text:"label", offset:{ x:0 }, horizontalAlignment:"left", margin:{ left: 5 }}]
            },]

    nodes.labels.mode enum

    Gets whether the label is currently being edited or not.

    Name Description
    Edit Used to set label edit mode as edit
    View Used to set label edit mode as view

    Default Value:

    • ej.datavisualization.Diagram.LabelEditMode.Edit

    Example

  • TS
  • this.nodes=[
                {
                    name: "node1", width: 50, height:50, offsetX:50, offsetY:50, 
    	     //Leaves 5px space between the left boundary of node and label
             labels:[{ text:"label", offset:{ x:0 }, horizontalAlignment:"left", margin:{ left: 5 }}]
            },]

    nodes.labels.name string

    Sets the unique identifier of the label

    Default Value:

    • ””

    Example

  • TS
  • this.nodes=[
                {
                    name: "node1", width: 50, height:50, offsetX:50, offsetY:50, 
             labels:[{ text:"label", name:"label1"}]
            }]

    nodes.labels.offset object

    Sets the fraction/ratio(relative to node) that defines the position of the label

    Default Value:

    • ej.datavisualization.Diagram.Point(0.5, 0.5)

    Example

  • HTML
  • this.nodes=[ts
                name: "node1", width: 50, height:50, offsetX:50, offsetY:50, 
             labels:[{ text:"label", offset:ej.datavisualization.Diagram.Point(0,0.5) }]
                }]

    nodes.labels.opacity number

    Defines the transparency of the labels

    Default Value:

    • 1

    Example

  • TS
  • this.nodes=[
                name: "node1", width: 50, height:50, offsetX:50, offsetY:50, 
             labels:[{ text:"label", opacity: 0.7}]
            }]

    nodes.labels.overflowType enum

    Sets the overflowType of the labels

    Name Description
    Ellipsis Set overflow Type as ellipsis
    Clip Set overflow Type as Clip

    Default Value:

    • ej.datavisualization.Diagram.OverflowType.Ellipsis

    Example

  • TS
  • this.nodes=[
               name: "node1", width: 50, height:50, offsetX:50, offsetY:50, 
             labels:[{ text:"label1",fontColor:"red",textOverflow:true,
             overflowType: ej.datavisualization.Diagram.OverflowType.Ellipsis}]
            }]

    nodes.labels.readOnly boolean

    Defines whether the label is editable or not

    Default Value:

    • false

    Example

  • TS
  • this.nodes=[
               name: "node1", width: 50, height:50, offsetX:50, offsetY:50, 
             labels:[{ text:"label", readOnly:true}]
            }]

    nodes.labels.rotateAngle number

    Defines the angle to which the label needs to be rotated

    Default Value:

    • 0

    Example

  • TS
  • this.nodes=[
               name: "node1", width: 50, height:50, offsetX:50, offsetY:50, 
             labels:[{ text:"label", rotateAngle: 90}]
            }]

    nodes.labels.text string

    Defines the label text

    Default Value:

    • ””

    Example

  • TS
  • this.nodes=[
               name: "node1", width: 50, height:50, offsetX:50, offsetY:50, 
             labels:[{ text:"Label"}]
            }]

    nodes.labels.textAlign enum

    Defines how to align the text inside the label.

    Name Description
    Left Used to align text on left side of node/connector
    Center Used to align text on center of node/connector
    Right Used to align text on Right side of node/connector

    Default Value:

    • ej.datavisualization.Diagram.TextAlign.Center

    Example

  • TS
  • this.nodes=[
               name: "node1", width: 50, height:50, offsetX:50, offsetY:50, 
             labels:[{ text:"node Label", textAlign:ej.datavisualization.Diagram.TextAlign.Left}]
            }]

    nodes.labels.textDecoration enum

    Sets how to decorate the label text.

    Name Description
    Underline Used to set text decoration of the label as Underline
    Overline Used to set text decoration of the label as OverLine
    LineThrough Used to set text decoration of the label as LineThrough
    None Used to set text decoration of the label as None

    Default Value:

    • ej.datavisualization.Diagram.TextDecorations.None

    Example

  • TS
  • this.nodes=[
               name: "node1", width: 50, height:50, offsetX:50, offsetY:50, 
    	     //Decorate the text with an underline
             labels:[{ text:"Label", textDecoration: ej.datavisualization.Diagram.TextDecorations.Underline}]
            }]

    nodes.labels.textOverflow boolean

    Defines the overflowed content is displayed or not.

    Default Value:

    • false

    Example

  • TS
  • this.nodes=[
                name: "node1", width: 50, height:50, offsetX:50, offsetY:50, 
             labels:[{ text:"label1",fontColor:"red",textOverflow:true,
             overflowType: ej.datavisualization.Diagram.OverflowType.Ellipsis}]
            }]

    nodes.labels.verticalAlignment enum

    Sets the vertical alignment of the label.

    Name Description
    Top Set vertical alignment as top
    Middle Set vertical alignment as middle
    Bottom Set vertical alignment as bottom

    Default Value:

    • ej.datavisualization.Diagram.VerticalAlignment.Center

    Example

  • TS
  • this.nodes=[
                name: "node1", width: 50, height:50, offsetX:50, offsetY:50, 
    	     //Aligns the text at the top most position of node
             labels:[{ text:"label", offset:{ y:0 }, verticalAlignment:ej.datavisualization.Diagram.VerticalAlignment.Top }]
            }]

    nodes.labels.visible boolean

    Enables or disables the visibility of the label

    Default Value:

    • true

    Example

  • TS
  • this.nodes=[
                name: "node1", width: 50, height:50, offsetX:50, offsetY:50, 
             labels:[{ text:"Label", visible: false}]
            }]

    nodes.labels.width number

    Sets the width of the label(the maximum value of label width and the node width will be considered as label width)

    Default Value:

    • 50

    Example

  • TS
  • this.nodes=[
                name: "node1", width: 50, height:50, offsetX:50, offsetY:50, 
             labels:[{ text:"Label", width: 100}]
            }]

    nodes.labels.wrapping enum

    Defines how the label text needs to be wrapped.

    Name Description
    NoWrap Disables wrapping
    Wrap Enables Line-break at normal word break points
    WrapWithOverflow Enables Line-break at normal word break points with longer word overflows

    Default Value:

    • ej.datavisualization.Diagram.TextWrapping.WrapWithOverflow

    Example

  • TS
  • this.nodes=[
                name: "node1", width: 50, height:50, offsetX:50, offsetY:50, 
             labels:[{ text:"Enter Your Text", wrapping:ej.datavisualization.Diagram.TextWrapping.NoWrap}]
            }]

    nodes.lanes array

    An array of objects where each object represents a lane. Applicable, if the node is a swimlane.

    Default Value:

    • []

    Example

  • TS
  • this.nodes=[
        //Define the collection of lanes
                type: "swimlane",name: "swimlane", offsetX:300, offsetY:200,lanes:[{name:"lane1", width:200 },
    				 {name:"lane2", width:100}]
            }]

    nodes.lanes.width number

    Defines the width of lane

    Default Value:

    • 0

    Example

  • TS
  • this.addInfo = {Description:"Describe the functionality"};
    this.nodes=[
        type: "swimlane",name: "swimlane", offsetX:300, offsetY:200,
                    lanes:[{ name:"lane1", width:200, addInfo: this.addInfo }]
            ]

    nodes.lanes.height number

    Defines the height of lane

    Default Value:

    • 0

    Example

  • TS
  • this.addInfo = {Description:"Describe the functionality"};
    this.nodes=[
        type: "swimlane",name: "swimlane", offsetX:300, offsetY:200,
    lanes:[{ name:"lane1", width:200, height:100, addInfo: addInfo }]
            ]

    nodes.lanes.zorder number

    Defines the z-index of the lane

    Default Value:

    • 0

    Example

  • TS
  • this.addInfo = {Description:"Describe the functionality"};
    this.nodes=[
        type: "swimlane",name: "swimlane", offsetX:300, offsetY:200,
    lanes:[{ name:"lane1", width:200,height:100,zOrder:10, addInfo: addInfo }]
            ]

    nodes.lanes.addInfo object

    Allows to maintain additional information about lane

    Default Value:

    • {}

    Example

  • TS
  • this.addInfo = {Description:"Describe the functionality"};
    this.nodes=[
        type: "swimlane",name: "swimlane", offsetX:300, offsetY:200,
    lanes:[{ name:"lane1", width:200,  addInfo: addInfo }]
            ]

    nodes.lanes.children array

    An array of objects where each object represents a child node of the lane

    Default Value:

    • []

    Example

  • TS
  • this.nodes=[
                {
                    type: "swimlane",name: "swimlane", offsetX:300, offsetY:200,
                    lanes:[{ name:"lane1", width:200,children:[{name:"process1", width: 50, height: 50 }] }]
                
            },
    ]

    nodes.lanes.fillColor string

    Defines the fill color of the lane

    Default Value:

    • “white”

    Example

  • TS
  • this.nodes=[
                {
                    type: "swimlane",name: "swimlane", offsetX:300, offsetY:200,
                    lanes:[{ name:"lane1", width:200,fillColor:"lightgray" }]
                
            },
    ]

    nodes.lanes.header object

    Defines the header of the lane

    Default Value:

    • { text: “Function”, fontSize: 11 }

    Example

  • TS
  • this.nodes=[
                {type: "swimlane",name: "swimlane", offsetX:300, offsetY:200,
                    lanes:[{name:"lane1", width:200, 
                    //Defines the lane header
                    header:{fillColor:"blue", fontColor:"white", text:"Function 1"} }]
                
            }]

    nodes.lanes.isLane boolean

    Defines the object as a lane

    Default Value:

    • false

    Example

  • TS
  • this.nodes=[
                {type: "swimlane",name: "swimlane", offsetX:300, offsetY:200,
                    lanes:[{name:"lane1", width:200 , isLane:true }]
                
            }]

    nodes.lanes.name string

    Sets the unique identifier of the lane

    Default Value:

    • ””

    Example

  • TS
  • this.nodes=[
                {type: "swimlane",name: "swimlane", offsetX:300, offsetY:200,
                    lanes:[{ name:"function1", width:200 }]
                
            }]

    nodes.lanes.orientation string

    Sets the orientation of the lane.

    Default Value:

    • “vertical”

    Example

  • TS
  • this.nodes=[
                {type: "swimlane",name: "swimlane", offsetX:300, offsetY:100, orientation:"horizontal",
    lanes:[{ name:"function1", width:200 , orientation:"vertical" }]
                
            }];

    nodes.marginBottom number

    Defines the minimum space to be left between the bottom of parent bounds and the node. Applicable, if the parent is a container.

    Default Value:

    • 0

    Example

  • TS
  • this.nodes=[
                {type: "swimlane",name: "swimlane", offsetX:300, offsetY:200,
    lanes:[{name:"lane1", width:200 , 
          children:[{name:"process1", width: 50, height: 50, marginBottom: 50 }]
     }]
                
                }];

    nodes.marginLeft number

    Defines the minimum space to be left between the left of parent bounds and the node. Applicable, if the parent is a container.

    Default Value:

    • 0

    Example

  • TS
  • this.nodes=[{}
                type: "swimlane",name: "swimlane", offsetX:300, offsetY:200,
    lanes:[{name:"lane1", width:200 , 
          children:[{name:"process1", width: 50, height: 50, marginLeft: 10 }]
     }]}];

    nodes.marginRight number

    Defines the minimum space to be left between the right of the parent bounds and the node. Applicable, if the parent is a container.

    Default Value:

    • 0

    Example

  • TS
  • this.nodes=[
                {type: "swimlane",name: "swimlane", offsetX:300, offsetY:200,
    lanes:[{name:"lane1", width:200 , 
          children:[{name:"process1", width: 50, height: 50, marginRight: 10 }]
     }]}];

    nodes.marginTop number

    Defines the minimum space to be left between the top of parent bounds and the node. Applicable, if the parent is a container.

    Default Value:

    • 0

    Example

  • TS
  • this.nodes=[
                {type: "swimlane",name: "swimlane", offsetX:300, offsetY:200,
    lanes:[{name:"lane1", width:200 , 
          children:[{name:"process1", width: 50, height: 50, marginTop: 10 }]
     }]}];

    nodes.maxHeight number

    Defines the maximum height limit of the node

    Default Value:

    • 0

    Example

  • TS
  • this.nodes=[
                {type: "swimlane",name: "swimlane", offsetX:300, offsetY:200,
    lanes:[{name:"lane1", width:200 , 
          children:[{name:"process1", width: 50, height: 50, maxHeight: 100 }]
     }]}];

    nodes.maxWidth number

    Defines the maximum width limit of the node

    Default Value:

    • 0

    Example

  • TS
  • this.nodes=[
                {type: "swimlane",name: "swimlane", offsetX:300, offsetY:200,
    lanes:[{name:"lane1", width:200 , 
          children:[{name:"process1", width: 50, height: 50, maxWidth: 100 }]
     }]}];

    nodes.minHeight number

    Defines the minimum height limit of the node

    Default Value:

    • 0

    Example

  • TS
  • this.nodes=[
                {type: "swimlane",name: "swimlane", offsetX:300, offsetY:200,
    lanes:[{name:"lane1", width:200 , 
          children:[{name:"process1", width: 50, height: 50, minHeight: 10 }]
     }]}];

    nodes.minWidth number

    Defines the minimum width limit of the node

    Default Value:

    • 0

    Example

  • TS
  • this.nodes=[
                {type: "swimlane",name: "swimlane", offsetX:300, offsetY:200,
    lanes:[{name:"lane1", width:200 , 
          children:[{name:"process1", width: 50, height: 50, minWidth: 10 }]
     }]}];

    nodes.name string

    Sets the unique identifier of the node

    Default Value:

    • ””

    Example

  • TS
  • this.nodes=[{
                name: "node1", width: 50, height:50, offsetX:50, offsetY:50 
            }]

    nodes.offsetX number

    Defines the position of the node on X-Axis

    Default Value:

    • 0

    Example

  • TS
  • this.nodes=[{
                name: "node1", width: 50, height:50, offsetX:50, offsetY:50 
            }]

    nodes.offsetY number

    Defines the position of the node on Y-Axis

    Default Value:

    • 0

    Example

  • TS
  • this.nodes=[{
                name: "node1", width: 50, height:50, offsetX:50, offsetY:50 
            }]

    nodes.opacity number

    Defines the opaque of the node

    Default Value:

    • 1

    Example

  • TS
  • this.nodes=[{
                name: "node1", width: 50, height:50, offsetX:50, offsetY:50 ,opacity:0.7
            }]

    nodes.orientation string

    Defines the orientation of nodes. Applicable, if the node is a swimlane.

    Default Value:

    • “vertical”

    Example

  • TS
  • this.nodes=[
                {type: "swimlane",name: "swimlane", offsetX:300, offsetY:200,orientation:"horizontal"
                    }];

    nodes.outEdges array

    A read only collection of outgoing connectors/edges of the node

    Default Value:

    • []

    Example

  • TS
  • //Read the incoming connections to the selected node
    let node = this.diagram.widget.selectionList[0];
            this.diagram.widget.addSelection(node);
            for(let i=0;i<node.outEdges.length;i++){
            console.log(node.outEdges[i]);
            }

    nodes.paddingBottom number

    Defines the minimum padding value to be left between the bottom most position of a group and its children. Applicable, if the group is a container.

    Default Value:

    • 0

    Example

  • TS
  • this.nodes=[{name: "node1", width: 50, height:50},
            {
                name: "node2", width: 50, verticalAlign: "bottom" 
            },
            
            ];
            this.group=[{name :"group", children:[ "node1", "node2" ], 
            container: { type: "canvas" }, offsetX:200, offsetY:100, 
            fillColor:"gray", minWidth:200, minHeight:200,
            paddingBottom:10}]

    nodes.paddingLeft number

    Defines the minimum padding value to be left between the left most position of a group and its children. Applicable, if the group is a container.

    Default Value:

    • 0

    Example

  • TS
  • this.nodes=[{name: "node1", width: 50, height:50},
            {
                name: "node2", width: 50, verticalAlign: "bottom" 
            },
            
            ];
            this.group=[{name :"group", children:[ "node1", "node2" ], 
            container: { type: "canvas" }, offsetX:200, offsetY:100, 
            fillColor:"gray", minWidth:200, minHeight:200,
            paddingLeft:10}]

    nodes.paddingRight number

    Defines the minimum padding value to be left between the right most position of a group and its children. Applicable, if the group is a container.

    Default Value:

    • 0

    Example

  • TS
  • this.nodes=[{name: "node1", width: 50, height:50},
            {
                name: "node2", width: 50, verticalAlign: "bottom" 
            },
            
            ];
            this.group=[{name :"group", children:[ "node1", "node2" ], 
            container: { type: "canvas" }, offsetX:200, offsetY:100, 
            fillColor:"gray", minWidth:200, minHeight:200,
            paddingRight:10}]

    nodes.paddingTop number

    Defines the minimum padding value to be left between the top most position of a group and its children. Applicable, if the group is a container.

    Default Value:

    • 0

    Example

  • TS
  • this.nodes=[{name: "node1", width: 50, height:50},
            {
                name: "node2", width: 50, verticalAlign: "bottom" 
            },
            
            ];
            this.group=[{name :"group", children:[ "node1", "node2" ], 
            container: { type: "canvas" }, offsetX:200, offsetY:100, 
            fillColor:"gray", minWidth:200, minHeight:200,
            paddingTop:10}]

    nodes.paletteItem object

    Defines the size and preview size of the node to add that to symbol palette

    Default Value:

    • null

    Example

  • TS
  • this.palettes = [{
            name: "Basic Shapes", expanded: true,
    		items: [
    		{
    			name: "Rectangle", height: 40, width: 80,
    			//Sets preview size
    			paletteItem: {			
                    previewWidth: 100,
    				previewHeight: 100
    			}
    		}]
           }];

    nodes.paletteItem.enableScale boolean

    Defines whether the symbol should be drawn at its actual size regardless of precedence factors or not

    Default Value:

    • true

    Example

  • TS
  • this.palettes = [{
            name: "Nodes", expanded: true,
    		items: [
    		{
    			name: "Rectangle", width:50, height:50,
    			//Draw symbol of size(50,50)
    			paletteItem: {
                    width: 100,
                    height: 100,
                    enableScale:false
    			}
    		}]
           }];

    nodes.paletteItem.height number

    Defines the height of the symbol

    Default Value:

    • 0

    Example

  • TS
  • this.palettes = [{
            name: "Nodes", expanded: true,
    		items: [
    		{
    			name: "Rectangle", 
    			//Sets the size of the symbol
    			paletteItem: {
                    width: 200,
                    height: 200,
    				enableScale: false
    			}
    		}]
           }];

    nodes.paletteItem.label string

    To display a name for nodes in the symbol palette

    Default Value:

    • null

    Example

  • TS
  • this.palettes = [{
            name: "Nodes", expanded: true,
    		items: [
    		{
    			name: "Rectangle", 
    			//Sets the name for node in the symbol palette
    			paletteItem: {
                    label: "label"
    			}
    		}]
           }];

    nodes.paletteItem.margin object

    Defines the margin of the symbol item

    Default Value:

    • { left: 4, right: 4, top: 4, bottom: 4 }

    Example

  • TS
  • this.palettes = [{
            name: "Nodes", expanded: true,
    		items: [
    		{
    			name: "Rectangle", 
    			//Sets Symbol margin
    			paletteItem: {
                     margin: { left: 30 }
    			}
    		}]
           }];

    nodes.paletteItem.previewHeight number

    Defines the preview height of the symbol

    Default Value:

    • undefined

    Example

  • TS
  • this.palettes = [{
            name: "Nodes", expanded: true,
    		items: [
    		{
    			name: "Rectangle",
                //Sets preview size 
    			paletteItem: {
                    previewWidth: 100,
    				previewHeight: 100
    			}
    		}]
           }];

    nodes.paletteItem.previewWidth number

    Defines the preview width of the symbol

    Default Value:

    • undefined

    Example

  • TS
  • this.palettes = [{
            name: "Nodes", expanded: true,
    		items: [
    		{
    			name: "Rectangle",
                //Sets preview size 
    			paletteItem: {
                    previewWidth: 100,
    				previewHeight: 100
    			}
    		}]
           }];

    nodes.paletteItem.width number

    Defines the width of the symbol

    Default Value:

    • 0

    Example

  • TS
  • this.palettes = [{
            name: "Nodes", expanded: true,
    		items: [
    		{
    			name: "Rectangle",
                //Sets the size of the symbol
    			paletteItem: {
                    width: 200,
                    height: 200,
                    enableScale : false
    			}
    		}]
           }];

    nodes.parent string

    Sets the name of the parent group

    Default Value:

    • ””

    Example

  • TS
  • this.nodes=[
                {name: "node1", width: 50, height:50,offsetX:50, offsetY:50, parent:"group"
                
            },
            {
                name: "node2", width: 50,offsetX:150, offsetY:150,parent:"group" 
            },
            
            ];
            this.group=[{name :"group", children:[ "node1", "node2" ], 
            container: { type: "canvas" }, offsetX:200, offsetY:100, 
            fillColor:"gray", minWidth:200, minHeight:200,
            paddingBottom:10}]

    nodes.pathData string

    Sets the path geometry that defines the shape of a path node

    Default Value:

    • ””

    Example

  • TS
  • this.nodes=[{
                name: "node3", width: 50, height:50, offsetX:50, offsetY:50, 
                type:"basic", shape:"path", pathData: "M370.9702,194.9961L359.5112,159.7291L389.5112,137.9341L419.5112,159.7291L408.0522,194.9961L370.9702,194.9961z"
            }
            ];

    nodes.phases array

    An array of objects, where each object represents a smaller region(phase) of a swimlane.

    Default Value:

    • []

    Example

  • TS
  • this.nodes=[{
                type: "swimlane",name: "swimlane", offsetX:300, offsetY:100, 
                width: 300, orientation:"horizontal",
                phases:[{ name:"phase1", offset:150, label:{text:"Phase1"}},    
                       { name:"phase2", label:{ text:"Phase2"} }]
            }]

    nodes.phases.label object

    Defines the header of the smaller regions

    Default Value:

    • null

    Example

  • TS
  • this.nodes=[{
                type: "swimlane",name: "swimlane", offsetX:300, offsetY:100, 
                width: 300, orientation:"horizontal",
                phases:[{ name:"phase1", offset:150, label:{text:"Phase1"}},    
                       { name:"phase2", label:{ text:"Phase2"} }]
            }]

    nodes.phases.lineColor string

    Defines the line color of the splitter that splits adjacent phases.

    Default Value:

    • “#606060”

    Example

  • TS
  • this.nodes=[{
                type: "swimlane",name: "swimlane", offsetX:300, offsetY:100, 
                width: 300, orientation:"horizontal",
                phases:[{ name:"phase1", offset:150, label:{text:"Phase1"}, lineColor:"green"},    
                       { name:"phase2", label:{ text:"Phase2"} }]
            }]

    nodes.phases.lineDashArray string

    Sets the dash array that used to stroke the phase splitter

    Default Value:

    • “3,3”

    Example

  • TS
  • this.nodes=[{
                type: "swimlane",name: "swimlane", offsetX:300, offsetY:100, 
                width: 300, orientation:"horizontal",
                phases:[{ name:"phase1", offset:150, label:{text:"Phase1"}, lineDashArray:"2,2"},    
                       { name:"phase2", label:{ text:"Phase2"} }]
            }]

    nodes.phases.lineWidth number

    Sets the lineWidth of the phase

    Default Value:

    • 1

    Example

  • TS
  • this.nodes=[{
                type: "swimlane",name: "swimlane", offsetX:300, offsetY:100, 
                width: 300, orientation:"horizontal",
                phases:[{ name:"phase1", offset:150, label:{text:"Phase1"}, lineWidth:3},    
                       { name:"phase2", label:{ text:"Phase2"} }]
            }]

    nodes.phases.name string

    Sets the unique identifier of the phase

    Default Value:

    • ””

    Example

  • TS
  • this.nodes=[{
                type: "swimlane",name: "swimlane", offsetX:300, offsetY:100, 
                width: 300, orientation:"horizontal",
                phases:[{ name:"phase1", offset:150, label:{text:"Phase1"}, lineWidth:3},    
                       { name:"phase2", label:{ text:"Phase2"} }]
            }]

    nodes.phases.offset number

    Sets the length of the smaller region(phase) of a swimlane

    Default Value:

    • 100

    Example

  • TS
  • this.nodes=[{type: "swimlane",name: "swimlane", phases:{offset: 200}]}]

    nodes.phases.orientation string

    Sets the orientation of the phase

    Default Value:

    • “horizontal”

    Example

  • TS
  • this.nodes=[{
                {
                name: "verticalPhase", 
                type: "phase", offset: 200, orientation: "vertical",label: { text: "New Phase" } 
            },
            }]

    nodes.phases.type string

    Sets the type of the object as phase

    Default Value:

    • “phase”

    Example

  • TS
  • this.nodes=[{
                {
                name: "verticalPhase", 
    		type: "phase", offset: 200, label: { text: "New Phase" } 
            },
            }]

    nodes.phaseSize number

    Sets the height of the phase headers

    Default Value:

    • 0

    Example

  • TS
  • this.nodes=[{
                type: "swimlane",name: "swimlane", offsetX:300, offsetY:100, 
    width: 300, orientation:"horizontal",phaseSize:50,
    phases:[{ name:"phase1", offset:150, label:{text:"Phase 1"} }]
            }]

    nodes.pivot object

    Sets the ratio/ fractional value relative to node, based on which the node will be transformed(positioning, scaling and rotation)

    Default Value:

    • ej.datavisualization.Diagram.Points(0.5,0.5)

    Example

  • TS
  • this.nodes=[{
                name: "node1", width: 50, height:50, offsetX:50, offsetY:50, pivot: {x:0, y:0}
            }]

    nodes.points array

    Defines a collection of points to draw a polygon. Applicable, if the shape is a polygon.

    Default Value:

    • []

    Example

  • TS
  • this.nodes=[{
                 name: "node1", width: 50, height:50, offsetX:50, offsetY:50,
    type: "basic",shape:"polygon", points:[{ x: 0, y: 12.5 }, { x: 0, y: 50 }, { x: 50, y: 50 }, { x: 50, y: 0 }, { x: 12.5, y: 0 }, { x: 0, y: 12.5 }]
            }]

    nodes.ports array

    An array of objects where each object represents a port

    Default Value:

    • []

    Example

  • TS
  • this.nodes=[{
                 name: "node1", width: 50, height:50, offsetX:50, offsetY:50,
          ports:[{name:"port1", offset:{ x:0.5, y:0 }}, 
                {name:"port2", offset:{ x:0.5, y:1 }}]
            }]

    nodes.ports.borderColor string

    Sets the border color of the port

    Default Value:

    • “#1a1a1a”

    Example

  • TS
  • this.nodes=[{
                 name: "node1", width: 50, height:50, offsetX:50, offsetY:50,
          ports:[{name:"port1", offset:{ x:0.5, y:0.5 }, borderColor:"yellow" }] 
            }]

    nodes.ports.borderWidth number

    Sets the stroke width of the port

    Default Value:

    • 1

    Example

  • TS
  • this.nodes=[{
                 name: "node1", width: 50, height:50, offsetX:50, offsetY:50,
          ports:[{name:"port1", offset:{ x:0.5, y:0.5 }, borderColor:"yellow", borderWidth: 3 }]
            }]

    nodes.ports.connectorPadding number

    Defines the space to be left between the port bounds and its incoming and outgoing connections.

    Default Value:

    • 0

    Example

  • TS
  • this.nodes=[{
                 name: "node1", width: 50, height:50, offsetX:50, offsetY:50,
          ports:[{name:"port1", offset:{ x:0.5, y:0.5 }, connectorPadding:10 }]
            }]

    nodes.ports.constraints enum

    Defines whether connections can be created with the port

    Name Description
    None Disable all constraints
    Connect Enables connections with connector
    ConnectOnDrag Enables to create the connection when mouse hover on the port.

    Default Value:

    • ej.datavisualization.Diagram.PortConstraints.Connect

    Example

  • TS
  • this.nodes=[{
                name: "node1", width: 50, height:50, offsetX:50, offsetY:50,
    	  //Disable creating connections with the port
          ports:[{name:"port1", offset:{ x:0.5, y:0.5 }, constraints: ej.datavisualization.Diagram.PortConstraints.Default &~ ej.datavisualization.Diagram.PortConstraints.Connect }] 
            }]

    nodes.ports.fillColor string

    Sets the fill color of the port

    Default Value:

    • “white”

    Example

  • TS
  • this.nodes=[{
                name: "node1", width: 50, height:50, offsetX:50, offsetY:50,
          ports:[{name:"port1", offset:{ x:0.5, y:0.5 }, fillColor:"red" }] 
            }]

    nodes.ports.name string

    Sets the unique identifier of the port

    Default Value:

    • ””

    Example

  • TS
  • this.nodes=[{
               name: "node1", width: 50, height:50, offsetX:50, offsetY:50,
          ports:[{ name:"port1", offset:{ x:0.5, y:0.5 } }]
            }]

    nodes.ports.offset object

    Defines the position of the port as fraction/ ratio relative to node

    Default Value:

    • ej.datavisualization.Diagram.Point(0, 0)

    Example

  • TS
  • this.nodes=[{
               name: "node1", width: 50, height:50, offsetX:50, offsetY:50,
    	  //Add port at the center of the node
          ports:[{name:"port1", offset:{ x:0.5, y:0.5 } }]
            }]

    nodes.ports.pathData string

    Defines the path data to draw the port. Applicable, if the port shape is path.

    Default Value:

    • ””

    Example

  • TS
  • this.nodes=[{
               name: "node1", width: 50, height:50, offsetX:50, offsetY:50,
          ports:[{name:"port1", offset:{ x:0.5, y:0.5 }, 
          //Define the shape of the port
          shape:"path", pathData: "M5,0 L10,10 L0,10 z"}]
            }]

    nodes.ports.shape enum

    Defines the shape of the port.

    Name Description
    X Used to set port shape as X
    Circle Used to set port shape as Circle
    Square Used to set port shape as Square
    Path Used to set port shape as Path

    Default Value:

    • ej.datavisualization.Diagram.PortShapes.Square

    Example

  • TS
  • this.nodes=[{
               name: "node1", width: 50, height:50, offsetX:50, offsetY:50,
          ports:[{name:"port1", offset:{ x:0.5, y:0.5 }, 
          shape:ej.datavisualization.Diagram.PortShapes.Circle}]
            }]

    nodes.ports.size number

    Defines the size of the port

    Default Value:

    • 8

    Example

  • TS
  • this.nodes=[{
               name: "node1", width: 50, height:50, offsetX:50, offsetY:50,
          ports:[{name:"port1", offset:{ x:0.5, y:0.5 }, size: 10}] 
            }]

    nodes.ports.visibility enum

    Defines when the port should be visible.

    Name Description
    Visible Set the port visibility as Visible
    Hidden Set the port visibility as Hidden
    Hover Port get visible when hover connector on node
    Connect Port gets visible when connect connector to node
    Default Specifies the port visibility as default

    Default Value:

    • ej.datavisualization.Diagram.PortVisibility.Default

    Example

  • TS
  • this.nodes=[{
               name: "node1", width: 50, height:50, offsetX:50, offsetY:50,
          ports:[{name:"port1", offset:{ x:0.5, y:0.5 }, 
          visibility:ej.datavisualization.Diagram.PortVisibility.Visible }]  
            }]

    nodes.rotateAngle number

    Sets the angle to which the node should be rotated

    Default Value:

    • 0

    Example

  • TS
  • this.nodes=[{
               name: "node1", width: 50, height:50, offsetX:50, offsetY:50, rotateAngle: 45  }]

    nodes.scale enum

    Defines how the node should be scaled/stretched

    Name Description
    None Set the scale as none
    Meet Used to scale the node uniformly so that it fits the node bounds
    Slice Used to scale the node uniformly to the maximum
    Stretch Used to scale the node non-uniformly to be stretched

    Default Value:

    • ej.datavisualization.Diagram.ScaleConstraints.Meet

    Example

  • TS
  • this.nodes=[{
               scale:ej.datavisualization.Diagram.ScaleConstraints.Slice }]

    nodes.shadow object

    Defines the opacity and the position of shadow

    Default Value:

    • ej.datavisualization.Diagram.Shadow()

    Example

  • TS
  • this.nodes=[{
               name: "node1", width: 50, height:50, offsetX:50, offsetY:50,
          constraints: ej.datavisualization.Diagram.NodeConstraints.Default | ej.datavisualization.Diagram.NodeConstraints.Shadow,
          shadow: {opacity: 0.5, distance: 10, angle: 45} }]

    nodes.shadow.angle number

    Defines the angle of the shadow relative to node

    Default Value:

    • 45

    Example

  • TS
  • this.nodes=[{
               name: "node1", width: 50, height:50, offsetX:50, offsetY:50,
          constraints: ej.datavisualization.Diagram.NodeConstraints.Default | ej.datavisualization.Diagram.NodeConstraints.Shadow,
          shadow: { angle: 135} }]

    nodes.shadow.distance number

    Sets the distance to move the shadow relative to node

    Default Value:

    • 5

    Example

  • TS
  • this.nodes=[{
               name: "node1", width: 50, height:50, offsetX:50, offsetY:50,
          constraints: ej.datavisualization.Diagram.NodeConstraints.Default | ej.datavisualization.Diagram.NodeConstraints.Shadow,
         shadow: { distance: 10 } }]

    nodes.shadow.opacity number

    Defines the opaque of the shadow

    Default Value:

    • 0.7

    Example

  • TS
  • this.nodes=[{
               name: "node1", width: 50, height:50, offsetX:50, offsetY:50,
          constraints: ej.datavisualization.Diagram.NodeConstraints.Default | ej.datavisualization.Diagram.NodeConstraints.Shadow,
          shadow: {opacity: 0.9} }]

    nodes.shape enum|string

    Sets the shape of the node. It depends upon the type of node.

    The following table illustrates the list of Basic shapes.

    Name Description
    Rectangle Used to specify node Shape as Rectangle
    Ellipse Used to specify node Shape as Ellipse
    Path Used to specify node Shape as Path
    Polygon Used to specify node Shape as Polygon
    Triangle Used to specify node Shape as Triangle
    Plus Used to specify node Shape as Plus
    Star Used to specify node Shape as Star
    Pentagon Used to specify node Shape as Pentagon
    Heptagon Used to specify node Shape as Heptagon
    Octagon Used to specify node Shape as Octagon
    Trapezoid Used to specify node Shape as Trapezoid
    Decagon Used to specify node Shape as Decagon
    RightTriangle Used to specify node Shape as RightTriangle
    Cylinder Used to specify node Shape as Cylinder

    The following table illustrates the list of Flow shapes.

    Name Description
    Process Used to specify node Shape as Process
    Decision Used to specify node Shape as Decision
    Document Used to specify node Shape as Document
    PreDefinedProcess Used to specify node Shape as PreDefinedProcess
    Terminator Used to specify node Shape as Terminator
    PaperTap Used to specify node Shape as PaperTap
    DirectData Used to specify node Shape as DirectData
    SequentialData Used to specify node Shape as SequentialData
    Sort Used to specify node Shape as Sort
    MultiDocument Used to specify node Shape as MultiDocument
    Collate Used to specify node Shape as Collate
    SummingJunction Used to specify node Shape as SummingJunction
    Or Used to specify node Shape as Or
    InternalStorage Used to specify node Shape as InternalStorage
    Extract Used to specify node Shape as Extract
    ManualOperation Used to specify node Shape as ManualOperation
    Merge Used to specify node Shape as Merge
    OffPageReference Used to specify node Shape as OffPageReference
    SequentialAccessStorage Used to specify node Shape as SequentialAccessStorage
    Annotation1 Used to specify node Shape as Annotation1
    Annotation2 Used to specify node Shape as Annotation2
    Data Used to specify node Shape as Data
    Card Used to specify node Shape as Card

    The following table illustrates the list of BPMN shapes.

    Name Description
    Event Used to specify node Shape as Event
    Gateway Used to specify node Shape as Gateway
    Message Used to specify node Shape as Message
    DataObject Used to specify node Shape as DataObject
    DataSource Used to specify node Shape as DataSource
    Activity Used to specify node Shape as Activity
    Group Used to specify node Shape as Group

    The following table illustrates the list of UMLActivity shapes.

    Name Description
    Action Used to set UML ActivityShapes as Action
    Decision Used to set UML ActivityShapes as Decision
    MergeNode Used to set UML ActivityShapes as MergeNode
    InitialNode Used to set UML ActivityShapes as InitialNode
    FinalNode Used to set UML ActivityShapes as FinalNode
    ForkNode Used to set UML ActivityShapes as ForkNode
    JoinNode Used to set UML ActivityShapes as JoinNode
    TimeEvent Used to set UML ActivityShapes as TimeEvent
    AcceptingEvent Used to set UML ActivityShapes as AcceptingEvent
    SendSignal Used to set UML ActivityShapes as SendSignal
    ReceiveSignal Used to set UML ActivityShapes as ReceiveSignal
    StructuredNode Used to set UML ActivityShapes as StructuredNode
    Note Used to set UML ActivityShapes as Note

    Default Value:

    • ej.datavisualization.Diagram.BasicShapes.Rectangle

    Example

  • TS
  • this.nodes=[{
                name: "node1", width: 50, height:50, offsetX:50, offsetY:50, 
    	  // Sets the shape as ellipse
          type:"basic", shape:ej.datavisualization.Diagram.BasicShapes.Ellipse}]

    nodes.source string

    Sets the source path of the image. Applicable, if the type of the node is image.

    Default Value:

    • ””

    Example

  • TS
  • this.nodes=[{
                name: "node1", width: 50, height:50, offsetX:50, offsetY:50, 
    type:"image", source: "Clayton.png"}]

    nodes.subProcess object

    Defines the sub process of a BPMN Activity. Applicable, if the type of the BPMN activity is sub process.

    Default Value:

    • ej.datavisualization.Diagram.BPMNSubProcess()

    Example

  • TS
  • this.nodes=[{
                name: "node1", width: 100, height:100, offsetX:50, offsetY:50, 
    		type:"bpmn", shape:"activity", activity:"subprocess", 
    		subProcess:{ loop: ej.datavisualization.Diagram.BPMNLoops.Standard }}]

    nodes.subProcess.adhoc boolean

    Defines whether the BPMN sub process is without any prescribed order or not

    Default Value:

    • false

    Example

  • TS
  • this.nodes=[{
                name: "node1", width: 100, height:100, offsetX:50, offsetY:50, 
    type:"bpmn", shape:"activity", activity:"subprocess", 
    subProcess:{ adhoc: true }}]

    nodes.subProcess.boundary enum

    Sets the boundary of the BPMN process

    Name Description
    Default Used to set BPMN SubProcess's Boundary as Default
    Call Used to set BPMN SubProcess's Boundary as Call
    Event Used to set BPMN SubProcess's Boundary as Event

    Default Value:

    • ej.datavisualization.Diagram.BPMNBoundary.Default

    Example

  • TS
  • this.nodes=[{
                name: "node1", width: 100, height:100, offsetX:50, offsetY:50, 
    		type:"bpmn", shape:"activity", activity:"subprocess", 
    		subProcess:{ boundary: ej.datavisualization.Diagram.BPMNBoundary.Call }}]

    nodes.subProcess.compensation boolean

    Sets whether the BPMN subprocess is triggered as a compensation of a specific activity

    Default Value:

    • false

    Example

  • TS
  • this.nodes=[{
                name: "node1", width: 100, height:100, offsetX:50, offsetY:50, 
    		type:"bpmn", shape:"activity", activity:"subprocess", 
    		subProcess:{ compensation: true }}]

    nodes.subProcess.collapsed boolean

    Sets whether the BPMN subprocess is triggered as a collapsed of a specific activity

    Default Value:

    • true

    Example

  • TS
  • this.nodes=[{
                name: "node1", width: 100, height:100, offsetX:50, offsetY:50, 
    		type:"bpmn", shape:"activity", activity:"subprocess", 
    		subProcess:{ collapsed: false } }]

    nodes.subProcess.event enum

    Sets the type of the event by which the sub-process will be triggered

    Default Value:

    • ej.datavisualization.Diagram.BPMNEvents.Start

    Example

  • TS
  • this.nodes=[{
                name: "node1", width: 100, height:100, offsetX:50, offsetY:50, 
    		type:"bpmn", shape:"activity", activity:"subprocess", 
            subProcess: { type: "event", event: "start" } }]

    nodes.subProcess.events array

    Defines the collection of events that need to be appended with BPMN Sub-Process

    Default Value:

    • ””

    Example

  • TS
  • this.nodes=[{
                name: "node1", width: 100, height: 100, offsetX: 50, offsetY: 50,
        type: "bpmn", shape: "activity", activity: "subprocess",
        subProcess: {
            type: "transaction",
            events: [
                { event: "intermediate", offset: { x: 0.25, y: 1 } },
                { event: "intermediate", trigger: "error", offset: { x: 0.75, y: 1 } }]} }]

    nodes.subProcess.loop enum

    Defines the loop type of a sub process.

    Name Description
    None Used to set BPMN Activity's Loop as None
    Standard Used to set BPMN Activity's Loop as Standard
    ParallelMultiInstance Used to set BPMN Activity's Loop as ParallelMultiInstance
    SequenceMultiInstance Used to set BPMN Activity's Loop as SequenceMultiInstance

    Default Value:

    • ej.datavisualization.Diagram.BPMNLoops.None

    Example

  • TS
  • this.nodes=[{
                name: "node1", width: 100, height:100, offsetX:50, offsetY:50, 
    type:"bpmn", shape:"activity", activity:"subprocess", 
    subProcess:{ loop: ej.datavisualization.Diagram.BPMNLoops.ParallelMultiInstance} }]

    nodes.subProcess.Processes array

    Defines the children for BPMN’s SubProcess

    Default Value:

    • []

    Example

  • TS
  • this.nodes=[{
                name: "node1", width: 100, height:100, offsetX:50, offsetY:50, 
    		type:"bpmn", shape:"activity", activity:"subprocess", 
                subProcess: { type: "event",  trigger: "conditional", offset: { x: 0.75, y: 1 } } }]

    nodes.subProcess.trigger enum

    Defines the type of the event trigger

    Default Value:

    • ej.datavisualization.Diagram.BPMNTriggers.Message

    Example

  • TS
  • this.nodes=[{
                name: "node1", width: 100, height:100, offsetX:50, offsetY:50, 
    		type:"bpmn", shape:"activity", activity:"subprocess", 
                subProcess: { type: "event",  trigger: "conditional", offset: { x: 0.75, y: 1 } } }]

    nodes.subProcess.type enum

    Defines the type of a sub process

    Name Description
    None Used to set BPMN SubProcess type as None
    Transaction Used to set BPMN SubProcess type as Transaction
    Event Used to set BPMN SubProcess type as Event

    Default Value:

    • ej.datavisualization.Diagram.BPMNSubProcessTypes.None

    Example

  • TS
  • this.nodes=[{
                name: "node1", width: 100, height: 100, offsetX: 50, offsetY: 50,
                type: "bpmn", shape: "activity", activity: "subprocess",
                subProcess: { type: event } }]

    nodes.task object

    Defines the task of the BPMN activity. Applicable, if the type of activity is set as task.

    Default Value:

    • ej.datavisualization.Diagram.BPMNTask()

    Example

  • TS
  • this.nodes=[{
                 name: "node1", width: 100, height:100, offsetX:50, offsetY:50, 
    		type:"bpmn", shape:"activity", activity:"task", 
    		task:{ compensation: true }  }]

    nodes.task.call boolean

    To set whether the task is a global task or not

    Default Value:

    • false

    Example

  • TS
  • this.nodes=[{
                 name: "node1", width: 100, height:100, offsetX:50, offsetY:50, 
    		type:"bpmn", shape:"activity", activity:"task", 
    		task:{ call: true }  }]

    nodes.task.compensation boolean

    Sets whether the task is triggered as a compensation of another specific activity

    Default Value:

    • false

    Example

  • TS
  • this.nodes=[{
                 name: "node1", width: 100, height:100, offsetX:50, offsetY:50, 
    		type:"bpmn", shape:"activity", activity:"task", 
    		task:{ compensation: true } }]

    nodes.task.loop enum

    Sets the loop type of a BPMN task.

    Name Description
    X Used to set port shape as X
    Circle Used to set port shape as Circle
    Square Used to set port shape as Square
    Path Used to set port shape as Path

    Default Value:

    • ej.datavisualization.Diagram.BPMNLoops.None

    Example

  • TS
  • this.nodes=[{
                  name: "node1", width: 100, height:100, offsetX:50, offsetY:50, 
    		type:"bpmn", shape:"activity", activity:"task", 
    		task:{ loop: ej.datavisualization.Diagram.BPMNLoops.Standard }  }]

    nodes.task.type enum

    Sets the type of the BPMN task.

    Name Description
    None Used to set BPMN Task Type as None
    Service Used to set BPMN Task Type as Service
    Receive Used to set BPMN Task Type as Receive
    Send Used to set BPMN Task Type as Send
    InstantiatingReceive Used to set BPMN Task Type as InstantiatingReceive
    Manual Used to set BPMN Task Type as Manual
    BusinessRule Used to set BPMN Task Type as BusinessRule
    User Used to set BPMN Task Type as User
    Script Used to set BPMN Task Type as Script
    Parallel Used to set BPMN Task Type as Parallel

    Default Value:

    • ej.datavisualization.Diagram.BPMNTasks.None

    Example

  • TS
  • this.nodes=[{
                  name: "node1", width: 100, height:100, offsetX:50, offsetY:50, 
    		type:"bpmn", shape:"activity", activity:"task", 
    		task:{ type: ej.datavisualization.Diagram.BPMNTasks.Service }  }]

    nodes.templateId string

    Sets the id of svg/html templates. Applicable, if the node is HTML or native.

    Default Value:

    • ””

    Example

  • HTML
  • <script id="svgTemplate" type="text/x-jsrender">
        <svg version="1.0" xmlns="http://www.w3.org/2000/svg" width="70px" height="30px">
            <g visibility="visible">
                <image width="70px" height="35px" opacity="1" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href=""></image>
                <text x="25" y="20" font-size="11" style="height:30px">
                    <tspan></tspan>
                </text>
            </g>
        </svg>
    </script>
  • TS
  • this.nodes=[{
                  name: "Clayton", width: 100, height:50, offsetX:50, offsetY:50, 
    		addInfo:{source:"Clayton.png"},
    		type:"native", templateId:"svgTemplate"  }]

    nodes.textBlock object

    Defines the textBlock of a text node

    Default Value:

    • null

    Example

  • TS
  • this.nodes=[{
                   name: "node1", width: 100, height:100, offsetX:50, offsetY:50, 
    		type:"text", textBlock:{ text: "Text Node", fontColor:"red" }  }]

    nodes.tooltip object

    Defines the tooltip that should be shown when the mouse hovers over node. For tooltip properties, refer Tooltip

    Default Value:

    • null

    Example

  • HTML
  • <script type="text/x-jsrender" id="mouseOverTooltip">
       <div style="background-color: #F08080; color: white; white-space: nowrap; height: 20px">
            <span style="padding: 5px;">  </span>
       </div>
    </script>
  • TS
  • this.nodes = [{
    		name:"Rectangle", width:50, height: 50, offsetX: 100, offsetY: 100,
            constraints: ej.datavisualization.Diagram.NodeConstraints.Default & ~ej.datavisualization.Diagram.NodeConstraints.InheritTooltip, 
            tooltip:tooltip, 
    		}];
    		this.tooltip = {
    				templateId:"mouseOverTooltip",
    								};
    	}	
    	};

    nodes.trigger enum

    Sets the type of BPMN Event Triggers.

    Name Description
    None Used to set Event Trigger as None
    Message Used to set Event Trigger as Message
    Timer Used to set Event Trigger as Timer
    Escalation Used to set Event Trigger as Escalation
    Link Used to set Event Trigger as Link
    Error Used to set Event Trigger as Error
    Compensation Used to set Event Trigger as Compensation
    Signal Used to set Event Trigger as Signal
    Multiple Used to set Event Trigger as Multiple
    Parallel Used to set Event Trigger as Parallel
    Conditional Used to set Event Trigger as Conditional
    Termination Used to set Event Trigger as Termination
    Cancel Used to set Event Trigger as Cancel

    Default Value:

    • ej.datavisualization.Diagram.BPMNTriggers.None

    Example

  • TS
  • this.nodes=[{
                   type: "bpmn", shape: ej.datavisualization.Diagram.BPMNShapes.Event, trigger: ej.datavisualization.Diagram.BPMNTriggers.None  }

    nodes.type enum

    Defines the type of the node.

    Name Description
    Text Used to specify node type as Text
    Image Used to specify node type as Image
    Html Used to specify node type as HTML
    Native Used to specify node type as Native
    Basic Used to specify node type as Basic
    Flow Used to specify node type as Flow
    BPMN Used to specify node type as BPMN
    UMLClassifier Used to specify node type as UMLClassifier
    UMLActivity Used to specify node type as UMLActivity

    Default Value:

    • ej.datavisualization.Diagram.Shapes.Basic

    Example

  • TS
  • this.nodes=[{
                   name: "node1", width: 100, height:100, offsetX:50, offsetY:50, 
    		type: ej.datavisualization.Diagram.Shapes.BPMN  }]

    nodes.verticalAlign enum

    Sets the vertical alignment of a node. Applicable, if the parent of a node is a container.

    Name Description
    Top Set vertical alignment as top
    Middle Set vertical alignment as middle
    Bottom Set vertical alignment as bottom

    Default Value:

    • ej.datavisualization.Diagram.VerticalAlignment.Top

    Example

  • TS
  • this.nodes=[
                {name: "node1", width: 50, height:50
                
            },
            {
                name: "node2", width: 50, verticalAlign: "bottom" 
            }];
    
            this.group = [{name :"group", children:[ "node1", "node2" ], 
            container: { type: "canvas" }, offsetX:200, offsetY:100, 
            fillColor:"gray", minWidth:200, minHeight:200}]

    nodes.visible boolean

    Defines the visibility of the node

    Default Value:

    • true

    Example

  • TS
  • this.nodes=[{
                   name: "node1", width: 100, height:100, offsetX:50, offsetY:50, visible:false  }]

    nodes.width number

    Defines the width of the node

    Default Value:

    • 0

    Example

  • TS
  • this.nodes=[{
                   name: "node1", width: 100, height:50, offsetX:50, offsetY:50 }]

    nodes.zOrder number

    Defines the z-index of the node

    Default Value:

    • 0

    Example

  • TS
  • this.nodes=[{
                   name: "node1", width: 100, height:100, offsetX:50, offsetY:50, zOrder: 10}]

    nodeTemplate object

    Binds the custom JSON data with node properties

    Default Value:

    • null

    Example

  • TS
  • let data = [{ "Id": "E1", "Name": "Maria Anders", "Designation": "Managing Director" },
            { "Id": "E2" , "Name": "Ana Trujillo", "Designation": "Project Manager", "ReportingPerson": "E1" }];
    
            this.nodeTemplate = function (diagram, node) {
                node.labels[0].text = node.Name;
            };

    pageSettings object

    Defines the size and appearance of diagram page

    pageSettings.autoScrollBorder object

    Defines the maximum distance to be left between the object and the scroll bar to trigger auto scrolling

    Default Value:

    • { left: 15, top: 15, right: 15, bottom: 15 }

    Example

  • TS
  • this.pageSettings=[{
            autoScrollBorder: { left: 50, top: 50, right: 50, bottom: 50 }
           }];

    pageSettings.multiplePage boolean

    Sets whether multiple pages can be created to fit all nodes and connectors

    Default Value:

    • false

    Example

  • TS
  • this.pageSettings=[{
            multiplePage:false
           }];

    pageSettings.pageBackgroundColor string

    Defines the background color of diagram pages

    Default Value:

    • “#ffffff”

    Example

  • TS
  • this.pageSettings=[{
            pageBackgroundColor:"lightgray"
           }];

    pageSettings.pageBorderColor string

    Defines the page border color

    Default Value:

    • “#565656”

    Example

  • TS
  • this.pageSettings=[{
            pageBorderColor:"black", pageBorderWidth: 2
    }];

    pageSettings.pageBorderWidth number

    Sets the border width of diagram pages

    Default Value:

    • 0

    Example

  • TS
  • this.pageSettings=[{
            pageBorderColor:"black", pageBorderWidth: 2
    }];

    pageSettings.pageHeight number

    Defines the height of a page

    Default Value:

    • null

    Example

  • TS
  • this.pageSettings=[{
            pageWidth: 500, pageHeight: 500
    }];

    pageSettings.pageMargin number

    Defines the page margin

    Default Value:

    • 24

    Example

  • TS
  • this.pageSettings=[{
            pageMargin : 20
    }];

    pageSettings.pageOrientation enum

    Sets the orientation of the page.

    Name Description
    Landscape Used to set orientation as Landscape
    Portrait Used to set orientation as portrait

    Default Value:

    • ej.datavisualization.Diagram.PageOrientations.Portrait

    Example

  • TS
  • this.pageSettings=[{
            pageWidth: 800, pageHeight: 500, 
    	pageOrientation:ej.datavisualization.Diagram.PageOrientations.Landscape
           }];

    pageSettings.pageWidth number

    Defines the height of a diagram page

    Default Value:

    • null

    Example

  • TS
  • this.pageSettings=[{
            pageWidth: 500, pageHeight: 500
           }];

    pageSettings.scrollableArea object

    Defines the scrollable area of diagram. Applicable, if the scroll limit is “limited”.

    Default Value:

    • null

    Example

  • TS
  • this.pageSettings=[{
            scrollLimit: "limited",
        scrollableArea: {x:0, y:0, width:1000, height:1000}
           }];

    pageSettings.scrollLimit enum

    Defines the scrollable region of diagram.

    Name Description
    Infinite Used to set scrollLimit as Infinite
    Diagram Used to set scrollLimit as Diagram
    Limited Used to set scrollLimit as Limited

    Default Value:

    • ej.datavisualization.Diagram.ScrollLimit.Infinite

    Example

  • TS
  • this.pageSettings=[{
            scrollLimit: ej.datavisualization.Diagram.ScrollLimit.Diagram
           }];

    pageSettings.boundaryConstraints enum

    Defines the draggable region of diagram elements.

    Name Description
    Infinite Used to set boundaryConstraints as Infinite
    Diagram Used to set boundaryConstraints as Diagram
    Page Used to set boundaryConstraints as Page

    Default Value:

    • ej.datavisualization.Diagram.BoundaryConstraints.Infinite

    Example

  • TS
  • this.pageSettings=[{
            boundaryConstraints: ej.datavisualization.Diagram.BoundaryConstraints.Diagram
           }];

    pageSettings.showPageBreak boolean

    Enables or disables the page breaks

    Default Value:

    • false

    Example

  • TS
  • this.pageSettings=[{
            showPageBreak: true
           }];

    scrollSettings object

    Defines the zoom value, zoom factor, scroll status and view port size of the diagram

    scrollSettings.currentZoom number

    Allows to read the zoom value of diagram

    Default Value:

    • 0

    Example

  • TS
  • @ViewChild('diagram') diagram: EJComponents<any, any>;
    
    console.log(this.diagram.widget.model.scrollSettings.currentZoom);

    scrollSettings.horizontalOffset number

    Sets the horizontal scroll offset

    Default Value:

    • 0

    Example

  • TS
  • this.scrollSettings = {horizontalOffset: 50};

    scrollSettings.padding object

    Allows to extend the scrollable region that is based on the scroll limit

    Default Value:

    • {left: 0, right: 0, top:0, bottom: 0}

    Example

  • TS
  • this.scrollSettings = {padding: { left: 25, right: 25, top: 25, bottom: 25}};

    scrollSettings.verticalOffset number

    Sets the vertical scroll offset

    Default Value:

    • 0

    Example

  • TS
  • this.scrollSettings = {verticalOffset: 50};

    scrollSettings.viewPortHeight number

    Allows to read the view port height of the diagram

    Default Value:

    • 0

    Example

  • TS
  • @ViewChild('diagram') diagram: EJComponents<any, any>;
    
    this.scrollSettings = {this.diagram.widget.model.scrollSettings.viewPortHeight};

    scrollSettings.viewPortWidth number

    Allows to read the view port width of the diagram

    Default Value:

    • 0

    Example

  • TS
  • @ViewChild('diagram') diagram: EJComponents<any, any>;
    
    this.scrollSettings = {this.diagram.widget.model.scrollSettings.viewPortWidth};

    selectedItems object

    Defines the size and position of selected items and defines the appearance of selector

    selectedItems.children array

    A read only collection of the selected items

    Default Value:

    • []

    Example

  • TS
  • @ViewChild('diagram') diagram: EJComponents<any, any>;
    
    //Read the selected items 
    for(let i =0; i< this.diagram.widget.model.selectedItems.children; i++){
        //Do your actions here
    }

    selectedItems.constraints enum

    Controls the visibility of selector.

    Name Description
    None Hides the selector
    Rotator Sets the visibility of rotation handle as visible
    Resizer Sets the visibility of resize handles as visible
    UserHandles Sets the visibility of user handles as visible
    Tooltip Enables the default tooltip of the diagram control.
    DragOnEmptySpace Enables dragging while selecting the multiple nodes and click on the empty region of the selection rectangle.
    AutoHideThumbs Show/Hide the selection handles when it is overlapped with each other's.
    All Sets the visibility of all selection handles as visible

    Default Value:

    • ej.datavisualization.Diagram.SelectorConstraints.All

    Example

  • TS
  • this.selectedItems={constraints: ej.datavisualization.Diagram.SelectorConstraints.UserHandles};

    selectedItems.getConstraints object

    Defines a method that dynamically enables/ disables the interaction with multiple selection.

    Default Value:

    • null

    Example

  • TS
  • this.selectedItems={getConstraints: function() {
    		//Allows to drag the multiple selected elements even when the selected elements are not movable 
    		return ej.datavisualization.Diagram.NodeConstraints.Drag | ej.datavisualization.Diagram.NodeConstraints.Resize
        }};

    selectedItems.height number

    Sets the height of the selected items

    Default Value:

    • 0

    Example

  • TS
  • this.selectedItems={height:100, width: 100};

    selectedItems.offsetX number

    Sets the x position of the selector

    Default Value:

    • 0

    Example

  • TS
  • this.selectedItems={offsetX:100, offsetY: 100};

    selectedItems.offsetY number

    Sets the y position of the selector

    Default Value:

    • 0

    Example

  • TS
  • this.selectedItems={offsetX:100, offsetY: 100};

    selectedItems.rotateAngle number

    Sets the angle to rotate the selected items

    Default Value:

    • 0

    Example

  • TS
  • this.selectedItems={rotateAngle: 90};

    selectedItems.tooltip object

    Sets the angle to rotate the selected items. For tooltip properties, refer Tooltip

    Default Value:

    • ej.datavisualization.Diagram.Tooltip()

    Example

  • TS
  • this.selectedItems={tooltip : { alignment:{ vertical:"top" } }};

    selectedItems.userHandles array

    A collection of frequently used commands that will be added around the selector

    Default Value:

    • []

    Example

  • TS
  • let cloneHandle = ej.datavisualization.Diagram.UserHandle();
    cloneHandle.name = "cloneHandle";
    let userHandle;
    userHandle = userHandle.push(cloneHandle);
    this.selectedItems={userHandles:userHandle};

    selectedItems.userHandles.name string

    Defines the name of the user handle

    ####Default Value:

    • ””

    ####Example

  • TS
  • let cloneHandle = ej.datavisualization.Diagram.UserHandle();
    cloneHandle.backgroundColor = "#4D4D4D";
    cloneHandle.name = "cloneHandle";
    let userHandle;
    userHandle = userHandle.push(cloneHandle);
    this.selectedItems={userHandles:userHandle};

    selectedItems.userHandles.backgroundColor string

    Defines the background color of the user handle

    ####Default Value:

    • “#2382c3”

    ####Example

  • TS
  • let cloneHandle = ej.datavisualization.Diagram.UserHandle();
    cloneHandle.backgroundColor = "#4D4D4D";
    let userHandle;
    userHandle = userHandle.push(cloneHandle);
    this.selectedItems={userHandles:userHandle};

    selectedItems.userHandles.borderColor string

    Sets the border color of the user handle

    Default Value:

    • “transparent”

    Example

  • TS
  • let cloneHandle = ej.datavisualization.Diagram.UserHandle();
    cloneHandle.borderColor = "#4D4D4D";
    let userHandle;
    userHandle = userHandle.push(cloneHandle);
    this.selectedItems={userHandles:userHandle};

    selectedItems.userHandles.enableMultiSelection boolean

    Defines whether the user handle should be added, when more than one element is selected

    Default Value:

    • false

    Example

  • TS
  • let cloneHandle = ej.datavisualization.Diagram.UserHandle();
    cloneHandle.enableMultiSelection = true;
    let userHandle;
    userHandle = userHandle.push(cloneHandle);
    this.selectedItems={userHandles:userHandle};

    selectedItems.userHandles.pathColor string

    Sets the stroke color of the user handle

    ####Default Value:

    • transparent

    ####Example

  • TS
  • let cloneHandle = ej.datavisualization.Diagram.UserHandle();
    cloneHandle.pathData = "M4.6350084,4.8909971 L4.6350084,9.3649971 9.5480137,9.3649971 9.5480137,4.8909971 z M3.0000062,2.8189973 L11.184016,2.8189973 11.184016,10.999997 3.0000062,10.999997 z M0,0 L7.3649998,0 7.3649998,1.4020001 1.4029988,1.4020001 1.4029988,8.0660002 0,8.0660002 0,1.4020001 0,0.70300276 z";
    cloneHandle.pathColor = "white";
    let userHandle;
    userHandle = userHandle.push(cloneHandle);
    this.selectedItems={userHandles:userHandle};

    selectedItems.userHandles.pathData string

    Defines the custom shape of the user handle

    ####Default Value:

    • ””

    ####Example

  • TS
  • let cloneHandle = ej.datavisualization.Diagram.UserHandle();
    cloneHandle.pathData = "M4.6350084,4.8909971 L4.6350084,9.3649971 9.5480137,9.3649971 9.5480137,4.8909971 z M3.0000062,2.8189973 L11.184016,2.8189973 11.184016,10.999997 3.0000062,10.999997 z M0,0 L7.3649998,0 7.3649998,1.4020001 1.4029988,1.4020001 1.4029988,8.0660002 0,8.0660002 0,1.4020001 0,0.70300276 z";
    cloneHandle.pathColor = "white";
    cloneHandle.tool = new CloneTool(cloneHandle.name);
    let userHandle;
    userHandle = userHandle.push(cloneHandle);
    this.selectedItems={userHandles:userHandle};

    selectedItems.userHandles.position enum

    Defines the position of the user handle

    Name Description
    TopLeft Set the position of the userHandle as topLeft
    TopCenter Set the position of the userHandle as topCenter
    TopRight Set the position of the userHandle as topRight
    MiddleLeft Set the position of the userHandle as middleLeft
    MiddleRight Set the position of the userHandle as middleRight
    BottomLeft Set the position of the userHandle as bottomLeft
    BottomCenter Set the position of the userHandle as bottomCenter
    BottomRight Set the position of the userHandle as bottomRight

    Default Value:

    • ej.datavisualization.Diagram.UserHandlePositions.BottomCenter

    Example

  • TS
  • let cloneHandle = ej.datavisualization.Diagram.UserHandle();
    cloneHandle.position =ej.datavisualization.Diagram.UserHandlePositions.MiddleLeft;
    let userHandle;
    userHandle = userHandle.push(cloneHandle);
    this.selectedItems={userHandles:userHandle};

    selectedItems.userHandles.size number

    Defines the size of the user handle

    Default Value:

    • 8

    Example

  • TS
  • let cloneHandle = ej.datavisualization.Diagram.UserHandle();
    cloneHandle.size = 20;
    let userHandle;
    userHandle = userHandle.push(cloneHandle);
    this.selectedItems={userHandles:userHandle};

    selectedItems.userHandles.tool object

    Defines the interactive behaviors of the user handle

    Default Value:

    • ””

    Example

  • TS
  • let cloneHandle = ej.datavisualization.Diagram.UserHandle();
    cloneHandle.size = 20;
    let userHandle;
    userHandle = userHandle.push(cloneHandle);
    this.selectedItems={userHandles:userHandle};

    selectedItems.userHandles.visible boolean

    Defines the visibility of the user handle

    Default Value:

    • true

    Example

  • TS
  • let cloneHandle = ej.datavisualization.Diagram.UserHandle();
    cloneHandle.visible = "true";
    let userHandle;
    userHandle = userHandle.push(cloneHandle);
    this.selectedItems={userHandles:userHandle};

    selectedItems.width number

    Sets the width of the selected items

    Default Value:

    • 0

    Example

  • TS
  • this.selectedItems={ height:100, width: 100};

    showTooltip boolean

    Enables or disables tooltip of diagram

    Default Value:

    • true

    Example

  • TS
  • showTooltip:boolean;
    
     this.showTooltip = true;

    rulerSettings object

    Defines the properties of the both the horizontal and vertical gauge to measure the diagram area.

    rulerSettings.showRulers boolean

    Enables or disables both the horizontal and vertical ruler.

    Default Value:

    • false

    Example

  • TS
  • rulerSettings:object;
    
    this.rulerSettings = {showRulers: true};

    rulerSettings.horizontalRuler object

    Defines the appearance of horizontal ruler

    rulerSettings.horizontalRuler.interval number

    Defines the number of intervals to be present on the each segment of the horizontal ruler.

    Default Value:

    • 5

    Example

  • TS
  • this.rulerSettings = {horizontalRuler:{interval: 10  }};

    rulerSettings.horizontalRuler.segmentWidth number

    Defines the textual description of the ruler segment, and the appearance of the ruler ticks of the horizontal ruler.

    Default Value:

    • 100

    Example

  • TS
  • this.rulerSettings = {horizontalRuler:{segmentWidth: 50  }};

    rulerSettings.horizontalRuler.arrangeTick object

    Defines the method which used to position and arrange the tick elements of the horizontal ruler.

    Default Value:

    • null

    Example

  • TS
  • this.rulerSettings = {horizontalRuler:{arrangeTick: function alignTick(args){ }  }};

    rulerSettings.horizontalRuler.tickAlignmentenum

    Defines and sets the tick alignment of the ruler scale.

    Name Description
    LeftOrTop Align the ruler scale either left or top position of the ruler.
    RightOrBottom Align the ruler scale either right or bottom position of the ruler.

    Default Value:

    • ej.datavisualization.Diagram.TickAlignment.RightOrBottom

    Example

  • TS
  • this.rulerSettings = {horizontalRuler:{tickAlignment: ej.datavisualization.Diagram.TickAlignment.LeftOrTop  }};

    rulerSettings.horizontalRuler.markerColor string

    Defines the color of the horizontal marker brush.

    Default Value:

    • “red”

    Example

  • TS
  • this.rulerSettings = {horizontalRuler:{markerColor: "pink" }};

    rulerSettings.horizontalRuler.length number

    Defines the width of the horizontal ruler.

    Default Value:

    • null

    Example

  • TS
  • this.rulerSettings = {horizontalRuler:length: 1000 };

    rulerSettings.horizontalRuler.thickness number

    Defines the height of the horizontal ruler.

    Default Value:

    • 25

    Example

  • TS
  • this.rulerSettings = {horizontalRuler:thickness: 50 };

    rulerSettings.verticalRuler object

    Defines the appearance of vertical ruler

    rulerSettings.verticalRuler.interval number

    Defines the number of intervals to be present on the each segment of the vertical ruler.

    Default Value:

    • 5

    Example

  • TS
  • this.rulerSettings = {verticalRuler:{interval: 10  } };

    rulerSettings.verticalRuler.segmentWidth number

    Defines the textual description of the ruler segment, and the appearance of the ruler ticks of the vertical ruler.

    Default Value:

    • 100

    Example

  • TS
  • this.rulerSettings = {verticalRuler:{segmentWidth: 50  } };

    rulerSettings.verticalRuler.arrangeTick object

    Defines the method which used to position and arrange the tick elements of the vertical ruler.

    Default Value:

    • null

    Example

  • TS
  • this.rulerSettings = {verticalRuler:{arrangeTick: function alignTick(args){ }   } };

    rulerSettings. verticalRuler.tickAlignmentenum

    Defines and sets the tick alignment of the ruler scale.

    Name Description
    LeftOrTop Align the ruler scale either left or top position of the ruler.
    RightOrBottom Align the ruler scale either right or bottom position of the ruler.

    Default Value:

    • ej.datavisualization.Diagram.TickAlignment.RightOrBottom

    Example

  • TS
  • this.rulerSettings = {verticalRuler:{tickAlignment: ej.datavisualization.Diagram.TickAlignment.LeftOrTop    } };

    rulerSettings.verticalRuler.markerColor string

    Defines the color of the vertical marker brush.

    Default Value:

    • “red”

    Example

  • TS
  • this.rulerSettings = {verticalRuler:{markerColor: "pink" } };

    rulerSettings.verticalRuler.length number

    Defines the height of the vertical ruler.

    Default Value:

    • null

    Example

  • TS
  • this.rulerSettings = {verticalRuler:{length: 1000 } };

    rulerSettings.verticalRuler.thickness number

    Defines the width of the vertical ruler.

    Default Value:

    • 25

    Example

  • TS
  • this.rulerSettings = {verticalRuler:{thickness: 50 } };

    snapSettings object

    Defines the gridlines and defines how and when the objects have to be snapped

    snapSettings.enableSnapToObject boolean

    Enables or disables snapping nodes/connectors to objects

    Default Value:

    • true

    Example

  • TS
  • this.snapSettings = {enableSnapToObject: false}

    snapSettings.horizontalGridLines object

    Defines the appearance of horizontal gridlines

    snapSettings.horizontalGridLines.lineColor string

    Defines the line color of horizontal grid lines

    Default Value:

    • “lightgray”

    Example

  • TS
  • this.gridLine = {lineColor:"blue"};
    this.snapSettings = {horizontalGridLines: gridline};

    snapSettings.horizontalGridLines.lineDashArray string

    Specifies the pattern of dashes and gaps used to stroke horizontal grid lines

    Default Value:

    • ””

    Example

  • TS
  • this.gridLine = {lineColor :"blue", lineDashArray:"2,2"};
    this.snapSettings = {horizontalGridLines: gridline};

    snapSettings.horizontalGridLines.linesInterval array

    A pattern of lines and gaps that defines a set of horizontal gridlines

    Default Value:

    • [1.25, 18.75, 0.25, 19.75, 0.25, 19.75, 0.25, 19.75, 0.25, 19.75]

    Example

  • TS
  • this.gridLine = {linesInterval: [1, 14, 0.5, 14.5 ] };
    this.snapSettings = {horizontalGridLines: gridline};

    snapSettings.horizontalGridLines.snapInterval array

    Specifies a set of intervals to snap the objects

    Default Value:

    • [20]

    Example

  • TS
  • this.gridLine = {snapInterval : [5 };
    this.snapSettings = {horizontalGridLines: gridline};

    snapSettings.snapAngle number

    Defines the angle by which the object needs to be snapped

    Default Value:

    • 5

    Example

  • TS
  • this.snapSettings = {snapAngle: 10};

    snapSettings.snapConstraints enum

    Defines and sets the snapConstraints

    Name Description
    None Enables node to be snapped to horizontal gridlines
    SnapToHorizontalLines Enables node to be snapped to vertical gridlines
    SnapToVerticalLines Enables node to be snapped to horizontal gridlines
    SnapToLines Enables node to be snapped to gridlines
    ShowHorizontalLines Enable horizontal lines
    ShowVerticalLines Enable vertical lines
    ShowLines Enable both horizontal and vertical lines
    All Enable all the constraints

    Default Value:

    • ej.datavisualization.Diagram.SnapConstraints.ShowLines

    Example

  • TS
  • this.snapSettings = {snapConstraints:ej.datavisualization.Diagram.SnapConstraints.ShowLines};

    snapSettings.snapObjectDistance number

    Defines the minimum distance between the selected object and the nearest object

    Default Value:

    • 5

    Example

  • TS
  • snap = {"snapObjectDistance":5};
    this.snapSettings = {snapSettings: snap};

    snapSettings.verticalGridLines object

    Defines the appearance of horizontal gridlines

    snapSettings.verticalGridLines.lineColor string

    Defines the line color of horizontal grid lines

    Default Value:

    • “lightgray”

    Example

  • TS
  • snap = {"snapObjectDistance":5};
    this.snapSettings = {verticalGridLines: gridline};

    snapSettings.verticalGridLines.lineDashArray string

    Specifies the pattern of dashes and gaps used to stroke horizontal grid lines

    Default Value:

    • ””

    Example

  • TS
  • gridLine = {lineColor :"blue", lineDashArray:"2,2"};
    this.snapSettings = {verticalGridLines: gridline};

    snapSettings.verticalGridLines.linesInterval array

    A pattern of lines and gaps that defines a set of horizontal gridlines

    Default Value:

    • [1.25, 18.75, 0.25, 19.75, 0.25, 19.75, 0.25, 19.75, 0.25, 19.75]

    Example

  • TS
  • gridLine = {linesInterval: [1, 14, 0.5, 14.5 ]};
    this.snapSettings = {verticalGridLines: gridline};

    snapSettings.verticalGridLines.snapInterval array

    Specifies a set of intervals to snap the objects

    Default Value:

    • [20]

    Example

  • TS
  • gridLine = {snapInterval : [5]};
    this.snapSettings = {snapSettings: { verticalGridLines: gridline}};

    tool enum

    Enables/Disables the interactive behaviors of diagram.

    Name Description
    None Disables all Tools
    SingleSelect Enables/Disables SingleSelect tool
    MultipleSelect Enables/Disables MultiSelect tool
    ZoomPan Enables/Disables ZoomPan tool
    DrawOnce Enables/Disables DrawOnce tool
    ContinuesDraw Enables/Disables ContinuousDraw tool

    Default Value:

    • ej.datavisualization.Diagram.Tool.All

    Example

  • TS
  • this.tool = {tool:ej.datavisualization.Diagram.Tool.ZoomPan};

    tooltip object

    An object that defines the description, appearance and alignments of tooltips

    Default Value:

    • null

    Example

  • HTML
  • <script type="text/x-jsrender" id="mouseOverTooltip">
        <div style="background-color: #F08080; color: white; white-space: nowrap; height: 20px">
             <span style="padding: 5px;">  </span>
        </div>
     </script>
  • TS
  • this.Nodes = [{
    	    name: "Elizabeth",width: 70,height: 40,	offsetX: 100,offsetY: 100,
    		Designation: "Managing Director"
    				constraints: ej.datavisualization.Diagram.ConnectorConstraints.Default & ~ ej.datavisualization.Diagram.ConnectorConstraints.InheritTooltip, 
    		}];
    		this.tooltip = {
    				templateId:"mouseOverTooltip",
    								};
    	}	
    	};

    tooltip.alignment object

    Aligns the tooltip around nodes/connectors

    tooltip.alignment.horizontal enum

    Defines the horizontal alignment of tooltip.

    Name Description
    Left Used to align text horizontally on left side of node/connector
    Center Used to align text horizontally on center of node/connector
    Right Used to align text horizontally on right side of node/connector

    Default Value:

    • ej.datavisualization.Diagram.HorizontalAlignment.Center

    Example

  • TS
  • this.tooltip={
            alignment: {
                horizontal: ej.datavisualization.Diagram.HorizontalAlignment.Center
            }
           };

    tooltip.alignment.vertical enum

    Defines the vertical alignment of tooltip.

    Name Description
    Top Used to align text Vertically on left side of node/connector
    Center Used to align text Vertically on center of node/connector
    Bottom Used to align text Vertically on bottom of node/connector

    Default Value:

    • ej.datavisualization.Diagram.VerticalAlignment.Bottom

    Example

  • TS
  • this.tooltip={
            alignment: {
                horizontal: ej.datavisualization.Diagram.VerticalAlignment.Bottom
            }
           };

    tooltip.margin object

    Sets the margin of the tooltip

    Default Value:

    • { left: 5, right: 5, top: 5, bottom: 5 }

    Example

  • TS
  • this.tooltip={
            margin : { top:10 }
           };

    tooltip.relativeMode enum

    Defines whether the tooltip should be shown at the mouse position or around node.

    Name Description
    object Shows tooltip around the node
    Mouse Shows tooltip at the mouse position

    Default Value:

    • ej.datavisualization.Diagram.RelativeMode.Object

    Example

  • TS
  • this.tooltip={
           tooltip: {
    		//Shows tooltip at the mouse position
    		relativeMode: ej.datavisualization.Diagram.RelativeMode.Mouse
    	}
           };

    tooltip.templateId string

    Sets the svg/html template to be bound with tooltip

    Default Value:

    • ””

    Example

  • HTML
  • <script type="text/x-jsrender" id="mouseOverTooltip">
       <div style="background-color: #F08080; color: white; white-space: nowrap; height: 20px">
            <span style="padding: 5px;">  </span>
       </div>
    </script>
  • TS
  • this.tooltip={
           tooltip: {
    		templateId: "mouseOverTooltip"
    	}
           };

    width string

    Specifies the width of the diagram

    Default Value:

    • null

    Example

  • HTML
  • <ej-diagram id="diagram" width="100%" height="450" >
     </ej-diagram>

    zoomFactor number

    Sets the factor by which we can zoom in or zoom out

    Default Value:

    • 0.2
  • HTML
  • <ej-diagram id="diagram" width="100%" height="450" zoomFactor="1" >
     </ej-diagram>

    Methods

    add(node)

    Add nodes and connectors to diagram at runtime

    Name Type Description
    node object a JSON to define a node/connector or an array of nodes and connector

    Returns:

    • boolean

    Example

  • TS
  • //add a single node to diagram
    addNodesColl()
        {this.nodes=[
            {name: "rectangle1", width: 100, height: 100, offsetX: 100, offsetY: 100, type: "node", shape: ej.datavisualization.Diagram.BasicShapes.Rectangle
        }];
     }
    
        ngAfterViewInit(){
            this.Diagram.widget.add(this.addNodesColl())
        }
    
    // add multiple nodes to diagram
    addNodesColl()
        this.nodes=[{
            name: "rectangle2", width: 100, height: 100, offsetX: 200, offsetY: 100, type: "node", shape: ej.datavisualization.Diagram.BasicShapes.Rectangle},
            { name: "ellipse1", width: 100, height: 100, offsetX: 300, offsetY: 100, type: "node", shape: ej.datavisualization.Diagram.BasicShapes.Ellipse },
        ];
     }
    
        ngAfterViewInit(){
            this.Diagram.widget.add(this.addNodesColl())
        }
    
        @ViewChild('diagram') Diagram: EJComponents<any,any>;

    addLabel(nodeName, newLabel)

    Add a label to a node at runtime

    Name Type Description
    nodeName string name of the node to which label will be added
    newLabel object JSON for the new label to be added

    Example

  • TS
  • @ViewChild('diagram') diagram: EJComponents<any, any>;
    
    ngAfterViewInit(){
            let node=diagram.model.selectedItems[0]
            this.Diagram.widget.addLabel(node.name, {fontColor:"red", text:"newLabel"});
    }
    
    @ViewChild('diagram') Diagram: EJComponents<any,any>;

    addLane(lane,index)

    Add dynamic Lanes to swimlane at runtime

    Name Type Description
    lane object JSON for the new lane to be added
    index number Index value to add the lane in swimlane

    Example

  • TS
  • addLaneColl()
        {
    
             this.nodes=[{
                name: "lane" , fillColor: "#f5f5f5", offsetX: 500, offsetY: 200, 
                width: 400, orientation: 'horizontal', height: 100, isLane: true,
                header: { text: "function", fillColor: "#C7D4DF", width: 50, height: 50, fontSize: 11 }
            }]
    
        }
    //add a lane node to swimlane
        ngAfterViewInit(){
            this.Diagram.widget.addLane(this.addLaneColl());
        }
    
        // add lane with index to swimlane
    
        
    addLaneColl()
        {
    
             this.nodes=[{
                name: "lane" , fillColor: "#f5f5f5", offsetX: 500, offsetY: 200, 
                width: 400, orientation: 'horizontal', height: 100, isLane: true,
                header: { text: "function", fillColor: "#C7D4DF", width: 50, height: 50, fontSize: 11 }
            }]
    
        }
    //add a lane node to swimlane
        ngAfterViewInit(){
            this.Diagram.widget.addLane(this.addLaneColl(),1);
        }
    
        @ViewChild('diagram') Diagram: EJComponents<any,any>;

    addPhase(name, options)

    Add a phase to a swimlane at runtime

    Name Type Description
    name string name of the swimlane to which the phase will be added
    options object JSON object to define the phase to be added

    Example

  • TS
  • ngAfterViewInit(){
        this.Diagram.widget.addPhase("swimlane", { name: "CustomPhase", offset: 600, label: { text: "CustomPhase" } });
    }
    
    @ViewChild('diagram') Diagram: EJComponents<any,any>;

    addPorts(name, ports)

    Add a collection of ports to the node specified by name

    Name Type Description
    name string name of the node to which the ports have to be added
    ports array a collection of ports to be added to the specified node

    Example

  • TS
  • // Defines a collection of ports that have to be added at runtime
    let port = [{
            offset: { x: 0, y: 0.5 }, name: "port1", fillColor: "yellow"}, { offset: { x: 0.5, y: 0.5 }, name: "port2", fillColor: "yellow"
        },
        
    ];
    
    ngAfterViewInit(){
        this.diagram.widget.addPort("Rect1",port)
    }
    
    @ViewChild('diagram') diagram: EJComponents<any, any>;
    
    
    // Adds the ports to the node of name "node"
    this.Diagram.widget.addPorts("node", ports)
    
        ngAfterViewInit(){
            this.Diagram.widget.addPorts("Rect1",this.addPortsColl(),)
        }

    addSelection(node, [clearSelection])

    Add the specified node to selection list

    Name Type Description
    node object the node to be selected
    [clearSelection] boolean to define whether to clear the existing selection or not

    Example

  • TS
  • this.Diagram.widget.addSelection(this.Diagram.widget.Nodes[0])
    
    @ViewChild('diagram') Diagram: EJComponents<any,any>;

    align(direction)

    Align the selected objects based on the reference object and direction

    Name Type Description
    direction string to specify the direction towards which the selected objects are to be aligned("left","right",top","bottom")

    Example

  • TS
  • ngAfterViewInit(){
        this.Diagram.widget.align("left");
    }
    
    @ViewChild('diagram') Diagram: EJComponents<any,any>;

    bringIntoView(rect)

    Bring the specified portion of the diagram content to the diagram viewport

    Name Type Description
    rect object the rectangular region that is to be brought into diagram viewport

    Example

  • TS
  • ngAfterViewInit(){
        this.Diagram.widget.align("left");
    }
    
    @ViewChild('diagram') Diagram: EJComponents<any,any>;

    bringToCenter(rect)

    Bring the specified portion of the diagram content to the center of the diagram viewport

    Name Type Description
    rect object the rectangular region that is to be brought to the center of diagram viewport

    Example

  • TS
  • addNodesColl()
        {
    
    this.nodes=[{
            name: "rectangle1", width: 700, height: 500, offsetX: 80, offsetY: 80, type: "node", shape: ej.datavisualization.Diagram.BasicShapes.Rectangle}]
        }
    
        ngAfterViewInit(){
        this.Diagram.widget.bringIntoView(this.addNodesColl());
    
        }
    
        @ViewChild('diagram') Diagram: EJComponents<any,any>;

    bringToFront()

    Visually move the selected object over all other intersected objects

    Example

  • TS
  • ngAfterViewInit(){
        this.Diagram.widget.bringToFront();
    
        }
    
        @ViewChild('diagram') Diagram: EJComponents<any,any>;

    clear()

    Remove all the elements from diagram

    Example

  • TS
  • ngAfterViewInit(){
        this.Diagram.widget.clear();
    
        }
    
        @ViewChild('diagram') Diagram: EJComponents<any,any>;

    clearHistory()

    Clears the actions which is recorded to perform undo/redo operation in the diagram.

    Example

  • TS
  • ngAfterViewInit(){
        this.Diagram.widget.clearHistory();
    
        }
    
        @ViewChild('diagram') Diagram: EJComponents<any,any>;

    clearSelection()

    Remove the current selection in diagram

    Example

  • TS
  • ngAfterViewInit(){
        this.Diagram.widget.clearSelection();
    
        }
    
        @ViewChild('diagram') Diagram: EJComponents<any,any>;

    copy()

    Copy the selected object to internal clipboard and get the copied object

    Returns:

    • object

    Example

  • TS
  • ngAfterViewInit(){
        //Save the copied object
        this.copiedObject = this.Diagram.widget.copy();
    
        }
    
        @ViewChild('diagram') Diagram: EJComponents<any,any>;

    cut()

    Cut the selected object from diagram to diagram internal clipboard

    Example

  • TS
  • ngAfterViewInit(){
        this.Diagram.widget.cut();
    
        }
    
        @ViewChild('diagram') Diagram: EJComponents<any,any>;

    exportDiagram([options])

    Export the diagram as downloadable files or as data

    Name Type Description
    [options] Object options to export the desired region of diagram to the desired formats.
    Name Type Description
    fileName string name of the file to be downloaded.
    format enum format of the exported file/data.
    mode enum to set whether to export diagram as a file or as raw data.
    region enum to set the region of the diagram to be exported.
    bounds object to export any custom region of diagram.
    margin object to set margin to the exported data.
    stretch enum to resize the diagram content to fill its allocated space.

    Returns:

    • string

    Example

  • TS
  • ngAfterViewInit(){
    //Exports the whole diagram content as an image of JPEG format
        this.Diagram.widget.exportDiagram();
    
        }
    
        @ViewChild('diagram') Diagram: EJComponents<any,any>;
    
    
    options:object;
    
     this.options={
                //name of the file to be downloaded
        fileName: "diagram",
        //Specifies whether to export as files/data
        mode: ej.datavisualization.Diagram.ExportModes.Download,
        //Format of the exported file
        format: ej.datavisualization.Diagram.FileFormats.JPG,
        // Define the custom bounds that has to be exported
        bounds: {
            x: 1000,
            y: 1000,
            width: 500,
            height: 500
        },
     }
    ngAfterViewInit(){
     this.Diagram.widget.exportDiagram(this.options)
    }
    
     @ViewChild('diagram') Diagram: EJComponents<any,any>;

    FileFormats

    Used to export the diagram into user defined file format.

    Name Description
    JPG Used to export the diagram into JPG format.
    PNG Used to export the diagram into PNG format.
    BMP Used to export the diagram into BMP format.
    SVG Used to export the diagram into SVG format.

    ExportModes

    Used to export the diagram as a file or as raw data.

    Name Description
    Download Used to export the diagram as a file.
    Data Used to export the diagram as raw data.

    Region

    Used to set the region of the diagram to be exported.

    Name Description
    Content Used to export the content of the diagram only.
    PageSettings Used to export the page region of the diagram.

    Stretch

    Used to resize the diagram content to fill its allocated space.

    Name Description
    None The diagram content preserves its original size.
    Fill The diagram content is resized to fill the destination dimensions. The aspect ratio is not preserved.
    Uniform The diagram content is resized to fit in the destination dimensions while it preserves its native aspect ratio.
    UniformToFill The diagram content is resized to fill the destination dimensions while it preserves its native aspect ratio. If the aspect ratio of the destination rectangle differs from the source, the source content is clipped to fit in the destination dimensions.

    findNode(name)

    Read a node/connector object by its name

    Name Type Description
    name string name of the node/connector that is to be identified

    Returns:

    • object

    Example

  • TS
  • ngAfterViewInit(){
        this.Diagram.findNode("nodeName");
    
        }
    
        @ViewChild('diagram') Diagram: EJComponents<any,any>;

    fitToPage([mode], [region], [margin])

    Fit the diagram content into diagram viewport

    Name Type Description
    [mode] enum to set the mode of fit to command.
    [region] enum to set whether the region to be fit will be based on diagram elements or page settings.
    [margin] object to set the required margin

    Example

  • TS
  • ngAfterViewInit(){
        this.Diagram.fitToPage(mode,region,margin);
    
        }
    
        @ViewChild('diagram') Diagram: EJComponents<any,any>;

    FitMode

    Used to fit the diagram content within the view port.

    Name Description
    Page Used to fit the diagram content based on page size.
    Width Used to fit the diagram content based on diagram width.
    Height Used to fit the diagram content based on diagram height.

    group()

    Group the selected nodes and connectors

    Example

  • TS
  • ngAfterViewInit(){
        this.Diagram.group();
    
        }
    
        @ViewChild('diagram') Diagram: EJComponents<any,any>;

    insertLabel(name, label, [index])

    Insert a label into a node’s label collection at runtime

    Name Type Description
    name string name of the node to which the label has to be inserted
    label object JSON to define the new label
    [index] number index to insert the label into the node

    Example

  • TS
  • ngAfterViewInit() {
    this.diagram.widget.insertLabel(node.name,{fontColor:"red", text:"newLabel"},0)        
        }
    
        @ViewChild('diagram') Diagram: EJComponents<any,any>;

    layout()

    Refresh the diagram with the specified layout

    Example

  • TS
  • ngAfterViewInit() {
    this.diagram.widget.layout();       
        }
    
        @ViewChild('diagram') Diagram: EJComponents<any,any>;

    load(data)

    Load the diagram

    Name Type Description
    data object JSON data to load the diagram

    Example

  • TS
  • ngAfterViewInit() {
    this.diagram.widget.load(data);       
        }
    
        @ViewChild('diagram') Diagram: EJComponents<any,any>;

    moveForward()

    Visually move the selected object over its closest intersected object

    Example

  • TS
  • ngAfterViewInit() {
    this.diagram.widget.moveForward();       
        }
    
        @ViewChild('diagram') Diagram: EJComponents<any,any>;

    nudge(direction, [delta])

    Move the selected objects by either one pixel or by the pixels specified through argument

    Name Type Description
    direction string specifies the direction to move the selected objects ("left","right",top","bottom")
    [delta] number specifies the number of pixels by which the selected objects have to be moved

    Example

  • TS
  • ngAfterViewInit() {
    this.diagram.widget.nudge("direction",5);       
        }
    
        @ViewChild('diagram') Diagram: EJComponents<any,any>;

    paste([object], [rename])

    Paste the selected object from internal clipboard to diagram

    Name Type Description
    [object] object object to be added to diagram
    [rename] boolean to define whether the specified object is to be renamed or not

    Example

  • TS
  • ngAfterViewInit() {
    //Paste the object from internal clipboard to diagram
    this.Diagram.widget.paste();
    //Add the specific object to diagram
    this.Diagram.widget.paste(obj, true);    
        }
    
        @ViewChild('diagram') Diagram: EJComponents<any,any>;

    print()

    Print the diagram as image

    Example

  • TS
  • ngAfterViewInit() {
    
    this.Diagram.widget.print();    
        }
    
        @ViewChild('diagram') Diagram: EJComponents<any,any>;

    redo()

    Restore the last action that was reverted

    Example

  • TS
  • ngAfterViewInit() {
    
    this.Diagram.widget.redo();    
        }
    
        @ViewChild('diagram') Diagram: EJComponents<any,any>;

    refresh()

    Refresh the diagram at runtime

    Example

  • TS
  • ngAfterViewInit() {
    
    this.Diagram.widget.refresh();    
        }
    
        @ViewChild('diagram') Diagram: EJComponents<any,any>;

    remove([node])

    Remove either the given node/connector or the selected element from diagram

    Name Type Description
    [node] object the node/connector to be removed from diagram

    Example

  • TS
  • ngAfterViewInit() {
    
    this.Diagram.widget.remove();    
        }
    
        @ViewChild('diagram') Diagram: EJComponents<any,any>;

    removePorts(name, ports)

    Add a collection of ports to the node specified by name

    Name Type Description
    name string name of the node to which the ports have to be added
    ports array a collection of ports to be deleted from the specified node

    Example

  • TS
  • ngAfterViewInit() {
    this.Diagram.widget.removePorts(this.diagram.widget.findNode("Rect1"));
        }
    
        @ViewChild('diagram') Diagram: EJComponents<any,any>;

    removeLabels(name, labels)

    Add a collection of ports to the node specified by name

    Name Type Description
    name string name of the node to which the ports have to be added
    labels array a collection of labels to be deleted from the specified node

    Example

  • TS
  • @ViewChild('diagram') diagram: EJComponents<any, any>;
    
    ngAfterViewInit() {
    
             let node = this.diagram.widget.findNode("rect1");
            this.diagram.widget.removeLabels("rect1",node.labels);
    }

    removeSelection(node)

    Remove a particular object from selection list

    Name Type Description
    node object the node/connector to be removed from selection list

    Example

  • TS
  • @ViewChild('diagram') diagram: EJComponents<any, any>;
    
    ngAfterViewInit() {
    
              let node = this.diagram.widget.selectionList[0];
            this.diagram.widget.removeSelection(node);
    }

    sameHeight()

    Scale the selected objects to the height of the first selected object

    Example

  • TS
  • ngAfterViewInit() {
    this.Diagram.widget.sameHeight();
        }
    
        @ViewChild('diagram') Diagram: EJComponents<any,any>;

    sameSize()

    Scale the selected objects to the size of the first selected object

    Example

  • TS
  • ngAfterViewInit() {
    this.Diagram.widget.sameSize();
        }
    
        @ViewChild('diagram') Diagram: EJComponents<any,any>;

    sameWidth()

    Scale the selected objects to the width of the first selected object

    Example

  • TS
  • ngAfterViewInit() {
    this.Diagram.widget.sameWidth();
        }
    
        @ViewChild('diagram') Diagram: EJComponents<any,any>;

    save()

    Returns the diagram as serialized JSON

    Returns:

    • object

    Example

  • TS
  • ngAfterViewInit() {
    this.Diagram.widget.save();
        }
    
        @ViewChild('diagram') Diagram: EJComponents<any,any>;

    scrollToNode(node)

    Bring the node into view

    Name Type Description
    node object the node/connector to be brought into view

    Example

  • TS
  • ngAfterViewInit() {
    let node = this.diagram.widget.selectionList[0];
    this.diagram.widget.scrollToNode(node);
        }
    
        @ViewChild('diagram') Diagram: EJComponents<any,any>;

    selectAll()

    Select all nodes and connector in diagram

    Example

  • TS
  • ngAfterViewInit() {
    this.Diagram.widget.selectAll();
        }
    
        @ViewChild('diagram') Diagram: EJComponents<any,any>;

    sendBackward()

    Visually move the selected object behind its closest intersected object

    Example

  • TS
  • ngAfterViewInit() {
    this.Diagram.widget.sendBackward();
        }
    
        @ViewChild('diagram') Diagram: EJComponents<any,any>;

    sendToBack()

    Visually move the selected object behind all other intersected objects

    Example

  • TS
  • ngAfterViewInit() {
    this.Diagram.widget.sendToBack();
        }
    
        @ViewChild('diagram') Diagram: EJComponents<any,any>;

    spaceAcross()

    Update the horizontal space between the selected objects as equal and within the selection boundary

    Example

  • TS
  • ngAfterViewInit() {
    this.Diagram.widget.spaceAcross();
        }
    
        @ViewChild('diagram') Diagram: EJComponents<any,any>;

    spaceDown()

    Update the vertical space between the selected objects as equal and within the selection boundary

    Example

  • TS
  • ngAfterViewInit() {
    this.Diagram.widget.spaceDown();
        }
    
        @ViewChild('diagram') Diagram: EJComponents<any,any>;

    startLabelEdit(node, label)

    Move the specified label to edit mode

    Name Type Description
    node object node/connector that contains the label to be edited
    label object to be edited

    Example

  • TS
  • ngAfterViewInit() {
    this.Diagram.widget.startLabelEdit(node,node.labels[0]);
        }
    
        @ViewChild('diagram') Diagram: EJComponents<any,any>;

    undo()

    Reverse the last action that was performed

    Example

  • TS
  • ngAfterViewInit() {
    this.Diagram.widget.undo();
        }
    
        @ViewChild('diagram') Diagram: EJComponents<any,any>;

    ungroup()

    Ungroup the selected group

    Example

  • TS
  • ngAfterViewInit() {
    this.Diagram.widget.ungroup();
        }
    
        @ViewChild('diagram') Diagram: EJComponents<any,any>;

    update(options)

    Update diagram at runtime

    Name Type Description
    options object JSON to specify the diagram properties that have to be modified

    Example

  • TS
  • ngAfterViewInit() {
    this.diagram.widget.update({
                tool: ej.datavisualization.Diagram.Tool.ZoomPan,
            });
        }
    
        @ViewChild('diagram') Diagram: EJComponents<any,any>;

    updateConnector(name, options)

    Update Connectors at runtime

    Name Type Description
    name string name of the connector to be updated
    options object JSON to specify the connector properties that have to be updated

    Example

  • TS
  • ngAfterViewInit() {
    this.diagram.widget.updateConnector("connector1", { lineColor: "red", lineWidth: 3 });
        }
    
        @ViewChild('diagram') Diagram: EJComponents<any,any>;

    updateLabel(nodeName, label, options)

    Update the given label at runtime

    Name Type Description
    nodeName string the name of node/connector which contains the label to be updated
    label object the label to be modified
    options object JSON to specify the label properties that have to be updated

    Returns:

    • object

    Example

  • TS
  • ngAfterViewInit() {
    this.diagram.widget.updateConnector("connector1", { lineColor: "red", lineWidth: 3 });
        }
    
        @ViewChild('diagram') Diagram: EJComponents<any,any>;

    updateNode(name, options)

    Update nodes at runtime

    Name Type Description
    name string name of the node that is to be updated
    options object JSON to specify the properties of node that have to be updated

    Example

  • TS
  • ngAfterViewInit() {
    this.diagram.widget.updateNode("node1",{fillColor:"red",borderWidth:"3"});
        }
    
        @ViewChild('diagram') Diagram: EJComponents<any,any>;

    updatePort(nodeName, port, options)

    Update a port with its modified properties at runtime

    Name Type Description
    nodeName string the name of node which contains the port to be updated
    port object the port to be updated
    options object JSON to specify the properties of the port that have to be updated

    Example

  • TS
  • ngAfterViewInit() {
    let node = this.Diagram.widget.selectionList[0];
    let port ={fillColor:"red", visibility:ej.datavisualization.Diagram.PortVisibility.Visible};
    this.diagram.widget.updatePort("node",node.ports[0],port);
    }
    @ViewChild('diagram') Diagram: EJComponents<any,any>;

    updateSelectedObject(name)

    Update the specified node as selected object

    Name Type Description
    name string name of the node to be updated as selected object

    Example

  • TS
  • ngAfterViewInit() {
    this.diagram.widget.updateSelectedObject(name);
        }
    
        @ViewChild('diagram') Diagram: EJComponents<any,any>;

    updateSelection([showUserHandles])

    Update the selection at runtime

    Name Type Description
    [showUserHandles] boolean to specify whether to show the user handles or not

    Example

  • TS
  • ngAfterViewInit() {
    this.diagram.widget.updateSelection();
        }
    
        @ViewChild('diagram') Diagram: EJComponents<any,any>;

    updateUserHandles(node)

    Update user handles with respect to the given node

    Name Type Description
    node object node/connector with respect to which, the user handles have to be updated

    Example

  • TS
  • ngAfterViewInit() {
    let node = this.diagram.widget.selectionList[0];
    this.diagram.widget.updateUserHandles(node);
        }
    
        @ViewChild('diagram') Diagram: EJComponents<any,any>;

    updateViewPort()

    Update the diagram viewport at runtime

    Example

  • TS
  • ngAfterViewInit() {
    this.diagram.widget.updateViewPort();
        }
    
        @ViewChild('diagram') Diagram: EJComponents<any,any>;

    upgrade(data)

    Upgrade the diagram from old version

    Name Type Description
    data object to be upgraded

    Example

  • TS
  • ngAfterViewInit() {
    this.diagram.widget.upgrade(jsonData);
    diagram.load(jsonData);
        }
    
        @ViewChild('diagram') Diagram: EJComponents<any,any>;

    zoomTo([Zoom])

    Used to zoomIn/zoomOut diagram

    Name Type Description
    [Zoom] object options to zoom the diagram(zoom factor, zoomIn/zoomOut)
    Name Type Description
    zoomFactor number Used to increase the zoom-in or zoom-out based on the zoom factor value.
    zoomCommand enum Used to zoom-in or zoom-out the diagram.
    focusPoint object Used to zoom-in or zoom-out the diagram based on the point.

    ZoomCommand

    Used to zoom-in or zoom-out the diagram

    Name Description
    ZoomIn Used to zoom in the Diagram
    ZoomOut Used to zoom out the diagram

    Events

    autoScrollChange

    Triggers When auto scroll is changed

    Name Type Description
    delay string Returns the delay between subsequent auto scrolls
    diagramId string parameter returns the id of the diagram

    Example

  • HTML
  • <ej-diagram #diagram [dataSource]="diagramData" (nodeCollectionChanged) ="nodeCollectionChanged($event)"> </ej-diagram>
  • TS
  • nodeCollectionChanged(args:any){
    //doSomething.
        }

    click

    Triggers when a node, connector or diagram is clicked

    Name Type Description
    element object parameter returns the clicked node, connector or diagram
    actualObject number parameter returns the object that is actually clicked
    offsetX number parameter returns the horizontal coordinate of the mouse pointer, relative to the diagram
    offsetY number parameter returns the vertical coordinate of the mouse pointer, relative to the diagram
    count number parameter returns the count of how many times the mouse button is pressed
    event object parameter returns the event triggered
    diagramId string parameter returns the id of the diagram
    cancel boolean parameter to specify whether or not to cancel the event

    Example

  • HTML
  • <ej-diagram #diagram [dataSource]="diagramData" (click) ="click($event)"> </ej-diagram>
  • TS
  • click(args:any){
    //doSomething.
        }

    connectionChange

    Triggers when the connection is changed

    Name Type Description
    element object parameter returns the connection that is changed between nodes, ports or points
    connection string parameter returns the new source node or target node of the connector
    port object parameter returns the new source port or target port of the connector
    cancel boolean parameter defines whether to cancel the change or not
    diagramId string parameter returns the id of the diagram

    Example

  • HTML
  • <ej-diagram #diagram [dataSource]="diagramData" (connectionChange) ="conncectionChange($event)"> </ej-diagram>
  • TS
  • connectionChange(args:any){
    //doSomething.
        }

    connectorCollectionChange

    Triggers when the connector collection is changed

    Name Type Description
    changeType string parameter returns whether the connector is inserted or removed
    element object parameter returns the connector that is to be added or deleted
    cancel boolean parameter defines whether to cancel the collection change or not
    state string triggers before and after adding the connector in the diagram which can be differentiated through `state` argument. We can cancel the event only before adding the connector.
    diagramId string parameter returns the id of the diagram

    Example

  • HTML
  • <ej-diagram #diagram [dataSource]="diagramData" (connectorCollectionChange) ="connectorCollectionChange($event)"> </ej-diagram>
  • TS
  • connectorCollectionChange(args:any){
    //doSomething.
        }

    connectorSourceChange

    Triggers when the connectors’ source point is changed

    Name Type Description
    element object returns the connector, the source point of which is being dragged
    node object returns the source node of the element
    point object returns the source point of the element
    port object returns the source port of the element
    dragState string returns the state of connection end point dragging(starting, dragging, completed)
    cancel boolean parameter defines whether to cancel the change or not
    diagramId string parameter returns the id of the diagram

    Example

  • HTML
  • <ej-diagram #diagram [dataSource]="diagramData" (connectorSourceChange) ="connectorSourceChange($event)"> </ej-diagram>
  • TS
  • connectorSourceChange(args:any){
    //doSomething.
        }

    connectorTargetChange

    Triggers when the connectors’ target point is changed

    Name Type Description
    element object parameter returns the connector, the target point of which is being dragged
    node object returns the target node of the element
    point object returns the target point of the element
    port object returns the target port of the element
    dragState string returns the state of connection end point dragging(starting, dragging, completed)
    cancel boolean parameter defines whether to cancel the change or not
    diagramId string parameter returns the id of the diagram

    Example

  • HTML
  • <ej-diagram #diagram [dataSource]="diagramData" (connectorTargetChange) ="connectorTargetChange($event)"> </ej-diagram>
  • TS
  • connectorTargetChange(args:any){
    //doSomething.
        }

    contextMenuBeforeOpen

    Triggers before opening the context menu

    Name Type Description
    diagram object parameter returns the diagram object
    contextmenu object parameter returns the actual arguments from context menu
    target object parameter returns the object that was clicked
    diagramId string parameter returns the id of the diagram
    cancel boolean parameter returns whether or not to cancel the dragOver event
    model object parameter returns the actual click event arguments that explains which button is clicked
    type string parameter returns the type of the event triggered

    Example

  • HTML
  • <ej-diagram #diagram [dataSource]="diagramData" (contextMenuBeforeOpen) ="contextMenuBeforeOpen($event)"> </ej-diagram>
  • TS
  • contextMenuBeforeOpen(args:any){
    //doSomething.
        }

    contextMenuClick

    Triggers when a context menu item is clicked

    Name Type Description
    id string parameter returns the id of the selected context menu item
    text string parameter returns the text of the selected context menu item
    parentId string parameter returns the parent id of the selected context menu item
    parentText string parameter returns the parent text of the selected context menu item
    target object parameter returns the object that was clicked
    canExecute boolean parameter defines whether to execute the click event or not
    diagramId string parameter returns the id of the diagram
    cancel boolean parameter to specify whether or not to cancel the event
    element object parameter returns the element of the object that was clicked
    selectedItem object parameter returns the object that is selected
    events object parameter returns the model of the diagram

    Example

  • HTML
  • <ej-diagram #diagram [dataSource]="diagramData" (contextMenuClick) ="contextMenuClick($event)"> </ej-diagram>
  • TS
  • //contextMenuClick event for diagram
     contextMenuClick(args:any){
    //doSomething.
        }

    doubleClick

    Triggers when a node, connector or diagram model is clicked twice

    Name Type Description
    actualObject object parameter returns the object that is actually clicked
    element object parameter returns the selected object
    diagramId string parameter returns the id of the diagram
    cancel boolean parameter to specify whether or not to cancel the event

    Example

  • HTML
  • <ej-diagram #diagram [dataSource]="diagramData" (doubleClick) ="doubleClick($event)"> </ej-diagram>
  • TS
  • //doubleClick event for diagram
     doubleClick(args:any){
    //doSomething.
        }

    drag

    Triggers while dragging the elements in diagram

    Name Type Description
    element object parameter returns the node or connector that is being dragged
    oldValue object parameter returns the previous position of the node/connector
    newValue object parameter returns the new position of the node/connector
    dragState string parameter returns the state of drag event (Starting, dragging, completed)
    cancel boolean parameter returns whether or not to cancel the drag event
    diagramId string parameter returns the id of the diagram
    offset object parameter returns the offset of the selected items

    Example

  • HTML
  • <ej-diagram #diagram [dataSource]="diagramData" (drag) ="drag($event)"> </ej-diagram>
  • TS
  • //drag event for diagram
     drag(args:any){
    //doSomething.
        }

    dragEnter

    Triggers when a symbol is dragged into diagram from symbol palette

    Name Type Description
    element object parameter returns the node or connector that is dragged into diagram
    cancel boolean parameter returns whether to add or remove the symbol from diagram
    diagramId string parameter returns the id of the diagram

    Example

  • HTML
  • <ej-diagram #diagram [dataSource]="diagramData" (dragEnter) ="dragEnter($event)"> </ej-diagram>
  • TS
  • //dragEnter event for diagram
     dragEnter(args:any){
    //doSomething.
        }

    dragLeave

    Triggers when a symbol is dragged outside of the diagram.

    Name Type Description
    element object parameter returns the node or connector that is dragged outside of the diagram
    cancel boolean parameter returns whether or not to cancel the dragOver event
    diagramId string parameter returns the id of the diagram

    Example

  • HTML
  • <ej-diagram #diagram [dataSource]="diagramData" (dragLeave) ="dragLeave($event)"> </ej-diagram>
  • TS
  • //dragLeave event for diagram
     dragLeave(args:any){
    //doSomething.
        }

    dragOver

    Triggers when a symbol is dragged over diagram

    Name Type Description
    element object parameter returns the node or connector that is dragged over diagram
    allowDrop boolean parameter defines whether the symbol can be dropped at the current mouse position
    target object parameter returns the node/connector over which the symbol is dragged
    oldValue object parameter returns the previous position of the node/connector
    newValue object parameter returns the new position of the node/connector
    cancel boolean parameter returns whether or not to cancel the dragOver event
    diagramId string parameter returns the id of the diagram

    Example

  • HTML
  • <ej-diagram #diagram [dataSource]="diagramData" (dragOver) ="dragOver($event)"> </ej-diagram>
  • TS
  • //dragOver event for diagram
     dragOver(args:any){
    //doSomething.
        }

    drop

    Triggers when a symbol is dragged and dropped from symbol palette to drawing area

    Name Type Description
    element object parameter returns node or connector that is being dropped
    cancel boolean parameter returns whether or not to cancel the drop event
    source object parameter returns the object from where the element is dragged
    target object parameter returns the object over which the object will be dropped
    objectType String parameter returns the enum which defines the type of the source
    diagramId string parameter returns the id of the diagram

    Example

  • HTML
  • <ej-diagram #diagram [dataSource]="diagramData" (drop) ="drop($event)"> </ej-diagram>
  • TS
  • //drop event for diagram
     drop(args:any){
    //doSomething.
        }

    editorFocusChange

    Triggers when editor got focus at the time of node’s label or text node editing.

    Name Type Description
    model object Returns the diagram model.
    event object parameter returns the editor element
    type string Returns the name of the event
    diagramId string parameter returns the id of the diagram

    Example

  • HTML
  • <ej-diagram #diagram [dataSource]="diagramData" (draeditorFocusChange) ="editorFocusChange($event)"> </ej-diagram>
  • TS
  • //editorFocusChange event for diagram
     editorFocusChange(args:any){
    //doSomething.
        }

    groupChange

    Triggers when a child is added to or removed from a group

    Name Type Description
    element object parameter returns the object that is added to/removed from a group
    oldParent object parameter returns the old parent group(if any) of the object
    newParent object parameter returns the new parent group(if any) of the object
    cause string parameter returns the cause of group change("group", unGroup")
    diagramId string parameter returns the id of the diagram

    Example

  • HTML
  • <ej-diagram #diagram [dataSource]="diagramData" (groupChange) ="groupChange($event)"> </ej-diagram>
  • TS
  • //groupChange event for diagram
     groupChange(args:any){
    //doSomething.
        }

    historyChange

    Triggers when a change is reverted or restored(undo/redo)

    Name Type Description
    changes Array An array of objects, where each object represents the changes made in last undo/redo. To explore how the changes are defined, refer [Undo Redo Changes](#undo-redo-changes)
    Source Array A collection of objects that are changed in the last undo/redo
    diagramId string parameter returns the id of the diagram
    cancel boolean parameter to specify whether or not to cancel the event
    cause boolean parameter returns the model of the diagram

    Undo Redo Changes

    Name Type Description
    type string Returns the type of change that is reverted/restored (example:positionChanged, sizeChanged)
    newValues Object Returns the new values of the properties that are changed.(example:newValues:{offset:60,offset:60,width:60,height:60})
    oldValues Object Returns the old values of the properties that are changed.(example:oldValues:{offset:60,offset:60,width:60,height:60})
    addedItems Array Returns the items that are newly added to model
    deletedItems Array Returns the items that are deleted from model
    diagramId string parameter returns the id of the diagram

    Example

  • HTML
  • <ej-diagram #diagram [dataSource]="diagramData" (historyChange) ="historyChange($event)"> </ej-diagram>
  • TS
  • //historyChange Enter event for diagram
     historyChange(args:any){
    //doSomething.
        }

    itemClick

    Triggers when a diagram element is clicked

    Name Type Description
    actualObject object parameter returns the object that was actually clicked
    selectedObject object parameter returns the object that is selected
    cancel boolean parameter returns whether or not to cancel the drop event
    event object parameter returns the model of the diagram
    diagramId string parameter returns the id of the diagram

    Example

  • HTML
  • <ej-diagram #diagram [dataSource]="diagramData" (itemClick) ="itemClick($event)"> </ej-diagram>
  • TS
  • //itemClick event for diagram
     itemClick(args:any){
    //doSomething.
        }

    mouseEnter

    Triggers when mouse enters a node/connector

    Name Type Description
    element object parameter returns the target node or connector
    source object parameter returns the object from where the selected object is dragged
    target object parameter returns the target object over which the selected object is dragged
    diagramId string parameter returns the id of the diagram
    cancel boolean parameter returns whether or not to cancel the dragOver event

    Example

  • HTML
  • <ej-diagram #diagram [dataSource]="diagramData" (mouseEnter) ="mouseEnter($event)"> </ej-diagram>
  • TS
  • //mouseEvent event for diagram
     mouseEnter(args:any){
    //doSomething.
        }

    mouseLeave

    Triggers when mouse leaves node/connector

    Name Type Description
    element object parameter returns the target node or connector
    source object parameter returns the object from where the selected object is dragged
    target object parameter returns the target object over which the selected object is dragged
    cancel boolean parameter returns whether or not to cancel the dragOver event
    diagramId string parameter returns the id of the diagram

    Example

  • HTML
  • <ej-diagram #diagram [dataSource]="diagramData" (mouseLeave) ="mouseLeave($event)"> </ej-diagram>
  • TS
  • //mouseLeave event for diagram
     mouseLeave(args:any){
    //doSomething.
        }

    mouseOver

    Triggers when mouse hovers over a node/connector

    Name Type Description
    element object parameter returns the target node or connector
    source object parameter returns the object from where the element is dragged
    target object parameter returns the object over which the element is being dragged.
    cancel boolean parameter returns whether or not to cancel the dragOver event
    diagramId string parameter returns the id of the diagram

    Example

  • HTML
  • <ej-diagram #diagram [dataSource]="diagramData" (mouseOver) ="momouseOver($event)"> </ej-diagram>
  • TS
  • //mouseOver event for diagram
     mouseOver(args:any){
    //doSomething.
        }

    nodeCollectionChange

    Triggers when node collection is changed

    Name Type Description
    changeType string parameter returns whether the node is to be added or removed
    element object parameter returns the node which needs to be added or deleted
    cancel boolean parameter defines whether to cancel the collection change or not
    state string triggers before and after adding the node in the diagram which can be differentiated through `state` argument. We can cancel the event only before adding the node
    diagramId string parameter returns the id of the diagram

    Example

  • HTML
  • <ej-diagram #diagram [dataSource]="diagramData" (nodeCollectionChange) ="nodeCollectionChange($event)"> </ej-diagram>
  • TS
  • //nodeCollectionChange event for diagram
     nodeCollectionChange(args:any){
    //doSomething.
        }

    propertyChange

    Triggers when the node properties(x, y,width and height alone) are changed using nudge commands or updateNode API.

    Name Type Description
    element object parameter returns the selected element
    cause String parameter returns the action is nudge or not
    newValue object parameter returns the new value of the node property that is being changed
    oldValue object parameter returns the old value of the property that is being changed
    propertyName string parameter returns the name of the property that is changed
    diagramId string parameter returns the id of the diagram
    cancel boolean parameter defines whether to cancel the property change or not

    Example

  • HTML
  • <ej-diagram #diagram [dataSource]="diagramData" (propertyChange) ="propertyChange($event)"> </ej-diagram>
  • TS
  • //propertyChange event for diagram
     propertyChange(args:any){
    //doSomething.
        }

    rotationChange

    Triggers when the diagram elements are rotated

    Name Type Description
    element object parameter returns the node that is rotated
    oldValue object parameter returns the previous rotation angle
    newValue object parameter returns the new rotation angle
    cancel boolean parameter to specify whether or not to cancel the event
    diagramId string parameter returns the id of the diagram
    cause string parameter returns the actual click event arguments that explains which button is clicked

    Example

  • HTML
  • <ej-diagram #diagram [dataSource]="diagramData" (rotationChange) ="rotationChange($event)"> </ej-diagram>
  • TS
  • //rotationChange event for diagram
     rotationChange(args:any){
    //doSomething.
        }

    scrollChange

    Triggers when the diagram is zoomed or panned

    Name Type Description
    newValues object Parameter returns the new zoom value, horizontal and vertical scroll offsets.
    oldValues object parameter returns the previous zoom value, horizontal and vertical scroll offsets.
    cancel boolean parameter returns whether or not to cancel the dragOver event
    diagramId string parameter returns the id of the diagram
    cause string Parameter returns the new zoom value, horizontal and vertical scroll offsets.

    Example

  • HTML
  • <ej-diagram #diagram [dataSource]="diagramData" (scrollChange) ="scrollChange($event)"> </ej-diagram>
  • TS
  • //scrollChange event for diagram
     scrollChange(args:any){
    //doSomething.
        }

    segmentChange

    Triggers when a connector segment is edited

    Name Type Description
    element object Parameter returns the connector that is being edited
    dragState string parameter returns the state of editing (starting, dragging, completed)
    point object parameter returns the current mouse position
    cancel boolean parameter to specify whether or not to cancel the event
    diagramId string parameter returns the id of the diagram

    Example

  • HTML
  • <ej-diagram #diagram [dataSource]="diagramData" (segmentChange) ="segmentChange($event)"> </ej-diagram>
  • TS
  • //segmentChange event for diagram
     segmentChange(args:any){
    //doSomething.
        }

    selectionChange

    Triggers when the selection is changed in diagram

    Name Type Description
    changeType string parameter returns whether the item is selected or removed selection
    element object parameter returns the item which is selected or to be selected
    oldItems array parameter returns the collection of nodes and connectors that have to be removed from selection list
    newItems array parameter returns the collection of nodes and connectors that have to be added to selection list
    selectedItems array parameter returns the collection of nodes and connectors that will be selected after selection change
    cancel boolean parameter to specify whether or not to cancel the selection change event
    state string triggers before and after adding the selection to the object in the diagram which can be differentiated through `state` argument. We can cancel the event only before the selection of the object.
    diagramId string parameter returns the id of the diagram
    cause string parameter returns the actual cause of the event

    Example

  • HTML
  • <ej-diagram #diagram [dataSource]="diagramData" (selectionChange) ="selectionChange($event)"> </ej-diagram>
  • TS
  • //selectionChange event for diagram
     selectionChange(args:any){
    //doSomething.
        }

    sizeChange

    Triggers when a node is resized

    Name Type Description
    element object parameter returns node that was resized
    cancel boolean parameter to cancel the size change
    newValue object parameter returns the new width, height, offsetX and offsetY values of the element that is being resized
    oldValue object parameter returns the previous width,height,offsetX and offsetY values of the element that is being resized
    resizeState string parameter returns the state of resizing(starting,resizing,completed)
    offset object parameter returns the difference between new and old value
    diagramId string parameter returns the id of the diagram
    direction string parameter returns the direction of the node is resized

    Example

  • HTML
  • <ej-diagram #diagram [dataSource]="diagramData" (sizeChange) ="sizeChange($event)"> </ej-diagram>
  • TS
  • //sizeChange event for diagram
     sizeChange(args:any){
    //doSomething.
        }

    textChange

    Triggers when label editing is ended

    Name Type Description
    element object parameter returns the node that contains the text being edited
    value string parameter returns the new text
    keyCode string parameter returns the keyCode of the key entered
    diagramId string parameter returns the id of the diagram
    cancel boolean parameter to specify whether or not to cancel the event

    Example

  • HTML
  • <ej-diagram #diagram [dataSource]="diagramData" (textChange) ="textChange($event)"> </ej-diagram>
  • TS
  • //textChange event for diagram
     textChange(args:any){
    //doSomething.
        }

    create

    Triggered when the diagram is rendered completely.

    Name Type Description
    model object Returns the diagram model.
    type string Returns the name of the event
    diagramId string parameter returns the id of the diagram

    Example

  • HTML
  • <ej-diagram #diagram [dataSource]="diagramData" (create) ="create($event)"> </ej-diagram>
  • TS
  • //create event for diagram
     create(args:any){
    //doSomething.
        }