We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy.
Unfortunately, activation email could not send to your email. Please try again.

Adding labels for edge dimensions of a rectangle on the fly

Thread ID:





121679 Jan 15,2016 09:50 AM Jan 18,2016 06:56 AM JavaScript 1
Tags: ejDiagram
Tezcan Cirakoglu
Asked On January 15, 2016 09:50 AM

Hi there,

When we want to draw a rectangle we use this code; 

var rectObject = {
type: ej.datavisualization.Diagram.Shapes.Basic,
shape: "rectangle",
fillColor: "#fcbc7c",
borderColor: "#f89b4c",
labels: [
       "text": "0 cm",
       readOnly: true,
       offset: { x: 0.5, y: 0},
       margin: { top: -20 }
                "text": "0 cm",
                readOnly: true,
                offset: { x: 0.5, y: 1 },
                margin: { top: 20 }
                "text": "0 cm",
                readOnly: true,
                offset: { x: 0, y: 0.5 },
                margin: { left: -20 }
                "text": "0 cm",
                readOnly: true,
                offset: { x: 1, y: 0.5 },
                margin: { right: -20 }

After then,

var diagram = $("#diagram").ejDiagram("instance");
//JSON to create a rectangle
diagram.model.drawType = rectObject;

//To draw an object once, activate draw once
   tool: ej.datavisualization.Diagram.Tool.DrawOnce,

What we need to do is, when the user is going on drawing rectangle and not finished yet, we want to update all four labels with the length of four lines of rectangle. Can we do this via api?

best regards

Shyam G [Syncfusion]
Replied On January 18, 2016 06:56 AM

Hi Tezcan,

If you need to update the label before the object adds into the diagram, then you can use nodeCollectionChange event to achieve your requirement. Also if you need to update the label once the drawing(drawing rectangle object) completed, then you can use updateLabel method to achieve your requirement. please refer to the code example and JSPlayground link below.

Code example:

            //define nodeCollectionChange event

function nodeCollectionChange(args) {            

            if (args && args.element) {

                for (i = 0; i < args.element.labels.length; i++) {

                    args.element.labels[i].text = "1 cm";




function updateLabel() {

            var diagram = $("#diagram").ejDiagram("instance");

            var node = diagram.model.selectedItems.children[0];

            if (node) {

            //update the label at runtime

                diagram.updateLabel(node.name, node.labels[0], { text: "2cm" });


JSPlayground link:http://jsplayground.syncfusion.com/oujc30b3

Shyam G


This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.