Create a simple network with some nodes and edges.

This is kept only for backwards compatibility as this build is broken. It doesn't play well with tree shaking, doesn't work with other Vis family packages and atop of that contains bloatware that is not used by Vis Network at all.

When to use

Please don't use this. Use the standalone build instead.

Content

• Vis Network
  • Network
  • network.Images
  • network.allOptions
  • network.convertDot
  • network.convertGephi
  • network.dotparser
  • network.gephiParser
• Vis Data
  • DataSet
  • DataView
  • Queue
• Vis Util
• DOMUtil
• Hammer
• keycharm

How to use

Browser UMD

<script type="text/javascript" src="https://unpkg.com/vis-network/dist/vis-network.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://unpkg.com/vis-network/dist/vis-network.min.css" />
<!--
  Including other packages like Vis Timeline or Vis Graph3D here won't work.
  You need the peer build to do that.
-->

<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" },
    { 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 },
    { from: 3, to: 3 }
  ]);

  // create a network
  var container = document.getElementById("mynetwork");
  var data = {
    nodes: nodes,
    edges: edges
  };
  var options = {};
  var network = new vis.Network(container, data, options);
</script>
      

Bundled ESM

import { DataSet, Network } from "vis-network";
import "vis-network/styles/vis-network.css";

// create an array with nodes
const nodes = new 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
const edges = new DataSet([
  { from: 1, to: 3 },
  { from: 1, to: 2 },
  { from: 2, to: 4 },
  { from: 2, to: 5 },
  { from: 3, to: 3 }
]);

// create a network
const container = document.getElementById("mynetwork");
const data = {
  nodes: nodes,
  edges: edges
};
const options = {};
const network = new Network(container, data, options);