Organization Chart
A modern, interactive organization chart that scales from small teams to enterprise-level organizations. Visualize reporting structures, department hierarchies, and team compositions with an intuitive, zoomable interface.
Features Used
About This Showcase
Organization charts are one of the most common use cases for graph visualization in enterprise applications. Whether used in HR portals, internal directories, or management dashboards, a well-designed org chart makes organizational structure immediately understandable. This showcase demonstrates how TopoKit's hierarchical layout and combo node features create a polished, production-ready org chart.
The visualization renders 150 employees across 12 departments using a top-down hierarchical layout. Departments are represented as combo nodes -- container nodes that group their members visually with a translucent boundary and a label. Clicking a department header collapses it into a single summary node showing the team size, which is invaluable when viewing large organizations where you want to focus on specific areas.
Each employee node is rendered as a rich card showing the person's name, title, and a colored indicator for their department. Hovering reveals additional details in a tooltip, including email, direct reports count, and tenure. The search feature lets users find any employee by name or title, automatically zooming and centering the view on the match. The entire chart can be exported as a high-resolution PNG for presentations and documentation.
Technical Details
Configuration Example
This example shows the hierarchical layout configuration with combo nodes for department grouping and custom card-style node rendering.
import {'{'} create {'}'} from '@topokit/renderer-canvas';
const graph = create(document.getElementById('container'), {'{'}
nodes: orgData.employees,
edges: orgData.reportingLines,
// Hierarchical top-down layout
layout: {'{'}
type: 'hierarchical',
direction: 'TB',
levelSeparation: 120,
nodeSeparation: 60,
{'}'},
// Department grouping with combo nodes
combos: orgData.departments.map((dept) => ({'{'}
id: dept.id,
label: dept.name,
collapsible: true,
style: {'{'} fill: dept.color + '15', stroke: dept.color {'}'},
{'}'})),
// Rich card-style nodes
nodeStyle: (node) => ({'{'}
shape: 'rect',
width: 160,
height: 60,
label: node.data.name,
subtitle: node.data.title,
{'}'}),
search: {'{'} enabled: true, fields: ['name', 'title'] {'}'},
theme: 'dark',
{'}'});Shipping an org-chart product?
Read the full org chart use case for the technical context (department combos, custom rendering, white-label), or talk to sales.