1. Home
  2. Forum
  3. React - EJ 2
  4. Connector lines are overlapping nodes in diagram

Connector lines are overlapping nodes in diagram

Hi team,

I am implementing a Syncfunction diagram, but the connector lines are overlapping nodes. Could you guy help me with that? I put a screenshot & code below.

Thank you in advance!

Image_3177_1742514817249

import { createRoot } from 'react-dom/client';
import * as React from 'react';
import {
  ComplexHierarchicalTree,
  DataBinding,
  LineDistribution,
  DiagramComponent,
  ConnectionPointOrigin,
  Inject,
  DiagramConstraints,
  LineRouting,
  SnapConstraints,
  ConnectorBridging
} from '@syncfusion/ej2-react-diagrams';

import { registerLicense } from '@syncfusion/ej2-base';
registerLicense(
  ''
);

function diagramTemplate(props) {
  return (
    <div
      style={{
        border: '1px solid black',
        height: '100%',
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center',
      }}
    >
      abc
    </div>
  );
}

const nodes = [
  {
    width: 170,
    height: 50,
    shape: {
      type: 'HTML',
    },
    id: 'node-9c05060d-8ff5-457e-bb69-b9f81039def5',
  },
  {
    width: 170,
    height: 50,
    shape: {
      type: 'HTML',
    },
    id: 'node-5fc2fd4e-d9e3-4969-92ec-af696bc95c2d',
  },
  {
    width: 170,
    height: 50,
    shape: {
      type: 'HTML',
    },
    id: 'node-7861f5e5-9bc8-4ca3-9c9d-5985f15c1386',
  },
  {
    width: 170,
    height: 50,
    shape: {
      type: 'HTML',
    },
    id: 'node-03319bb8-4ad1-4bc9-b71f-585f784cf721',
  },
  {
    width: 170,
    height: 50,
    shape: {
      type: 'HTML',
    },
    id: 'node-aefb689a-8dca-4a65-b93e-8842e7c24d72',
  },
  {
    width: 170,
    height: 50,
    shape: {
      type: 'HTML',
    },
    id: 'node-1ea3088d-af9d-4e13-8db2-61bfd237bd5c',
  },
  {
    width: 170,
    height: 50,
    shape: {
      type: 'HTML',
    },
    id: 'node-641308cf-e1e0-42d0-8199-3f9d45225334',
  },
  {
    width: 170,
    height: 50,
    shape: {
      type: 'HTML',
    },
    id: 'node-e7b98adf-dcbc-4576-a96d-acf4ca523964',
  },
  {
    width: 170,
    height: 50,
    shape: {
      type: 'HTML',
    },
    id: 'node-f8a2a41b-e992-460e-91b2-5abdcceed7a6',
  },
  {
    width: 170,
    height: 50,
    shape: {
      type: 'HTML',
    },
    id: 'node-3c56a5ff-1f00-4ba6-9e45-9a3075068b59',
  },
  {
    width: 170,
    height: 50,
    shape: {
      type: 'HTML',
    },
    id: 'node-32aa00e9-125f-4925-b527-aa74a1d54721',
  },
  {
    width: 170,
    height: 50,
    shape: {
      type: 'HTML',
    },
    id: 'node-52932097-4c9d-459d-9fcf-7e3742973ee0',
  },
  {
    width: 170,
    height: 50,
    shape: {
      type: 'HTML',
    },
    id: 'node-272b5692-982d-4d34-a0ce-a7e46ee09b92',
  },
  {
    width: 170,
    height: 50,
    shape: {
      type: 'HTML',
    },
    id: 'node-97717e2b-0360-4d6b-899a-5125e266fe97',
  },
  {
    width: 170,
    height: 50,
    shape: {
      type: 'HTML',
    },
    id: 'node-51fae793-1f2b-49ee-9cac-2cb2cebf695a',
  },
];

