GoJS | Powerful JavaScript Library for HTML Data Visualization, Graph Editor

GoJS is a flexible library that can be used to create a number of different kinds of interactive diagrams, including data visualizations, drawing tools, and graph editors.

How to use GoJS?

Here is an easy example:

(1) import js file

<script src="https://unpkg.com/gojs"></script>

(2) draw a chart

<script>
function init() {
  const myDiagram =
    new go.Diagram("myDiagramDiv",  // create a Diagram for a HTML Div element
      { "undoManager.isEnabled": true });  // enable undo & redo

  // define a simple Node template
  myDiagram.nodeTemplate =
    new go.Node("Auto")  // the Shape will automatically surround the TextBlock
      .add(  // add a Shape and a TextBlock to this "Auto" Panel
        new go.Shape("RoundedRectangle",
                     { strokeWidth: 0, fill: "white" })  // no border; default fill is white
          // Shape.fill is bound to Node.data.color
          .bind("fill", "color"),
        new go.TextBlock({ margin: 8, stroke: "#333" })  // some room around the text
          // TextBlock.text is bound to Node.data.key
          .bind("text", "key"));

  // but use the default Link template, by not setting Diagram.linkTemplate

  // create the model data that will be represented by Nodes and Links
  myDiagram.model = new go.GraphLinksModel(
    [
      { key: "Alpha", color: "lightblue" },
      { key: "Beta", color: "orange" },
      { key: "Gamma", color: "lightgreen" },
      { key: "Delta", color: "pink" }
    ],
    [
      { from: "Alpha", to: "Beta" },
      { from: "Alpha", to: "Gamma" },
      { from: "Beta", to: "Beta" },
      { from: "Gamma", to: "Delta" },
      { from: "Delta", to: "Alpha" }
    ]);
}
</script>

Run this code, you will see: