<html> <head> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/vis/4.21.0/vis.min.js"></script> <link href="https://cdnjs.cloudflare.com/ajax/libs/vis/4.21.0/vis.min.css" rel="stylesheet" type="text/css" /> </head> <body> <div id="mynetwork"></div> <script type="text/javascript"> // create an array with nodes var nodes = new vis.DataSet([ { id: 1, label: 'Node 1' }, { id: 2, label: 'Node 2' }, { id: 3, label: 'Node 3' } ]); // create an array with edges var edges = new vis.DataSet([ { from: 1, to: 2 }, { from: 2, to: 3 } ]); var container = document.getElementById('mynetwork'); var data = { nodes: nodes, edges: edges }; var options = { interaction: { navigationButtons: true, keyboard: true, hover: true, multiselect: true, hideEdgesOnDrag: false, hideNodesOnDrag: false, dragView: true, zoomView: true }, manipulation: { enabled: true, initiallyActive: true, addNode: function(nodeData, callback) { nodeData.id = (Math.random() * 1000000).toFixed(0); nodeData.label = 'Node ' + nodeData.id; nodes.add(nodeData); callback(nodeData); }, editNode: function(nodeData, callback) { nodeData.label = 'Node ' + nodeData.id; nodes.update(nodeData); callback(nodeData); }, deleteNode: function(nodeData, callback) { nodes.remove(nodeData.id); callback(nodeData); } } }; var network = new vis.Network(container, data, options); network.on('oncontext', function(properties) { var nodeId = properties.nodes[0]; var node = nodes.get(nodeId); // display context menu // ... }); </script> </body> </html>