Stack Overflow
Stack Overflow

Questions tagged [vis.js]

A dynamic, browser based visualisation library. The library is designed to be easy to use, to handle large amounts of dynamic data, and to enable manipulation of and interaction with the data. The library consists of the components DataSet, Timeline, Network, Graph2d and Graph3d.

Vis.js is a dynamic, browser based visualization library. The library is designed to be easy to use, handle large amounts of dynamic data, and enable manipulation of the data. It is dual-licensed (Apache 2.0 and MIT Licenses), open source and community-driven. The official repository now holds several related components and additions.

The main library consists of the following components:

  • DataSet. A flexible key/value based data set. Add, update, and remove items. Subscribe on changes in the data set. A DataSet can filter and order items, and convert fields of items.
  • DataView. A filtered and/or formatted view on a DataSet.
  • Graph2d. Plot data on a timeline with lines or bar-charts.
  • Graph3d. Display data in a three dimensional graph.
  • Network. Display a network (force directed graph) with nodes and edges.
  • Timeline. Display different types of data on a timeline.

There's also a number of reactive adaptations to some of the components from other authors, like react-graph-vis, react-visjs-timeline and others on earlier stages of development.

See docs and examples at the official site: https://visjs.org/.

Related tags:

804 questions
18
votes
2 answers

Accessing node data in vis.js click handler

I have a network graph of nodes and edges and would like to get the node data once it gets clicked. e.g, var network = new vis.Network(container, data, options); network.on( 'click', function(properties) { console.log('clicked node ' +…
Vishnu
  • 4,377
  • 7
  • 26
  • 40
17
votes
3 answers

Stop vis.js physics after nodes load but allow drag-able nodes

I am trying to draw a vis.js network diagram and have vis load and position the nodes. I then want the physics to be disabled so the nodes can be moved by the user. I have tried this but it is not working. var options = { nodes: { …
Perry
  • 1,277
  • 2
  • 17
  • 39
16
votes
3 answers

vis.js - Place node manually

How do I set a node's position in vis.js? I want to initially position at least one node manually. I know that a node has the options x and y. I set both, and also tried variations of layout options (randomSeed, improvedLayout, hierarchical), the…
Wulsh Briggle
  • 163
  • 1
  • 1
  • 9
15
votes
3 answers

In the vis javascript library, how do I get the node from its node Id?

So I create the nodes like this... var nodes = new vis.DataSet([ {id: 1, label: 'Peter'}, {id: 2, label: 'John'}, {id: 3, label: 'Sally'}, ]); then later on in an event handler after clicking on a node I get the id of the node i…
srayner
  • 1,799
  • 4
  • 23
  • 39
14
votes
4 answers

Connected nodes overlapping other edges or nodes

I'm using vis.js to display nodes, not all nodes are connected to each other, but they are overlapping as shown in the picture, is there a way with the option to avoid this, I went through the configure options but could not find.
Noor
  • 19,638
  • 38
  • 136
  • 254
13
votes
4 answers

How do I update props on a manually mounted vue component?

Question: Is there any way to update the props of a manually mounted vue component/instance that is created like this? I'm passing in an object called item as the component's data prop. let ComponentClass = Vue.extend(MyComponent); let instance =…
Craig Harshbarger
  • 1,863
  • 3
  • 18
  • 29
13
votes
1 answer

Render SVGSVGElement in React JS without dangerouslySetInnerHtml

Question: Can I render an SVGSVGElement in React without using dangerouslySetInnerHtml? Context: I am using the vis.js graph library, the getLegend method returns an SVGSVGElement object i.e. const icon = chart.getLegend(args); In the console I can…
maikthomas
  • 427
  • 5
  • 15
13
votes
2 answers

How to draw line graph on timeline using visjs?

Is it possible to draw line graph on timeline, using visjs? I want to get something like here http://almende.github.io/chap-links-library/js/timeline/examples/example19_bar_graph.html but instead of bar graph, I need line graph. Essentially the…
sirex
  • 4,593
  • 2
  • 32
  • 21
12
votes
2 answers

Export visjs network to jpeg/png image

I am working on angular vis.js. Vis.js works on canvas for creating nodes and links between the nodes. Is there any way to get the image (jpeg/png) from the visj.s canvas?
DEV1205
  • 352
  • 1
  • 6
  • 18
11
votes
4 answers

How to make vis.js lib to work with Angular2?

I'm trying to use a visjs lib but can't make their getting started example working it goes like this: