visjs - Legend (with Overlay Divs)

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.5.0/css/font-awesome.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/vis/4.12.0/vis.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/vis/4.12.0/vis.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<div id="mynetwork"></div>

CSS

#mynetwork {
      width: 555px;
      height: 400px;
      border: 1px solid lightgray;
      background: lightblue
    }

JavaScript

var iconSize = 20;
var legendIconSize = 5;

var nodeSet = [{
  id: 1,
  shape: 'dot',
  label: 'Node 1',
  group: 'castle'
}, {
  id: 2,
  shape: 'dot',
  label: 'Node 2',
  group: 'star'
}, {
  id: 3,
  shape: 'dot',
  label: 'Node 3',
  group: 'castle'
},  ];

// legend
var container = document.getElementById('mynetwork');
var x = container.clientWidth - (container.clientWidth / 2);
var y = -container.clientHeight + 800;
var step = 60;

 
nodeSet.push({
  id: 1001,
  x: x,
  y: y + step,
  label: 'label',
  group: 'castle',
  fixed: true,
  physics: false,
  size:7,
  position: 'right',
  font: {color:'#616161',position: 'absolute', right:50,},
 });
 
 

// create an array with nodes
var nodes = new vis.DataSet(nodeSet);

// create an array with edges
 

var data = {
  nodes: nodes,
   
};
var options = {
   
  groups: {
    useDefaultGroups: false,
    'castle': {
      shape: 'dot',
    },
    'star': {
      shape: 'dot',
       
    },
  }
};

// create a network
var network = new vis.Network(container, data, options);
 

//var iconRemoved = false;