Create a simple network with some nodes and edges.

Standalone build doesn't work with other packages from the Vis family because it bundles all dependencies. This leads to situation where DataSets (and other dependencies) from one package (e.g. Timeline) don't work in Network because Network expects it's own bundled DataSets to be used. It is inteded as a convenience build for cases where multiple packages are not necessary but ease of use is (like JSFiddle MEWs or examples). This build is available in ESM and UMD versions each of them has minified and unminified variant.

When to use

When you don't need only Network (no Timeline, Graph3D etc.) and don't want to deal with dependencies and styles (everything is bundled in this build ready to use).

Content

• Vis Network
  • Network"
  • NetworkDOTParser"
  • NetworkImages"
  • NetworkOptions"
  • networkGephiParser"
  • parseDOTNetwork"
  • parseGephiNetwork"
• Vis Data
  • DataSet
  • DataView
  • Queue
• Vis Util
• CSS Styles

How to use

Browser UMD

<script type="text/javascript" src="https://unpkg.com/vis-network/standalone/umd/vis-network.min.js"></script>
<!--
  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/standalone";
// CSS will be automatically injected into the page.

// 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);