a react component to visualize directed weighted graphs easily

Usage no npm install needed!

<script type="module">
  import reactGraphVisualizer from '';



a react component to visualize interactive directed and weighted graphs easily.

NPM JavaScript Style Guide


npm install --save react-graph-visualizer


1. Demo

the Demo contains five code examples with their results.

2. The debt settler app

Alt Text

the Debt settler is react app made using the react-graph-visualizer.


import React, { useState, useRef } from "react";
import Graph from "react-graph-visualizer";

function App() {
  const graphRef = useRef();
  const [graph, setGraph] = useState({
    nodes: [
        name: "A",
        id: 1
        name: "B",
        id: 2
    links: [
        source: 1,
        target: 2,
        label: "A-B"
  return (

export default App;

to change the graph data call the function setGraph as follow.



Prop Type Default Description
id string / component id, required when using multiple component in the same page.
initialGraph object {nodes:[],links:[]} Graph initial data
initialGraph.nodes Array [] The nodes array of objects {name:string, id:number, img=string}
initialGraph.links Array [] The links array of objects {source:number, target:number, label:string}
width number 700 the vertical length of the component.
height number 500 the horizontal length of the component.
ref Ref object / The ref object to use to change graph data.
backgroundColor string #e5e6e7 The component background color.
linkStyle.directed boolean true Specifies the type of the graph, directed or undirected.
linkStyle.distance number 300 The length of the links, or the distance between the nodes.
linkStyle.color string black Links color: "red", "orange", "#000", "#e5e6e7"
nodeStyle.radius number 30 The radius of nodes.
nodeStyle.borderWidth number 0 The width of the nodes borders.
nodeStyle.borderColor string black The color of the nodes border.
nodeStyle.background string black The color of the nodes background.
nameStyle.size number 20 The size of the nodes name.
nameStyle.color string black The nodes name color
nameStyle.x string center The horizontal position of the nodes name: left, right, center.
nameStyle.y string bottom The vertical position of the nodes name: bottom, top. boolean false Show or hide labels.
labelStyle.size number 10 The size of the labels.
labelStyle.color string black The color of the labels


  1. npm install
  2. cd example && npm install
  3. npm start
  4. cd example && npm startin a diffrent terminal.


MIT © NadirTellai