const connectors = [
  {
    sourceID: 'node-9c05060d-8ff5-457e-bb69-b9f81039def5',
    type: 'Orthogonal',
    cornerRadius: 5,
    targetDecorator: {
      shape: 'Arrow',
      height: 7,
      width: 7,
    },
    style: {
      strokeColor: '#6d6d6d',
    },
    targetID: 'node-5fc2fd4e-d9e3-4969-92ec-af696bc95c2d',
    id: 'connector_1',
  },
  {
    sourceID: 'node-9c05060d-8ff5-457e-bb69-b9f81039def5',
    type: 'Orthogonal',
    cornerRadius: 5,
    targetDecorator: {
      shape: 'Arrow',
      height: 7,
      width: 7,
    },
    style: {
      strokeColor: '#6d6d6d',
    },
    targetID: 'node-7861f5e5-9bc8-4ca3-9c9d-5985f15c1386',
    id: 'connector_2',
  },
  {
    sourceID: 'node-03319bb8-4ad1-4bc9-b71f-585f784cf721',
    type: 'Orthogonal',
    cornerRadius: 5,
    targetDecorator: {
      shape: 'Arrow',
      height: 7,
      width: 7,
    },
    style: {
      strokeColor: '#6d6d6d',
    },
    targetID: 'node-aefb689a-8dca-4a65-b93e-8842e7c24d72',
    id: 'connector_3',
  },
  {
    sourceID: 'node-03319bb8-4ad1-4bc9-b71f-585f784cf721',
    type: 'Orthogonal',
    cornerRadius: 5,
    targetDecorator: {
      shape: 'Arrow',
      height: 7,
      width: 7,
    },
    style: {
      strokeColor: '#6d6d6d',
    },
    targetID: 'node-1ea3088d-af9d-4e13-8db2-61bfd237bd5c',
    id: 'connector_4',
  },
  {
    sourceID: 'node-e7b98adf-dcbc-4576-a96d-acf4ca523964',
    type: 'Orthogonal',
    cornerRadius: 5,
    targetDecorator: {
      shape: 'Arrow',
      height: 7,
      width: 7,
    },
    style: {
      strokeColor: '#6d6d6d',
    },
    targetID: 'node-f8a2a41b-e992-460e-91b2-5abdcceed7a6',
    id: 'connector_5',
  },
  {
    sourceID: 'node-e7b98adf-dcbc-4576-a96d-acf4ca523964',
    type: 'Orthogonal',
    cornerRadius: 5,
    targetDecorator: {
      shape: 'Arrow',
      height: 7,
      width: 7,
    },
    style: {
      strokeColor: '#6d6d6d',
    },
    targetID: 'node-272b5692-982d-4d34-a0ce-a7e46ee09b92',
    id: 'connector_6',
  },
  {
    sourceID: 'node-e7b98adf-dcbc-4576-a96d-acf4ca523964',
    type: 'Orthogonal',
    cornerRadius: 5,
    targetDecorator: {
      shape: 'Arrow',
      height: 7,
      width: 7,
    },
    style: {
      strokeColor: '#6d6d6d',
    },
    targetID: 'node-3c56a5ff-1f00-4ba6-9e45-9a3075068b59',
    id: 'connector_7',
  },
  {
    sourceID: 'node-e7b98adf-dcbc-4576-a96d-acf4ca523964',
    type: 'Orthogonal',
    cornerRadius: 5,
    targetDecorator: {
      shape: 'Arrow',
      height: 7,
      width: 7,
    },
    style: {
      strokeColor: '#6d6d6d',
    },
    targetID: 'node-9c05060d-8ff5-457e-bb69-b9f81039def5',
    id: 'connector_8',
  },
  {
    sourceID: 'node-e7b98adf-dcbc-4576-a96d-acf4ca523964',
    type: 'Orthogonal',
    cornerRadius: 5,
    targetDecorator: {
      shape: 'Arrow',
      height: 7,
      width: 7,
    },
    style: {
      strokeColor: '#6d6d6d',
    },
    targetID: 'node-32aa00e9-125f-4925-b527-aa74a1d54721',
    id: 'connector_9',
  },
  {
    sourceID: 'node-52932097-4c9d-459d-9fcf-7e3742973ee0',
    type: 'Orthogonal',
    cornerRadius: 5,
    targetDecorator: {
      shape: 'Arrow',
      height: 7,
      width: 7,
    },
    style: {
      strokeColor: '#6d6d6d',
    },
    targetID: 'node-e7b98adf-dcbc-4576-a96d-acf4ca523964',
    id: 'connector_10',
  },
  {
    sourceID: 'node-52932097-4c9d-459d-9fcf-7e3742973ee0',
    type: 'Orthogonal',
    cornerRadius: 5,
    targetDecorator: {
      shape: 'Arrow',
      height: 7,
      width: 7,
    },
    style: {
      strokeColor: '#6d6d6d',
    },
    targetID: 'node-9c05060d-8ff5-457e-bb69-b9f81039def5',
    id: 'connector_11',
  },
  {
    sourceID: 'node-272b5692-982d-4d34-a0ce-a7e46ee09b92',
    type: 'Orthogonal',
    cornerRadius: 5,
    targetDecorator: {
      shape: 'Arrow',
      height: 7,
      width: 7,
    },
    style: {
      strokeColor: '#6d6d6d',
    },
    targetID: 'node-03319bb8-4ad1-4bc9-b71f-585f784cf721',
    id: 'connector_12',
  },
  {
    sourceID: 'node-97717e2b-0360-4d6b-899a-5125e266fe97',
    type: 'Orthogonal',
    cornerRadius: 5,
    targetDecorator: {
      shape: 'Arrow',
      height: 7,
      width: 7,
    },
    style: {
      strokeColor: '#6d6d6d',
    },
    targetID: 'node-51fae793-1f2b-49ee-9cac-2cb2cebf695a',
    id: 'connector_13',
  },
  {
    sourceID: 'node-97717e2b-0360-4d6b-899a-5125e266fe97',
    type: 'Orthogonal',
    cornerRadius: 5,
    targetDecorator: {
      shape: 'Arrow',
      height: 7,
      width: 7,
    },
    style: {
      strokeColor: '#6d6d6d',
    },
    targetID: 'node-e7b98adf-dcbc-4576-a96d-acf4ca523964',
    id: 'connector_14',
  },
];
function ComplexHierarchicalModel() {
  const diagramInstance = React.useRef(null);
  function rendereComplete() {
    if (diagramInstance.current) {
      diagramInstance.current.fitToPage();
    }
  }
  return (
    <div className="control-pane diagram-control-pane">
      <div className="col-lg-8 control-section">
        <div className="content-wrapper" style={{ width: '100%' }}>
          <DiagramComponent
            id="diagram"
            ref={(diagram) => (diagramInstance.current = diagram)}
            width={'100%'}
            height={580}
            layout={{
              type: 'ComplexHierarchicalTree',
              connectionPointOrigin: ConnectionPointOrigin.DifferentPoint,
              horizontalSpacing: 40,
              verticalSpacing: 40,
              orientation: 'TopToBottom',
              margin: { left: 10, right: 0, top: 0, bottom: 0 },
            }}
            // snapSettings={{ constraints: 0 }}
            nodeTemplate={diagramTemplate}
            nodes={nodes}
            connectors={connectors}
            created={rendereComplete}
            snapSettings={{ constraints: SnapConstraints.None }}
              constraints={DiagramConstraints.Default | DiagramConstraints.LineRouting | DiagramConstraints.Bridging }
          >
            <Inject
              services={[
                DataBinding,
                ComplexHierarchicalTree,
                LineDistribution,
                LineRouting,
                ConnectorBridging
              ]}
            />
          </DiagramComponent>
        </div>
      </div>
    </div>
  );
}
export default ComplexHierarchicalModel;




