What is an organization chart and how to develop one using JointJS+?

The structure of a company can be represented in many different ways. Data can either be presented as rows and columns in a Google spreadsheet (or other software), or it can be expressed visually, making it easier to understand the relationships between team members and the overall hierarchy of the company.

Organizational charts, as the name suggests, serve exactly this purpose - they visually and clearly display the hierarchy of a company or organization. They can even include other important information about employees, such as their contact details, roles or even a profile photo. They are also known under different names such as Org Charts, Organograms, Organogram Charts or Hierarchy Charts.

JointJS+ equips front-end developers with a rich selection of plugins, empowering them to ease their development process and enhance their productivity. This allows developers to take their mind off rendering and event handling which in the end saves you precious time that can be applied elsewhere.

Such plugins include PaperScroller that takes care of scrolling, panning, centering and auto-resizing content. The most important of plugins for this application are TreeLayout and TreeLayoutView which completely handle positioning of the elements for you to give you a great looking org chart as a result! Do you want to change properties of cell models in a graphical manner? We got you covered, for that we have an Inspector plugin. If you want to display some message over all other content, make sure to use Dialog.

The organization chart demo application above is written in TypeScript and can be easily integrated with a wide range of web application frameworks such as React, Angular, Vue, Svelte, or Lightning. To check its source code, start a free 30-day trial of JointJS+.

Integration

Are you interested in creating organizational charts using React, Vue, Angular, Svelte, or Lightning? This is your stop! JointJS+, being framework agnostic, effortlessly integrates with these beloved web application frameworks, empowering developers with a streamlined experience in unleashing the potential of organizational charts within their projects.

We have prepared examples for the most popular JavaScript frameworks, showcasing the utilization of our TreeLayoutView plugin. These examples serve as valuable references, offering detailed instructions on seamlessly integrating and leveraging the capabilities of the plugin within your preferred framework.

TypeScript org chart

Enjoy the convenience of TypeScript as the demo is already built using TypeScript, allowing you to make the most of its static typing and advanced features. With comprehensive type definitions, you can effortlessly create dynamic and visually engaging organizational charts. Experience the ease and power of TypeScript in charting your organizational structures.

React org chart

When it comes to React applications, incorporating JointJS+ for organizational chart creation is a straightforward process. By leveraging React's component-based architecture and efficient rendering, developers can easily build reusable chart components that dynamically adapt to data changes. This integration ensures that complex organizational structures can be presented in an engaging and visually appealing manner. As demonstrated earlier, here's an example of how to initialize TreeLayoutView in a React application.

-- CODE language-js --
‍import { useEffect, useRef } from 'react';
import { dia, ui } from '@clientio/rappid';

export const OrgChartLayoutView = () => {
  const paperEl = useRef(null);
  const graph = useRef();
  const paper = useRef();
  const layoutView = useRef();

  useEffect(() => {
    graph.current = new dia.Graph();
    paper.current = new dia.Paper({
      model: graph.current,
      el: paperEl.current,
      frozen: true,
      async: true,
      width: 500,
      height: 500
    });

     layoutView.current = new ui.TreeLayoutView({
      paper: paper.current
    });

    paper.current.unfreeze();

    return () => {
      paper.current.remove();
    };
  }, []);

  return (
    <div id="paper" ref={paperEl}/>
  );
}

🔗 Interested in a step-by-step guide on how to integrate JointJS+ with your React application? Follow our tutorial on React and JointJS+ integration. For more examples, check out our Github repository.

Vue org chart

Integrating organizational charts into Vue applications is a breeze with JointJS+. Vue's intuitive nature and reactive capabilities make the process seamless. By leveraging Vue's declarative syntax and component-driven approach, developers can easily create interfaces that showcase hierarchical relationships within organizations. Take a look at this example of initializing TreeLayoutView in a Vue application to see how it's done.

-- CODE language-js --
<script setup>
import { ref, onMounted, onBeforeUnmount } from 'vue';
import { dia, ui } from '@clientio/rappid';

