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
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

annotation width is ignored when diagram loaded using .loadDiagram() method.

Thread ID:





150603 Jan 13,2020 11:56 AM UTC Jan 20,2020 06:48 AM UTC Angular - EJ 2 6
Tags: Diagram
Asked On January 13, 2020 11:56 AM UTC

Hello Syncfusion Team,

I'm using the latest version of diagram component in my app:"@syncfusion/ej2-angular-diagrams": "^17.3.34".

In the app: 
  • The diagrams are saved as json using the .saveDiagram() method when user's session ends. 
  • Similarly, when the user re-logs in, their diagrams are loaded from json using the .loadDiagram() method. 
I notice that the annotation width is ignored when reloading. I have a stackblitz repro for this issue: https://stackblitz.com/edit/annotation-pagerefresh-issue-2
  • In the diagram json (diagramContentAsJson.ts file), there is a text annotation width: 300 and height: 40 on the BasicShapeNode. 
  • However when the diagram is loaded from JSON, the annotation's width setting is completely ignored.
I did notice that if you select/click just the annotation (not the node) and press any of the arrow keys (up/down/right/left), then the annotation will revert back to its specified width. 

Please let me know if this is a bug in the component or whether I'm doing something wrong.


Shyam G [Syncfusion]
Replied On January 14, 2020 12:04 PM UTC

Hi Mithun, 
We will validate your issue and update you with more details on 20th January, 2020. 
Shyam G 

Replied On January 15, 2020 11:34 AM UTC

Hi Shyam,

Is there any way we can expedite this one particular issue (it's holding up a release delivery on our end). 

If possible, we'd like for this issue to be prioritized above the other ones we reported (safari black background while printing, z-index errors while grouping nodes etc)? 

Any quick-n-dirty hacks/workarounds are also fine in the meanwhile. 


Shyam G [Syncfusion]
Replied On January 15, 2020 01:39 PM UTC

Hi Mithun, 
Sorry for the incorrect update and please ignore it. 
We will validate youw issue and update you with more details on 17th January, 2020. 
Shyam G 

Naganathan Ganesh Babu [Syncfusion]
Replied On January 17, 2020 05:46 AM UTC

Hi Mithun, 
On further analyzed, you had assigned “textWrapping” property for that annotation as "WrapWithOverflow". If the textWrapping ptoperty is assigned as "WrapWithOverflow", the annotation width will be same as node’s width. So, only the annotation width is assigned as 100. If you need the annotation value to be assigned as 300, then please assign textWrapping property as "NoWrap" such that the annotation width will be assigned to 300 (i.e the width of the annotation). We had attached the modified sample link below for the further reference. 
Naganathan K G 

Replied On January 17, 2020 08:06 AM UTC

Thanks Naganathan! 

This resolves my issue. Appreciate the help! 

BTW - I'm not specifying any value for 'textWrapping'. Syncfusion's DiagramComponent assigns 'WrapWithOverflow' as the default value.

I propose that Syncfusion change the default value to 'NoWrap' in the DiagramComponent. 



Shyam G [Syncfusion]
Replied On January 20, 2020 06:48 AM UTC

Hi Mithun, 

The default value of textWrapping should not be changed because it may affect our other customers. As mentioned earlier, please set textWrapping as NoWrap in your application to resolve your issue. 

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

Live Chat Icon For mobile
Live Chat Icon