11 Replies
MJ Meriton Jamesdurai Syncfusion Team March 21, 2025 01:51 PM UTC

Hi Lia,

 

Thank you for bringing this to our attention. We have successfully replicated the issue you’re facing, where the connector lines are overlapping the nodes in your diagram.

After investigating, we found that this can be resolved by enabling the enableRouting property within the layout settings. This ensures that the connectors automatically avoid nodes and route properly around them.

Once you set enableRouting to true, the connectors will be routed correctly, and the overlapping issue will be resolved.

For your reference, please check the updated sample and UG documentation.
Sample - 36knoyes (forked) - StackBlitz

UG doc - https://ej2.syncfusion.com/react/documentation/diagram/complex-layout#enable-routing-for-layout

Please let us know if you need any further assistance!

 

Best regards,

Meriton

 


LT Lia Tran replied to Meriton Jamesdurai March 25, 2025 08:01 AM UTC

Hi Meriton,

Your suggestion solved my problem.

Thank you for your help! Wishing you a great workday!


PR Preethi Rajakandham Syncfusion Team March 26, 2025 06:58 AM UTC

Hi Lia Tran,

You are welcome. 

We are glad that the provided response meets your requirement. Please let us know if you need further assistance. As always, we are happy to help you out. 

Regards,

Preethi R


