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. (Last updated on: November 16, 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Adding labels for edge dimensions of a rectangle on the fly

Thread ID:





121679 Jan 15,2016 02:50 PM UTC Jan 18,2016 11:56 AM UTC JavaScript 1
Tags: ejDiagram
Tezcan Cirakoglu
Asked On January 15, 2016 02:50 PM UTC

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 11:56 AM UTC

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.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon 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.Close Icon