Is there a way i can make my nodes spread horizontally rather than vertically.

[Not-yourCoder]

i have a 1300w x 500h canvas. i want my nodes to spread widthwise rather than heightwise. is their a way to do it. tried bounding box but for some reason its not working.
Here is the current implemntation :

    const containerRef = useRef<HTMLDivElement>(null);
    const constrainBox = { x: 60, y: 50, width: 1250, height: 300 }

    const backrect = document.createElement('div');
    backrect.style.backgroundColor = '#666';
    backrect.style.opacity = "0.1";
    backrect.style.marginLeft = `${constrainBox.x}px`;
    backrect.style.marginTop = `${constrainBox.y}px`;
    backrect.style.width = `${constrainBox.width}px`;
    backrect.style.height = `${constrainBox.height}px`;
    backrect.style.position = 'absolute';
    container.appendChild(backrect);

    const onTick = () => {
      let minx = Math.min(...nodes.map((n: any) => n.x));
      let maxx = Math.max(...nodes.map((n: any) => n.x));
      let miny = Math.min(...nodes.map((n: any) => n.y));
      let maxy = Math.max(...nodes.map((n: any) => n.y));
      let maxsize = Math.max(...nodes.map((n: any) => n.size || 15));

      const scalex = (constrainBox.width - maxsize) / (maxx - minx);
      const scaley = (constrainBox.height - maxsize) / (maxy - miny);

      nodes.forEach((node: any) => {
        node.x = (node.x - minx) * scalex + constrainBox.x;
        node.y = (node.y - miny) * scaley + constrainBox.y;
      });
    };
    const graph = new G6.Graph({
      container,
      width,
      height,
      modes: {
        default: ['custom-tooltip', 'drag-canvas', 'zoom-canvas', 'drag-node', 'click-select']
      },
      renderer: 'webgl',
      layout: {
        type: 'force',
        onTick,
        preventOverlap: true,
        nodeSpacing: (node: GraphNode) => (node.isCentralNode ? 40 : 10),
        maxIterations: 0,
        linkDistance,
        nodeStrength: -800,
        edgeStrength: 10,
        // clampForce: true,
        onLayoutEnd: () => {
          const nodes = graph.getNodes();
          nodes.forEach((node) => {
            const pos = node.getModel();
            initialPositionsRef.current.set(node.getID(), {
              x: pos.x,
              y: pos.y
            });
          });
        },
        // Add spring force to return nodes to original position
        tick: () => {
          const nodes = graph.getNodes();
          nodes.forEach((node) => {
            const initialPos = initialPositionsRef.current.get(node.getID());
            if (initialPos) {
              const currentPos = node.getModel();

              if (typeof currentPos.x === 'number' && typeof currentPos.y === 'number') {
                const dx = initialPos.x - currentPos.x;
                const dy = initialPos.y - currentPos.y;

                node.updatePosition({
                  x: currentPos.x + dx * 0.05,
                  y: currentPos.y + dy * 0.05
                });
              }
            }
          });
        },
        defaultNode: {
          type: 'circle',
          labelCfg: {
            position: 'top',
            offset: 1,
            fill: 'black',
            autoRotate: true
          }
        },
        nodeStateStyles: {
          highlight: {
            stroke: 'red',
            lineWidth: 4,
            shadowBlur: 10,
            shadowColor: 'red'
          },
          selected: {
            stroke: 'blue',
            lineWidth: 4
          }
        },
        defaultEdge: {
          type: 'line',
          style: {
            stroke: '#ccc'
          }
        },
        edgeStateStyles: {
          active: {
            stroke: 'red',
            lineWidth: 2
          }
        },
        animate: false,
        linkCenter: true
      },
      minZoom: 0.05,
      maxZoom: 2
    });
    ```