Highlight Nodes

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 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

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 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

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.

g.boc-hover .boc-hoverable{
    stroke: #F57C00 ;
}

[data-n-id].boc-hover .boc-hoverable {
    stroke: initial ;
    stroke-width: initial ;
    fill: #F57C00;
}

Edit in BALKAN Code

Programmatic Node Highlight

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

chart.highlightNode(1, "children");

Edit in BALKAN Code