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

Connectors are not displayed propertly


I have a diagram control bind to JSON data with this configuration:

MultipleParent.DiagramModel.PageSettings.ScrollLimit = Syncfusion.JavaScript.DataVisualization.DiagramEnums.ScrollLimit.Diagram;
MultipleParent.DiagramModel.Layout.Type = Syncfusion.JavaScript.DataVisualization.DiagramEnums.LayoutTypes.None;
MultipleParent.DiagramModel.Layout.Orientation = Syncfusion.JavaScript.DataVisualization.DiagramEnums.LayoutOrientations.LeftToRight;

In the diagram, the connector are not displayed properly. The nodes are displayed perfectly in the configurated position, but you have to move a node to watch the connectors.


5 Replies

RT Ramya Thirugnanam Syncfusion Team May 22, 2019 07:23 AM UTC

Hi Pedro,  
Could you please confirm us whether your requirement is to create a layout or diagram with manual positioning or automatic layout?  From the given code example, The LayoutType is set as None, so an diagram nodes and connectors are rendered at 0,0 position. We have created a sample to represent the hierarchical layout creation. Please find the sample as below. 
Please find the help documentation for layout and manual connection for nodes. 
Could you please provide the screenshot of diagram and json data if the provided sample does not help to achieve your requirement?  This will help us to guide you with appropriate solution at the earliest. 
Ramya T 

PM Pedro Martínez May 22, 2019 08:19 AM UTC


I want to create the diagram with manual position of the nodes. The position is set in the datasource with offsetX and offsetY properties. But, it's imposible to set the position of the connectors this way. Is there a way to set the position of the connectors automatically?

I have modified the sample to reproduce the issue.


Attachment: layoutsample65901607_4299c712.zip

RT Ramya Thirugnanam Syncfusion Team May 23, 2019 07:33 AM UTC

Hi Pedro,  
The ConnectionDataSourceSettings will generate connectors when automatic layout is used.  With respect to your scenario  “layout type as None”,  We need to generate the connector manually.  We have modified your sample to create a connector based on the node dataSource(orgChart.json).  
Please refer to the below online sample in which we have obtained node and connector dataSource to render a layout.  
Ramya T 

PM Pedro Martínez May 23, 2019 12:57 PM UTC


It works perfectly. But, how to avoid overlapping with the nodes and connectors?


RT Ramya Thirugnanam Syncfusion Team May 24, 2019 05:00 AM UTC

Hi Pedro,  
Please set Routing constraints in diagram and connector constraints to avoid overlapping of connectors. Please refer to an code example as below.  
Code example:   
DiagramProperties model = new DiagramProperties();  
//set routing constraints in diagram model  
model.Constraints = DiagramConstraints.Default | DiagramConstraints.Routing;  
  Connector connector = new Connector();  
  //set routing constraints in connector  
  connector.Constraints = ConnectorConstraints.Default | ConnectorConstraints.Routing;  
Ramya T  

Live Chat Icon For mobile
Up arrow icon