Adding and Reversing Arrows in OrgChart JS Links: A Beginner's Guide

Organization charts are a vital part of visualizing hierarchy and relationships within an organization. With OrgChart JS, you can customize links between nodes, including adding directional arrows. This guide will walk you through how to add and reverse arrows in an OrgChart JS instance using a simple code example.

Here is the example

Step 1: Defining Arrow Markers

To add arrows to links, we first define an SVG marker that represents the arrowhead. In the code below, we create an arrow marker and apply it to our chart template:

OrgChart.templates.ana.defs =
    `<marker id="arrow" viewBox="0 0 10 10" refX="8" refY="5" markerWidth="8" markerHeight="8" orient="auto-start-reverse">
        <path fill="#aeaeae" d="M 0 0 L 10 5 L 0 10 z" />
    </marker>`;

The **marker** element defines an arrow that can be applied to paths. The orient="auto-start-reverse" attribute ensures the arrow adjusts based on the link direction.

Step 2: Adding Arrows to Links

Once the marker is defined, we integrate it into the link template:

OrgChart.templates.ana.link =
    `<path marker-end="url(#arrow)" stroke-linejoin="round" stroke="#aeaeae" stroke-width="1px" fill="none" d="M{xa},{ya} {xb},{yb} {xc},{yc} L{xd},{yd}" />`;

Here, marker-end="url(#arrow)" ensures the arrow appears at the end of the link, pointing towards the child node.

Step 3: Reversing Arrows on Links

To reverse the direction of the arrow, we create a modified template named "reverse" that places the arrow at the start of the link instead of the end:

OrgChart.templates.reverse = Object.assign({}, OrgChart.templates.ana);
OrgChart.templates.reverse.link =
    `<path marker-start="url(#arrow)" stroke-linejoin="round" stroke="#aeaeae" stroke-width="1px" fill="none" d="M{xa},{ya} {xb},{yb} {xc},{yc} L{xd},{yd}" />`;
OrgChart.templates.reverse.plus = "";
OrgChart.templates.reverse.minus = "";

Now, marker-start="url(#arrow)" ensures that the arrow appears at the beginning of the link, pointing towards the parent node.

Step 4: Initializing and Configuring the Chart

Now, we set up the OrgChart instance and apply the templates:

let chart = new OrgChart(document.getElementById("tree"), {
    enableSearch: false,
    mouseScrool: OrgChart.action.none,
    nodeMouseClick: OrgChart.action.none,
    tags: {
        "ig": {
            template: "invisibleGroup",
            subTreeConfig: {
                orientation: OrgChart.orientation.bottom
            },
        },
        "reverse": {
            template: "reverse"
        }
    }
});

This configuration disables search and mouse scrolling and defines the "reverse" tag for nodes that need reversed arrows.

Step 5: Loading the Data

Finally, we load data into the chart, assigning the "reverse" tag where needed:

chart.load([
    { id: "root", tags: ["ig"] },
    { id: 0, stpid: "root", tags: ["reverse"] },
    { id: 1, pid: 0, tags: ["reverse"] },
    { id: 2, pid: 0, tags: ["reverse"] },
    { id: 3, pid: "root" },
    { id: 4, pid: "root" }
]);

Here, nodes with the "reverse" tag will have arrows pointing toward the parent, instead of the default downward direction.

Link Arrows - OrgChart JS

Conclusion

By following these steps, you can easily customize link arrows in your OrgChart JS visualization. Whether you need arrows pointing to children or parents, adjusting link templates makes it simple. Try experimenting with different styles and colors to match your design needs!