Visjs network place node fixed at bottom right

I would like to create a node in the network plugin of the visjs framework, so that it stays fixed at the bottom.

Getting it staying fixed is no problem, however the rest of the nodes seem to have somekind of algorithm for the x and y coordinates.

Doing a { x: 0, y: 0 } will not work it seems because the x and y are coordinates in relation to other nodes.

Solution

I think (if I got you right), you should:

set physics to false.
give fixed position to true for all nodes,
set the node positions as you wish.
after drawing the network (in the next tick) remove the fixed position from all other nodes.

See the snippet below. (the fixed position stays on node no 5).

// create an array with nodes
  var nodes = new vis.DataSet([
    {id: 1, label: 'Node 1', fixed: true, group: 1, x:0, y:0},
    {id: 2, label: 'Node 2', fixed: true, group: 2, x:10, y:110},
    {id: 3, label: 'Node 3', fixed: true, group: 1, x:120, y:20},
    {id: 4, label: 'Node 4', fixed: true, group: 2, x:-110, y:-110},
    {id: 5, label: 'Node 5', fixed: true, group: 2, x:220, y:220}
  ]);

  // create an array with edges
  var edges = new vis.DataSet([
    {from: 1, to: 3},
    {from: 2, to: 4},
    {from: 3, to: 4},
    {from: 2, to: 5}
  ]);

  // create a network
  var container = document.getElementById('mynetwork');
  var data = {
    nodes: nodes,
    edges: edges
  };
  var options = {
    physics: false
  };
  var network = new vis.Network(container, data, options);
  
  setTimeout(function(){
    nodes.forEach(node => {
      if(node.id !== 5){
        nodes.update({id: node.id, fixed: false});
      }
    })
  })

#mynetwork {
      width: 600px;
      height: 400px;
      border: 1px solid lightgray;
    }

    p {
      max-width: 600px;
    }

<!doctype html>
<html>
<head>
  <title>Network | Basic usage</title>
  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/vis/4.20.0/vis.min.js"></script>
  <link href="https://cdnjs.cloudflare.com/ajax/libs/vis/4.20.0/vis.min.css" rel="stylesheet" type="text/css"/>
</head>
<body>
  <div id="mynetwork"></div>
</body>
</html>