How to Set Position of Swimlane in Javascript Diagram?

Set the Position for Swimlane
To adjust the position of a swimlane in your JavaScript Diagram, you can use the offset properties. These properties help you fine-tune where the swimlane is located both horizontally and vertically.

offset properties:

offsetX:

• This property controls the horizontal position of the swimlane.
• By modifying this value, you can move the swimlane left or right.

offsetY:

• This property controls the vertical position of the swimlane.
• Adjusting this value allows you to move the swimlane up or down.

This is demonstrated in the sample code below by using the offsetX and offsetY properties:

  var node = {
   id: 'swimlane',
   shape: {
     header: {},
     type: 'SwimLane',
     lanes: [
       {
         id: 'stackCanvas1',
         height: 100,
       },
     ],
     phases: [
       {
         id: 'phase1',
         offset: 170,
         header: { annotation: { content: 'Phase' } },
       },
     ],
     phaseSize: 20,
   },
   // Adjust the position of a swimlane
   offsetX: 300,
   offsetY: 200,
   height: 200,
   width: 350,
 };

Sample: https://stackblitz.com/edit/fnqsed-gncwcj?file=index.js

Set the Position for Swimlane Children
To adjust the position of swimlane children in your diagram, you can use the margin property. This property defines the space between the node (swimlane child) and its immediate parent (swimlane).

margin properties:

The margin property includes four specific settings:

left: Controls the space on the left side of the swimlane child.
right: Controls the space on the right side of the swimlane child.
top: Controls the space above the swimlane child.
bottom: Controls the space below the swimlane child.

This is demonstrated in the sample code below:

var node = {
 shape: {
   type: 'SwimLane',
   // Intialize header to swimlane
   header: {},
   lanes: [
     {
       id: 'stackCanvas1',
       height: 100,
       header: {
         annotation: { content: 'CUSTOMER' },
         width: 50,
         style: { fontSize: 11 },
       },
       // Set the children of lane
       children: [
         {
           id: 'node1',
           annotations: [
             {
               content: 'Consumer learns \n of product',
               style: { fontSize: 11 },
             },
           ],
           // Adjust position of swimlane children
           margin: { left: 250, right: 150, bottom: 50, top: 100 },
           height: 40,
           width: 100,
         },
       ],
     },
   ],
   phases: [
     {
       id: 'phase1',
       offset: 170,
       header: { annotation: { content: 'Phase' } },
     },
   ],
   phaseSize: 20,
 },
 offsetX: 300,
 offsetY: 200,
 height: 200,
 width: 350,
};

Sample: https://stackblitz.com/edit/fnqsed-vhwxag?file=index.js

Conclusion
I hope you enjoyed learning how to set the position of a swimlane in a JavaScript Diagram.

You can refer to our JavaScript Diagram feature tour page to learn about its other groundbreaking feature representations and documentation, and how to quickly get started with configuration specifications. You can also explore our JavaScript Diagram example to understand how to create and manipulate data.
For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion®, you can try our 30-day free trial to check out our other controls.
If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!