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. Image for the cookie policy date
close icon

Connector Annotation issue on connector type switch

Hi Team-

we are facing some issue with Connector's annotation style while switching between connector's type. 

Here are the steps:

We are using automatic layout while creating diagram.

User might be able to change the coordinates of the nodes which we store in storage on node's position change event (positionChange event)

when we load the diagram , we override node's default position on created event of the diagram.

At any point when we trigger the position change event ,

if (args.state == 'Completed')


store the coordinates ();

rearrange the connectors();


in the rearrangeConnector we switch the connector type to StraightLine and then by Orthogonal(our default type is always Orthogonal)

the reason we are doing this is because on position change connector tend to add a lot of unnecessary segments , therefore by changing it to straightLine and then to Orthogonal it rearranges itself with least segment in Orthogonal type. 

Only problem in this approach is the annotation of connector which is supposed to stick to the middle of the connector:

function getConnectorDefaults(obj) {

    obj.type = 'Orthogonal';

    obj.style.strokeColor = '#cdcdcd';

    obj.style.strokeWidth = 1;

    obj.constraints =


        | ej.diagrams.ConnectorConstraints.DragSegmentThumb) &

        ~ej.diagrams.ConnectorConstraints.DragSourceEnd &



    obj.targetDecorator = {

        style: {

            strokeColor: '#cdcdcd',

            fill: '#cdcdcd',



    obj.annotations = [{

        content: '',

        margin: { top: 10, bottom: 10 },

        horizontalAlignment: 'Center',

        verticalAlignment: 'Top',

        style: { fontSize: '11' },


    return obj;


is still holding on to it's position as if the connector is straightLine(not orthogonal)

I have attached images to explain this behavior and code available in console in the attached screenshot.

I want the annotation to retain it's style in the same way when the connector type - Orthogonal.

Attachment: ConnectorTransition_3f283a38.zip

1 Reply

SG Shyam G Syncfusion Team April 25, 2023 08:57 AM UTC

Hi Sourangsu,

We have created a sample in which changed the connector type at runtime. The annotation is positioned correctly in the connector. We could not able to replicate an issue at our end. Could you please share us more details such as modify the below sample or video.

sample: https://stackblitz.com/edit/djm7vi?file=index.html,index.js


Shyam G

Live Chat Icon For mobile
Up arrow icon