Why Choose DHTMLX Diagram for Building JavaScript Org Charts

What to Expect from DHTMLX Diagram Library

  • advanced performance in all modern browsers,
  • integration with popular JavaScript frameworks (Angular, React, Vue.js),
  • native experience on any touch device,
  • full UI localization,
  • exporting to PDF, PNG, and JSON formats,
  • TypeScript support for faster coding and improved code maintenance.

Approaches to Visualizing Company’s Structure with DHTMLX Diagram

Diagram in Org Chart Mode

Check the sample >
Check the sample >

Simple Initialization

const diagram = new dhx.Diagram("diagram_container", {
type: "org"
});

Quick Configuration for All Cards

const defaults = {
height: 115
width: 330
};

Custom Org Chart Elements

const template = ({ photo, name, post, phone, mail }) => (`
<div class=”dhx-diagram-demo_personal-card”>

</div>
diagram.addShape("template", {
template: template
defaults: {
name: "Name and First name",
post: "Position held",
phone: "(405) 000-00-00",
mail: "some@mail.com",
photo: "../common/big_img/big-avatar-1.jpg",
height: 115, width: 330
},
});
Check the sample >
const data = [
{
id: "1-2",
from: "1",
to: "2",
type: "line",
strokeType: "dash",
stroke: "red",
},
];
Check the sample >

Assistant and Partner Shapes

const data = [
{
"id": "1",
"text": "Chairman & CEO",
"title": "Henry Bennett",
"img": "../avatar-01.png"
},
// partner for 1
{
"id": "1.1",
"text": "CTO",
"title": "Greg Mash",
"img": "../avatar-17.jpg",
"partner": true,
"parent": "1",
},
// partner for 1
{
"id": "1.2",
"text": "CFO",
"title": "Olga Dahixi",
"img": "../avatar-23.jpg",
"partner": true,
"parent": "1",
},
// assistant for 1
{
"id": "1.3",
"text": "Assistant",
"title": "Mike Freebel",
"img": "../avatar-30.jpg",
"assistant": true,
"parent": "1",
},
];
Check the sample >

Features for Convenient Working with Large Org Charts

  • expanding/collapsing branches,
  • filtering org chart items,
  • adding a search bar,
  • displaying a chart compactly in a vertical mode,
  • scrolling to a specific card,
  • zooming in/out the org chart structure.

Benefits of Using DHTMLX Diagram Editor

Multifunctional Toolbar

Numerous Options for Interacting with Cards

Check the sample >
  • adding a new card,
  • adding assistants and partners,
  • aligning children of a given card vertically or horizontally,
  • deleting the selected card (except for the root one) with its children.

Editing Cards

Check the sample >
Check the sample >

Editor Customization

Check the sample >
Check the sample >
Check the sample >

Conclusion

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store