Create a simple network with some nodes and edges.

ESNext build is designed to be used in combination with bundlers and transpillers. It doesn't bundle any dependencies or polyfills, you have to provide them yourself. This is handy if you already have polyfills and potentionally also the same dependencies in your app, you can use them for Vis projects too instead of having multiple copies of the same polyfills in your bundle from different packages.

Otherwise it can be used the same way as the peer build.

When to use

When you need to optimize bundle size or finer control over what gets loaded.

Content

• Vis Network
  • Network"
  • NetworkDOTParser"
  • NetworkImages"
  • NetworkOptions"
  • networkGephiParser"
  • parseDOTNetwork"
  • parseGephiNetwork"

How to use

Browser UMD

Even though UMD builds are a part of the package, this is very unlikely to work. You generally need some polyfills and transpilation even in the most modern browsers.

Bundled ESM

// all peer dependencies have to be installed
// even if you don't import them yourself
import { DataSet } from "vis-data/esnext";
import { Network } from "vis-network/esnext";
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);
      

The code above has to be injected into a page which contains an element with mynetwork id. Like for example:

<div id="mynetwork"></div>
      

N/A