OrgChart<TOrgChartItem extends OrgChartItem, TNeedle>

The OrgChart component visualizes the given data as an organization chart. All data items have to be included in the data. The relationship between an item and its subordinates is specified in the subordinates.

function OrganizationChart() {
  return (
    <OrgChart data={data}> </OrgChart>
  )
}

Props

OrgChartProps

NameDescriptionType
className?
Specifies the CSS class used for the OrgChart component.
string
connectionStyles?
A function that provides a style configuration for the given connection.
ConnectionStyleProvider<TOrgChartItem>
contextMenuItems?
An optional function specifying the context menu items for a data item.
ContextMenuItemProvider<TOrgChartItem>
data
The data items visualized by the organization chart.
TOrgChartItem[]
incrementalLayout?
Specifies whether the layout algorithm should consider the existing elements as fixed. True if the layout should only place newly added items, false otherwise.
boolean
interactive?
Specifies whether the interactive collapse and expand buttons on the orgchart nodes are visible. The default is true.
boolean
itemSize?
Specifies the default item size used when no explicit width and height are provided.
{
  width: number
  height: number
}
onItemFocus?
An optional callback that’s called when an item is focused. Note that the focused item is not changed if the empty canvas is clicked.
ItemFocusedListener<TOrgChartItem>
onItemHover?
An optional callback that’s called when the hovered item has changed.
ItemHoveredListener<TOrgChartItem>
onItemSelect?
An optional callback that’s called when an item is selected or deselected.
ItemSelectedListener<TOrgChartItem>
onSearch?
An optional callback that returns whether the given item matches the search needle. The default search implementation only supports string needles and searches all properties of the data item. Provide this callback to implement custom search logic.
SearchFunction<
  TOrgChartItem,
  TNeedle
>
popupPosition?
The optional position of the popup. The default is ‘north’.
“east”
  | “north”
  | “north-east”
  | “north-west”
  | “south”
  | “south-east”
  | “south-west”
  | “west”
renderContextMenu?
An optional component that renders a custom context menu.
ComponentType<
  RenderContextMenuProps<TOrgChartItem>
>
renderItem?
A custom render component used for rendering the given data item.
ComponentType<
      RenderItemProps<TOrgChartItem>
    >
  | undefined
renderPopup?
An optional component used for rendering a custom popup.
ComponentType<
  RenderPopupProps<TOrgChartItem>
>
renderTooltip?
An optional component that can be used for rendering a custom tooltip.
ComponentType<
  RenderTooltipProps<TOrgChartItem>
>
searchNeedle?
A string or a complex object to search for. The default search implementation can only handle strings and searches on the properties of the data item. For more complex search logic, provide an OrgChart.onSearch callback.
TNeedle
style?
Specifies the CSS style used for the OrgChart component.
CSSProperties