const paperEl = ref(null);
const graph = new dia.Graph()
const paper = new dia.Paper({
  model: graph,
  frozen: true,
  async: true,
  width: 500,
  height: 500
});
const layoutView = new ui.TreeLayoutView({
  paper
});

onMounted(() => {
  paper.render();
  paperEl.value.appendChild(paper.el);
  paper.unfreeze();
});

onBeforeUnmount(() => {
  layoutView.remove();
  paper.remove();
});
</script>

<template>
  <div ref="paperEl"></div>
</template>

🔗 Interested in a step-by-step guide on how to integrate JointJS+ with your Vue application? Follow our tutorial on Vue and JointJS+ integration. For more examples, check out our Github repository.

Angular org chart

Integrate JointJS+ seamlessly with Angular for Organizational Charts. Leverage Angular's robust features, including data binding and dependency injection, to effortlessly create dynamic chart applications. Enhance user experiences and streamline development with accurate representations of complex organizational structures. See an example of TreeLayoutView integration in Angular.

-- CODE language-js --
import { AfterViewInit, OnInit, Component, ViewChild, OnDestroy } from '@angular/core';
import { dia, ui } from '@clientio/rappid';

@Component({
   selector: 'org-chart-layout-view',
   template: `
       <div #paperEl></div>
    `
})

export class OrgChartLayoutView implements OnInit, AfterViewInit, OnDestroy {
   @ViewChild('paperEl') paperEl;

   private graph;
   private paper;
   private layoutView;

   public ngOnInit() {
       const graph = this.graph = new dia.Graph();
       const paper = this.paper = new dia.Paper({
           model: graph,
           frozen: true,
           async: true,
           width: 500,
           height: 500
       });

       this.layoutView = new ui.TreeLayoutView({
           paper
       });

       paper.render();
   }

   public ngAfterViewInit() {
       const { paper, paperEl } = this;
       paperEl.nativeElement.appendChild(this.paper.el);
       paper.unfreeze();
   }

   public ngOnDestroy() {
       const { paper, layoutView } = this;
       layoutView.remove();
       paper.remove();
   }
}

🔗 Interested in a step-by-step guide on how to integrate JointJS+ into your Angular application? Follow our tutorial on Angular and JointJS+ integration. For more examples, check out our Github repository.

Svelte org chart

Integrate JointJS+ seamlessly with Svelte to create captivating organizational charts. Benefit from Svelte's lightweight and reactive nature, allowing developers to generate optimized code for exceptional performance. The integration of JointJS+ and Svelte enables developers to effortlessly create interactive representations of organizational structures. Explore the setup of TreeLayoutView within a Svelte application.

-- CODE language-js --
<script>
  import { onMount, onDestroy } from 'svelte';
  import { dia, ui } from '@clientio/rappid/rappid.js';

  let paperEl;
  let graph;
  let paper;
  let layoutView;

  onMount(() => {
    graph = new dia.Graph();
    paper = new dia.Paper({
      model: graph,
      el: paperEl,
      frozen: true,
      async: true,
      width: 500,
      height: 500,
    });

    layoutView = new ui.TreeLayoutView({
      paper,
    });
    paper.unfreeze();
  });

  onDestroy(() => {
    layoutView.remove();
    paper.remove();
  });
</script>

<main bind:this={paperEl} />

🔗 Interested in a step-by-step guide on how to integrate JointJS+ into your Svelte application? Follow our tutorial on Svelte and JointJS+ integration. For more examples, check out our Github repository.

Salesforce Lightning org chart

The Salesforce Lightning framework empowers developers to enhance JointJS+ with versatile capabilities. By leveraging its features, developers can seamlessly create dynamic chart components that effectively visualize hierarchical networks.

🔗 Interested in a step-by-step guide on how to integrate JointJS+ into your Lightning application? Follow our tutorial on Lightning and JointJS+ integration.

Ready to take the next step?

Modern development is not about building everything from scratch. The JointJS team equips you with plenty of ready-to-use demo apps that can serve as a boilerplate and radically reduce your development time. Start a free 30-day JointJS+ trial, get fully typed source code of the Organizational Chart application, and go from zero to a fully functional app in no time.