LT Lia Tran April 1, 2025 09:13 AM UTC

Hi team,

Continue working with the sample you sent, I found that if there is no connectors, nodes will overlap each other (please refer to attached screenshot).

How can I fix it?

Thank you!


Image_2833_1743498721715


MJ Meriton Jamesdurai Syncfusion Team April 2, 2025 12:02 PM UTC

Hi Lia Tran,


Thank you for reporting the issue.

We were able to replicate the problem on our end where nodes overlap when there are no connectors. Our team is currently validating the issue, and we will get back to you as soon as possible.

We appreciate your patience. Please let us know if you have any further queries.


Best regards,
Meriton



LT Lia Tran April 3, 2025 02:59 AM UTC

Hi Meriton,

This is an important issue since our diagram may contain multiple independent nodes that aren't connected to others. I’d really appreciate your solution as soon as possible.

Thanks a lot!


MJ Meriton Jamesdurai Syncfusion Team April 4, 2025 02:05 PM UTC

Hi Lia Tran,


If the connector collection is empty, we recommend setting the enableRouting property in the layout settings to false. This will prevent nodes from overlapping during layout rendering.

However, we are actively working on a fix to handle this scenario even when enableRouting is set to true, ensuring proper node placement regardless of connector availability


Please let us know if you need any further assistance in the meantime.


Best regards,
Meriton



LT Lia Tran April 7, 2025 07:27 AM UTC

Hi Meriton,

Thank you for your response.

The issue causing independent nodes to overlap is due to setting enableRouting = true, which is intended to prevent connectors from overlapping nodes.

Unfortunately, we need both issues to be resolved, as they are affecting our UI.

I’d like to know if this bug is relatively simple and can be fixed soon, as we are approaching our app’s release date. If it can’t be resolved in time, we may need to look for an alternative solution.

Thank you very much, and I look forward to your response!

Kind regards,

Lia


MJ Meriton Jamesdurai Syncfusion Team April 8, 2025 02:35 PM UTC

Hi Lia Tran,

 

Reported Issue:  Independent nodes get overlapped in complex hierarchical tree layout

 

We can reproduce the issue and confirmed this as a defect. We have logged a defect report for this issue. We will fix this issue and provide the patch on April 29th 2025 weekly patch release.

 

Feedback link: Independent nodes get overlapped in complex hierarchical tree layout in React | Feedback Portal

 

Disclaimer: Inclusion of this solution in the weekly release may change due to other factors including but not limited to QA checks and works reprioritization.

 

Best Regards,

Meriton


LT Lia Tran April 10, 2025 01:25 AM UTC

Hi Meriton,

Thank you for the prompt update and for confirming the issue.
We appreciate your support and look forward to the release.

Best regards,
Lia Tran


LT Lia Tran April 10, 2025 01:25 AM UTC

Hi Meriton,

Thank you for the prompt update and for confirming the issue.
We appreciate your support and look forward to the release.

Best regards,
Lia Tran


Loader.
Up arrow icon