vis.js playground

by Abhijeet Deshmukh

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/vis/4.9.0/vis.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/vis/4.9.0/vis.min.css">
123
<div id="mynetwork"></div>

CSS

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

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'},
        {id: 4, label: 'Node 4'},
        {id: 5, label: 'Node 5'}
    ]);

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

    // create a network
    var container = document.getElementById('mynetwork');

    // provide the data in the vis format
    var data = {
      nodes: nodes,
      edges: edges
    };
    // var options = {physics:{enabled:false}};

    var options = {
      autoResize: true,
      height: '100%',
      width: '90%',
      locale: 'en',
      clickToUse: false,
      physics: {
        enabled: false
      },
      interaction: {
        dragNodes: false,
        zoomView: false,
        dragView: false,
        navigationButtons: true,
        keyboard: true,
        selectConnectedEdges: false,

      },
      layout: {
        hierarchical: {
          enabled: true,
          levelSeparation: 150,
          nodeSpacing: 100,
          treeSpacing: 200,
          blockShifting: true,
          edgeMinimization: true,
          parentCentralization: true,
          direction: 'LR',
          sortMethod: 'directed'
        }
      },
      nodes: {
      smooth:true,
        font: {
          size: 13,
          face: "Roboto, 'Roboto Condensed'",
          color: "#663813"
        },
        color: {
          background: "#fff",
          border: "#663813",
          highlight: {
          weight:0,
            background: "#fff",
            border: "#663813"
          }
        }
      },
      edges: {
      
        font: {
          size: 13,
          face: "Roboto, 'Roboto Condensed'",
          color: "#663813"
        },
        color: {
          color: "#663813",
          highlight: "#f8e04d"
        }
      }
    };

    //...