Highlights

OrgChart JS provides built-in support for highlighting nodes on hover as well as programmatic node highlighting. Use the highlightOnHover option to automatically highlight related nodes when the user hovers over a node, or call chart.highlightNode(id) to highlight a specific node from code.

Highlight Same-Level Nodes on Hover

Set highlightOnHover to "sameLevel" to dim all nodes except those on the same level as the hovered node.

var chart = new OrgChart(document.getElementById("tree"), {
    highlightOnHover: "sameLevel",
    // ...
});

Edit in BALKAN Code

Highlight Children on Hover

Set highlightOnHover to "children" to highlight the direct children of the hovered node.

var chart = new OrgChart(document.getElementById("tree"), {
    highlightOnHover: "children",
    // ...
});

Edit in BALKAN Code

Highlight Parents on Hover

Set highlightOnHover to "parents" to highlight the parent chain of the hovered node.

var chart = new OrgChart(document.getElementById("tree"), {
    highlightOnHover: "parents",
    // ...
});

Edit in BALKAN Code

Custom Highlight Style

You can customize the appearance of highlighted and non-highlighted nodes using CSS. The chart adds a highlighted class to matching nodes and a not-highlighted class to the rest.

.node.not-highlighted rect {
    opacity: 0.2;
}

.node.highlighted rect {
    stroke: #039BE5;
    stroke-width: 3;
}

Edit in BALKAN Code

Programmatic Node Highlight

Use chart.highlightNode(id) to highlight a node from code — for example, in response to a button click or an external event.

chart.highlightNode(1);

Pass null to clear the current highlight:

chart.highlightNode(null);

Edit in BALKAN Code