Vis Network | Layouts | Hierarchical Layout without Physics

HTML

<script src="https://visjs.github.io/vis-network/standalone/umd/vis-network.min.js"></script>
<div id="mynetwork"></div>

CSS

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

JavaScript

// Setup initial nodes / edges
const nodes = [
	{id: 1, label: '1'},
  {id: 2, label: '2'},
  {id: 3, label: '3'},
  {id: 4, label: '4'},
  {id: 5, label: '5'},
  {id: 6, label: '6'},
  {id: 7, label: '7'},
  {id: 8, label: '8'},
  {id: 9, label: '9'},
  {id: 10, label: '10'},
  {id: 11, label: '11'},
];
const edges = [
 {from: 1, to: 2},
 {from: 2, to: 3},
 {from: 2, to: 4},
 {from: 2, to: 5},
 {from: 2, to: 6},
 {from: 2, to: 7},
 {from: 2, to: 8},
 {from: 2, to: 9},
 {from: 2, to: 10},
 {from: 2, to: 11},
];

// Add a number nodes / edges
const nodesToAdd = 200;
for (let i = 12; i < 12 + nodesToAdd; i++){
  nodes.push({id: i, label: `${i}`});
  edges.push({from: 11, to: i});
}

var data = {
  nodes: nodes,
  edges: edges,
};
// create a network
var container = document.getElementById("mynetwork");
var options = {
  interaction: {
    hover: true
  },
  manipulation: {
    enabled: true
  },
  nodes: {
    shape: 'dot',
  },

  layout: {
    hierarchical: {
      nodeSpacing: 75
    },
  },
  physics: {
    enabled: false
  },
       
};
var network = new vis.Network(container, data, options);