JSFiddle - React, Tailwind, and code Playground

by b_g_v

HTML

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/vis/4.19.0/vis.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/vis/4.19.1/vis.min.css" rel="stylesheet" type="text/css">

<p>
  Create a simple network with some nodes and edges.
</p>

<div id="mynetwork"><div class="vis-network" tabindex="900" style="position: relative; overflow: hidden; touch-action: pan-y; user-select: none; -webkit-user-drag: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); width: 100%; height: 100%;"><canvas width="600" height="400" style="position: relative; touch-action: none; user-select: none; -webkit-user-drag: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); width: 100%; height: 100%;"></canvas></div></div>

CSS

#mynetwork {
      width: 1600px;
      height: 1400px;
      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'},
  ]);

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

  // create a network
  var container = document.getElementById('mynetwork');
  var data = {
    nodes: nodes,
    edges: edges
  };
  var options = {
    interaction: {
        hover:true, 
        tooltipDelay: 300
    }, 
    height: '400px', 
    edges: { smooth: true, shadow: true},
    layout: {
        randomSeed: 1,
        improvedLayout: true,
        hierarchical: {
            enabled: true, //change to true to see the other graph
            direction: 'UD',
            sortMethod: 'directed'
        }
    }
  };

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