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

Enable Highlight in Custom Node Templates

When creating a custom node template, make sure the main node element includes the boc-hoverable class. This class is required for the Highlight functionality to work correctly.

OrgChart.templates.ana.node = function (node, data, template, config) {
    return `
        <rect class="boc-hoverable" x="0" y="0"
            width="${node.w}"
            height="${node.h}"
            fill="#fff"
            rx="10"
            ry="10">
        </rect>
        ...
    `;
};

When creating a custom link, also add the boc-hoverable class:

OrgChart.templates.ana.link =
    `<path class="boc-hoverable" stroke-linejoin="round" stroke="#aeaeae" stroke-width="3px" fill="none" d="{rounded}" />`;

Without the boc-hoverable class, OrgChart JS cannot detect the node for highlighting, so the feature will not work as expected.

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