visjs - Legend

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 = 40;

var nodeSet = [{
  id: 1,
  shape: 'icon',
  icon: {
    face: 'FontAwesome',
    code: '\uf286',
    size: iconSize,
    color: '#57169a'
  },
  label: 'Node 1',
  group: 'castle'
}, {
  id: 2,
  shape: 'icon',
  icon: {
    face: 'FontAwesome',
    code: '\uf1d1',
    size: iconSize,
    color: '#f0a30a'
  },
  label: 'Node 2',
  group: 'star'
}, {
  id: 3,
  shape: 'icon',
  icon: {
    face: 'FontAwesome',
    code: '\uf286',
    size: iconSize,
    color: '#57169a'
  },
  label: 'Node 3',
  group: 'castle'
}, {
  id: 4,
  shape: 'icon',
  icon: {
    face: 'FontAwesome',
    code: '\uf1d1',
    size: iconSize,
    color: '#f0a30a'
  },
  label: 'Node 4',
  group: 'star'
}];

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

nodeSet.push({
  id: 1000,
  x: x,
  y: y,
  label: 'Castle',
  group: 'castle',
  value: 1,
  fixed: true,
  physics: false
});

nodeSet.push({
  id: 1001,
  x: x,
  y: y + step,
  label: 'Star',
  group: 'star',
  value: 1,
  fixed: true,
  physics: false
});
nodeSet.push({
  id: 1002,
  x: x,
  y: y + step * 2,
  label: 'Star',
  group: 'star',
  value: 1,
  fixed: true,
  physics: false
});
nodeSet.push({
  id: 1003,
  x: x,
  y: y + step * 3,
  label: 'Star',
  group: 'star',
  value: 1,
  fixed: true,
  physics: false
});

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

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

var data = {
  nodes: nodes,
  edges: edges
};
var options = {
  layout: {
    randomSeed: 2
  },
  groups: {
    useDefaultGroups: false,
    'castle': {
      shape: 'icon',
      icon: {
        face: 'FontAwesome',
        code: '\uf286',
        size: legendIconSize,
        color: '#57169a'
      },
    },
   ...