Highlight Nodes

OrgChart React provides built-in support for highlighting nodes on hover as well as programmatic node highlighting. Use the highlightOnHover prop to automatically highlight related nodes when the user hovers over a node, or call 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.

<OrgChartReact
  nodeBinding={{ field_0: 'name', field_1: 'title', img_0: 'img' }}
  highlightOnHover="parents"
  data={[ /* ... */ ]}
/>

Highlight Parents Code Example

Highlight Children on Hover

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

<OrgChartReact
  nodeBinding={{ field_0: 'name', field_1: 'title', img_0: 'img' }}
  highlightOnHover="children"
  data={[ /* ... */ ]}
/>

Highlight Children Code Example

Highlight Same-Level Nodes on Hover

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

<OrgChartReact
  nodeBinding={{ field_0: 'name', field_1: 'title', img_0: 'img' }}
  highlightOnHover="sameLevel"
  data={[ /* ... */ ]}
/>

Highlight Same Level Code Example

Custom Highlight Style

You can customize the appearance of highlighted and non-highlighted nodes using CSS. The chart adds a boc-hover class to the hovered node's group and a boc-hoverable class to the styleable elements. Use these selectors to apply custom colors.

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

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

Highlight Custom Style Code Example

Programmatic Node Highlight

Use highlightNode(id, highlightOnHover) to highlight a node from code — for example, when the chart initializes or in response to an external event. Import the OrgChartJS type to get full TypeScript support on the ref.

import React, { useRef } from "react";
import { OrgChartReact, OrgChartJS } from "balkan-orgchart-react";

export const ChartExample = () => {
  const chartRef = useRef<OrgChartJS>(null);

  const handleInit = () => {
    if (chartRef.current) {
      chartRef.current.highlightNode(11, 'parents');
    }
  };

  return (
    <OrgChartReact
      ref={chartRef}
      onInit={handleInit}
      nodeBinding={{ field_0: 'name', field_1: 'title', img_0: 'img' }}
      data={[ /* ... */ ]}
    />
  );
};

Highlight Programmatic Code Example