Built-In Components

There are optional components available to enhance the interaction with the organization chart, which can be added as children of the organization chart component:

  • Overview: Presents a simplified view of the entire graph along with the current viewport.
  • Controls: Features a toolbar with buttons to adjust the viewport.

The controls component comes with a default implementation for organization charts.

function App () { return ( <OrgChart data={data}> <Overview></Overview> <Controls buttons={OrgChartControlButtons}></Controls> </OrgChart> ) } [ { position: 'Chief Executive Officer', name: 'Eric Joplin', email: 'ejoplin@yoyodyne.com', phone: '555-0100', fax: '555-0101', businessUnit: 'Executive Unit', status: 'present', subordinates: [1, 2, 3, 4, 5, 6], id: 0 }, { position: 'Chief Executive Assistant', name: 'Gary Roberts', email: 'groberts@yoyodyne.com', phone: '555-0100', fax: '555-0101', businessUnit: 'Executive Unit', status: 'present', assistant: true, subordinates: [70, 71], id: 1 }, { position: 'Vice President of Production', name: 'Amy Kain', email: 'akain@yoyodyne.com', phone: '555-0106', fax: '555-0107', businessUnit: 'Production', status: 'unavailable', subordinates: [55, 56, 57, 58, 59], id: 2 }, { position: 'Vice President of Sales', name: 'Richard Fuller', email: 'rfuller@yoyodyne.com', phone: '555-0134', fax: '555-0135', businessUnit: 'Sales', status: 'present', subordinates: [49, 50], id: 3 }, { position: 'Vice President of Engineering', name: 'Mildred Shark', email: 'mshark@yoyodyne.com', phone: '555-0156', fax: '555-0157', businessUnit: 'Engineering', status: 'present', subordinates: [21], id: 4 }, { position: 'Marketing Manager', name: 'Angela Haase', email: 'ahaase@yoyodyne.com', phone: '555-0170', fax: '555-0171', businessUnit: 'Marketing', status: 'present', subordinates: [19, 20], id: 5 }, { position: 'Chief Financial Officer', name: 'David Kerry', email: 'dkerry@yoyodyne.com', phone: '555-0180', fax: '555-0181', businessUnit: 'Accounting', status: 'present', subordinates: [7, 8, 9], id: 6 }, { position: 'Accounts Manager', name: 'Walter Hastings', email: 'whastings@yoyodyne.com', phone: '555-0182', fax: '555-0183', businessUnit: 'Accounting', status: 'present', subordinates: [16, 17, 18], id: 7 }, { position: 'Finance Manager', name: 'Joy Medico', email: 'jmedico@yoyodyne.com', phone: '555-0190', fax: '555-0191', businessUnit: 'Accounting', status: 'present', subordinates: [13, 14, 15], id: 8 }, { position: 'Human Resource Manager', name: 'Danny Welch', email: 'dwelch@yoyodyne.com', phone: '555-0198', fax: '555-0199', businessUnit: 'Accounting', status: 'present', subordinates: [10, 11, 12], id: 9 }, { position: 'Human Resource Administrative Assistant', name: 'Leroy Vison', email: 'lvison@yoyodyne.com', phone: '555-0200', fax: '555-0201', businessUnit: 'Accounting', status: 'present', assistant: true, id: 10 }, { position: 'Benefits Specialist', name: 'Mark Parks', email: 'mparks@yoyodyne.com', phone: '555-0202', fax: '555-0203', businessUnit: 'Accounting', status: 'present', id: 11 }, { position: 'Recruiter', name: 'Linda Lenhart', email: 'llenhart@yoyodyne.com', phone: '555-0204', fax: '555-0205', businessUnit: 'Accounting', status: 'busy', id: 12 }, { position: 'Purchasing Manager', name: 'Edward Lewis', email: 'elewis@yoyodyne.com', phone: '555-0192', fax: '555-0193', businessUnit: 'Accounting', status: 'unavailable', id: 13 }, { position: 'Purchasing Assistant', name: 'Mildred Bean', email: 'mbean@yoyodyne.com', phone: '555-0194', fax: '555-0195', businessUnit: 'Accounting', status: 'busy', assistant: true, id: 14 }, { position: 'Buyer', name: 'Raymond Lindley', email: 'rlindley@yoyodyne.com', phone: '555-0196', fax: '555-0197', businessUnit: 'Accounting', status: 'present', id: 15 }, { position: 'Accounts Receivable Specialist', name: 'Susan Moran', email: 'smoran@yoyodyne.com', phone: '555-0184', fax: '555-0185', businessUnit: 'Accounting', status: 'present', id: 16 }, { position: 'Accountant', name: 'Melvin Cruz', email: 'mcruz@yoyodyne.com', phone: '555-0186', fax: '555-0187', businessUnit: 'Accounting', status: 'present', id: 17 }, { position: 'Accounts Payable Specialist', name: 'Rachel King', email: 'rking@yoyodyne.com', phone: '555-0188', fax: '555-0189', businessUnit: 'Accounting', status: 'present', id: 18 }, { position: 'Marketing Specialist', name: 'Jermaine Stewart', email: 'jstewart@yoyodyne.com', phone: '555-0172', fax: '555-0173', businessUnit: 'Marketing', status: 'present', id: 19 }, { position: 'Marketing Assistant', name: 'Lorraine Deaton', email: 'ldeaton@yoyodyne.com', phone: '555-0174', fax: '555-0175', businessUnit: 'Marketing', status: 'present', assistant: true, id: 20 }, { position: 'Engineering Manager', name: 'Martha Barnes', email: 'mbarnes@yoyodyne.com', phone: '555-0158', fax: '555-0159', businessUnit: 'Engineering', status: 'busy', subordinates: [22, 23, 24], id: 21 }, { position: 'Senior Tool Designer', name: 'Maria Dossantos', email: 'mdossantos@yoyodyne.com', phone: '555-0160', fax: '555-0161', businessUnit: 'Engineering', status: 'present', subordinates: [43, 44, 45, 46, 47, 48], id: 22 }, { position: 'Senior Design Engineer', name: 'Laurie Aitken', email: 'laitken@yoyodyne.com', phone: '555-0164', fax: '555-0165', businessUnit: 'Engineering', status: 'present', subordinates: [38, 39, 40, 41, 42], id: 23 }, { position: 'Design Engineer', name: 'Carla Clark', email: 'cclark@yoyodyne.com', phone: '555-0242', fax: '555-0243', businessUnit: 'Engineering', status: 'unavailable', id: 38 }, { position: 'Design Engineer', name: 'Cynthia Judd', email: 'cjudd@yoyodyne.com', phone: '555-0244', fax: '555-0245', businessUnit: 'Engineering', status: 'unavailable', id: 39 }, { position: 'Design Engineer', name: 'Robert Finn', email: 'rfinn@yoyodyne.com', phone: '555-0246', fax: '555-0247', businessUnit: 'Engineering', status: 'present', id: 40 }, { position: 'Design Engineer', name: 'Willie Schaub', email: 'wschaub@yoyodyne.com', phone: '555-0248', fax: '555-0249', businessUnit: 'Engineering', status: 'present', id: 41 }, { position: 'Design Engineer', name: 'Edwin Nagy', email: 'enagy@yoyodyne.com', phone: '555-0166', fax: '555-0167', businessUnit: 'Engineering', status: 'present', id: 42 }, { position: 'Tool Designer', name: 'Hector Donald', email: 'hdonald@yoyodyne.com', phone: '555-0162', fax: '555-0163', businessUnit: 'Engineering', status: 'busy', id: 43 }, { position: 'Tool Designer', name: 'Michelle Douglas', email: 'mdouglas@yoyodyne.com', phone: '555-0228', fax: '555-0229', businessUnit: 'Engineering', status: 'present', id: 44 }, { position: 'Tool Designer', name: 'Bonnie Penney', email: 'bpenney@yoyodyne.com', phone: '555-0234', fax: '555-0235', businessUnit: 'Engineering', status: 'present', id: 45 }, { position: 'Tool Designer', name: 'Francis Webster', email: 'fwebster@yoyodyne.com', phone: '555-0236', fax: '555-0237', businessUnit: 'Engineering', status: 'present', id: 46 }, { position: 'Tool Designer', name: 'Gregory Arnold', email: 'garnold@yoyodyne.com', phone: '555-0238', fax: '555-0239', businessUnit: 'Engineering', status: 'present', id: 47 }, { position: 'Tool Designer', name: 'Ken Kowalski', email: 'kkowalski@yoyodyne.com', phone: '555-0240', fax: '555-0241', businessUnit: 'Engineering', status: 'present', id: 48 }, { position: 'North America Sales Manager', name: 'Joe Vargas', email: 'jvargas@yoyodyne.com', phone: '555-0136', fax: '555-0137', businessUnit: 'Sales', status: 'present', subordinates: [53, 54], id: 49 }, { position: 'European Sales Manager', name: 'Robert Hartman', email: 'rhartman@yoyodyne.com', phone: '555-0138', fax: '555-0139', businessUnit: 'Sales', status: 'present', subordinates: [51, 52], id: 50 }, { position: 'Sales Representative', name: 'Rebecca Polite', email: 'rpolite@yoyodyne.com', phone: '555-0148', fax: '555-0149', businessUnit: 'Sales', status: 'travel', id: 51 }, { position: 'Sales Representative', name: 'Michael Daniels', email: 'mdaniels@yoyodyne.com', phone: '555-0154', fax: '555-0155', businessUnit: 'Sales', status: 'travel', id: 52 }, { position: 'Sales Representative', name: 'Robert Parson', email: 'rparson@yoyodyne.com', phone: '555-0150', fax: '555-0151', businessUnit: 'Sales', status: 'travel', id: 53 }, { position: 'Sales Representative', name: 'Melissa Noren', email: 'mnoren@yoyodyne.com', phone: '555-0152', fax: '555-0153', businessUnit: 'Sales', status: 'present', id: 54 }, { position: 'Quality Assurance Manager', name: 'Dorothy Turner', email: 'dturner@yoyodyne.com', phone: '555-0108', fax: '555-0109', businessUnit: 'Production', status: 'unavailable', subordinates: [65, 66], id: 55 }, { position: 'Master Scheduler', name: 'Larry Littlefield', email: 'llittlefield@yoyodyne.com', phone: '555-0126', fax: '555-0127', businessUnit: 'Production', status: 'present', id: 56 }, { position: 'Facilities Manager', name: 'Anne Binger', email: 'abinger@yoyodyne.com', phone: '555-0122', fax: '555-0123', businessUnit: 'Production', status: 'present', subordinates: [62], id: 57 }, { position: 'Shipping and Receiving Supervisor', name: 'Ray Hammond', email: 'rhammond@yoyodyne.com', phone: '555-0146', fax: '555-0147', businessUnit: 'Production', status: 'travel', subordinates: [60, 61], id: 58 }, { position: 'Production Supervisor', name: 'Kathy Maxwell', email: 'kmaxwell@yoyodyne.com', phone: '555-0132', fax: '555-0133', businessUnit: 'Production', status: 'present', id: 59 }, { position: 'Shipping and Receiving Clerk', name: 'Bob Lacey', email: 'blacey@yoyodyne.com', phone: '555-0124', fax: '555-0125', businessUnit: 'Production', status: 'travel', id: 60 }, { position: 'Stocker', name: 'Ronnie Garcia', email: 'rgarcia@yoyodyne.com', phone: '555-0130', fax: '555-0131', businessUnit: 'Production', status: 'present', id: 61 }, { position: 'Facilities Administrative Assistant', name: 'Timothy Jackson', email: 'tjackson@yoyodyne.com', phone: '555-0140', fax: '555-0141', businessUnit: 'Production', status: 'busy', subordinates: [63, 64], id: 62 }, { position: 'Maintenance Supervisor', name: 'Carmen Shortened', email: 'cshortened@yoyodyne.com', phone: '555-0142', fax: '555-0143', businessUnit: 'Production', status: 'present', id: 63 }, { position: 'Janitor', name: 'Thomas Stark', email: 'tstark@yoyodyne.com', phone: '555-0144', fax: '555-0145', businessUnit: 'Production', status: 'present', id: 64 }, { position: 'Quality Assurance Supervisor', name: 'Valerie Burnett', email: 'vburnett@yoyodyne.com', phone: '555-0110', fax: '555-0111', businessUnit: 'Production', status: 'present', subordinates: [69], id: 65 }, { position: 'Document Control Manager', name: 'Edward Monge', email: 'emonge@yoyodyne.com', phone: '555-0118', fax: '555-0119', businessUnit: 'Production', status: 'present', subordinates: [67, 68], id: 66 }, { position: 'Control Specialist', name: 'Howard Meyer', email: 'hmeyer@yoyodyne.com', phone: '555-0116', fax: '555-0117', businessUnit: 'Production', status: 'present', id: 67 }, { position: 'Document Control Assistant', name: 'Lisa Jensen', email: 'ljensen@yoyodyne.com', phone: '555-0120', fax: '555-0121', businessUnit: 'Production', status: 'travel', assistant: true, id: 68 }, { position: 'Quality Assurance Technician', name: 'Martin Cornett', email: 'mcornett@yoyodyne.com', phone: '555-0114', fax: '555-0115', businessUnit: 'Production', status: 'present', id: 69 }, { position: 'Senior Executive Assistant', name: 'Alexander Burns', email: 'aburns@yoyodyne.com', phone: '555-0102', fax: '555-0103', businessUnit: 'Executive Unit', status: 'present', id: 70 }, { position: 'Junior Executive Assistant', name: 'Linda Newland', email: 'lnewland@yoyodyne.com', phone: '555-0112', fax: '555-0113', businessUnit: 'Executive Unit', status: 'present', id: 71 } ]