https://github.com/crubier/react-graph-vis
A react component to render nice graphs using vis.js
https://github.com/crubier/react-graph-vis
graph javascript react rendered-graphs visualisation
Last synced: 29 days ago
JSON representation
A react component to render nice graphs using vis.js
- Host: GitHub
- URL: https://github.com/crubier/react-graph-vis
- Owner: crubier
- License: mit
- Created: 2015-04-09T08:56:41.000Z (about 10 years ago)
- Default Branch: master
- Last Pushed: 2023-10-12T09:43:01.000Z (over 1 year ago)
- Last Synced: 2025-04-11T08:37:31.394Z (2 months ago)
- Topics: graph, javascript, react, rendered-graphs, visualisation
- Language: JavaScript
- Homepage: http://crubier.github.io/react-graph-vis/
- Size: 2.36 MB
- Stars: 972
- Watchers: 17
- Forks: 173
- Open Issues: 60
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
- License: LICENSE
- Security: SECURITY.md
Awesome Lists containing this project
- awesome-visjs - react-graph-vis - A react component to render NETWORK graphs. (Libraries / vis.js based libraries)
README
# React graph vis
A React component to display beautiful network graphs using vis.js
Show, don't tell: [Demo](http://crubier.github.io/react-graph-vis/)
Make sure to visit [visjs.org](http://visjs.org) for more info.
Rendered graphs are scrollable, zoomable, retina ready, dynamic, and switch layout on double click.
Due to the imperative nature of vis.js, updating graph properties causes complete redraw of graph and completely porting it to React is a big project itself!
This component takes three vis.js configuration objects as properties:
- graph: contains two arrays { edges, nodes }
- options: normal vis.js options as described [here](http://visjs.org/docs/network/#options)
- events: an object that has [event name](http://visjs.org/docs/network/#Events) as keys and their callback as values
# Usage
```javascript
import React from "react";
import ReactDOM from "react-dom";
import Graph from "react-graph-vis";
import "./styles.css";
// need to import the vis network css in order to show tooltip
import "./network.css";
function App() {
const graph = {
nodes: [
{ id: 1, label: "Node 1", title: "node 1 tootip text" },
{ id: 2, label: "Node 2", title: "node 2 tootip text" },
{ id: 3, label: "Node 3", title: "node 3 tootip text" },
{ id: 4, label: "Node 4", title: "node 4 tootip text" },
{ id: 5, label: "Node 5", title: "node 5 tootip text" }
],
edges: [
{ from: 1, to: 2 },
{ from: 1, to: 3 },
{ from: 2, to: 4 },
{ from: 2, to: 5 }
]
};
const options = {
layout: {
hierarchical: true
},
edges: {
color: "#000000"
},
height: "500px"
};
const events = {
select: function(event) {
var { nodes, edges } = event;
}
};
return (
{
// if you want access to vis.js network api you can set the state in a parent component using this property
}}
/>
);
}
const rootElement = document.getElementById("root");
ReactDOM.render(, rootElement);
```
You can also check out the demo in the [`example`](https://github.com/crubier/react-graph-vis/tree/master/example) folder.