OrgChart

The TkOrgChart component allows users to visualize organizational data using d3-org-chart.

React

import { TkOrgChart } from '@takeoff-ui/react'

Vue

import { TkOrgChart } from '@takeoff-ui/vue'

Angular

import { TkOrgChart } from '@takeoff-ui/angular'

Basic

A simple org chart.

View Code

React

const data = {
    name: 'Emre Arslan',
    title: 'CEO',
    children: [
        {
            name: 'Emre Arslan',
            title: 'CTO',
            children: [
                {
                    name: 'Engineering manager',
                    title: 'VP of Engineering',
                },
                {
                    name: 'Engineering manager',
                    title: 'VP of Engineering',
                },
                {
                    name: 'Engineering manager',
                    title: 'VP of Engineering',
                },
                {
                    name: 'Engineering manager',
                    title: 'VP of Engineering',
                },
            ],
        },
    ],
};
      const options = {
    nodeId: (d: any) => d.id,
    parentNodeId: (d: any) => d.parentId,
};
            <TkOrgChart
                ref={chartRef}
                data={data}
                options={options}
                collapsible = {true}
                onTkNodeClick={handleNodeClick}
            />

Vue

const data = {
    name: 'Emre Arslan',
    title: 'CEO',
    children: [
        {
            name: 'Emre Arslan',
            title: 'CTO',
            children: [
                {
                    name: 'Engineering manager',
                    title: 'VP of Engineering',
                },
                {
                    name: 'Engineering manager',
                    title: 'VP of Engineering',
                },
                {
                    name: 'Engineering manager',
                    title: 'VP of Engineering',
                },
                {
                    name: 'Engineering manager',
                    title: 'VP of Engineering',
                },
            ],
        },
    ],
};
      const options = {
    nodeId: (d: any) => d.id,
    parentNodeId: (d: any) => d.parentId,
};
            <TkOrgChart
                ref={chartRef}
                data={data}
                options={options}
                collapsible = {true}
                onTkNodeClick={handleNodeClick}
            />

Angular

API

Props

Name	Type	Default	Description
	string	null	Accessibility label for the chart
	boolean	true	Enable or disable expand/collapse buttons functionality When disabled, all nodes will be automatically expanded
	any[]	null	Chart data should be an array of node objects with at least id, parentId (optional for root), and name properties.
	any	null	Chart options for d3-org-chart customization

Events

Name	Description
tk-node-click	Node click event

Methods

Name	Type	Description
addNode	addNode(node: any) => Promise<void>	Add node to organizational chart
fit	fit() => Promise<void>	Fit chart to screen
getOrgChart	getOrgChart() => Promise<any>	Get the chart instance
refresh	refresh() => Promise<void>	Refresh the chart