Skip to content

Org Chart

A Vaadin Flow add-on that integrates the OrgChart JavaScript library to visualize organizational hierarchies.

Overview

Use the Org Chart add-on to render interactive organizational charts in a Vaadin application. It wraps the dabeng OrgChart library and displays a tree of nodes — each with a name, title, and arbitrary data — with support for panning, zooming, expand/collapse, drag-and-drop reorganization, custom node templates, and export to PNG or PDF. The hierarchy can also be edited at runtime (add/remove/update nodes, siblings, children, and parents), each change raising a corresponding event.

Features

  • Configurable OrgChart options: data, pan, zoom, zoom limits, direction, vertical depth, depth, sibling toggling, node title/content, and node template.
  • Export button with configurable filename and extension (PNG and PDF).
  • Enable/disable the expand/collapse feature.
  • Chart title.
  • Drag-and-drop of nodes, with a drag-and-drop listener.
  • Node click events and tooltips.
  • Node styling via CSS class names.
  • Custom node templates.
  • Runtime editing: add siblings, add children, add parent, remove nodes, update a node — each with a dedicated event.

Supported versions

Add-on version Vaadin version
5.x 14–25

Refer to the Vaadin Directory page for exact version compatibility.

Installation

From the Vaadin Directory

Available in the Vaadin Directory.

Maven dependency

<dependency>
    <groupId>com.flowingcode.vaadin.addons</groupId>
    <artifactId>orgchart-addon</artifactId>
    <version>X.Y.Z</version>
</dependency>

Replace X.Y.Z with the latest released version. Add the Vaadin add-ons repository to your pom.xml:

<repository>
    <id>vaadin-addons</id>
    <url>https://maven.vaadin.com/vaadin-addons</url>
</repository>

For snapshot builds, see maven.flowingcode.com/snapshots.

JavaDoc is published at javadoc.flowingcode.com.

Usage

Build a hierarchy of OrgChartItem nodes and render them with OrgChart:

OrgChartItem root = new OrgChartItem(1, "Root item", "Root Level");
OrgChartItem child1 = new OrgChartItem(2, "Item 2", "Level 1");
OrgChartItem child2 = new OrgChartItem(3, "Item 3", "Level 1");
root.setChildren(Arrays.asList(child1, child2));

OrgChart orgChart = new OrgChart(root);
orgChart.setChartTitle("A Title");
orgChart.setChartNodeContent("title");
orgChart.setChartExportButton(true);
orgChart.setChartZoom(true);
orgChart.setChartDraggable(true);

add(orgChart);

React to node clicks:

orgChart.addOnNodeClickListener(event ->
    Notification.show("Clicked: " + event.getClickedItem().getName()));

Special configuration when using Spring

When running on Spring, allow-list the com.flowingcode package so Vaadin Flow can discover the add-on's components. See Common configuration for details.

API reference

Headline types exposed by the add-on:

  • OrgChart — the chart component; extends Div. Constructor: OrgChart(OrgChartItem rootItem). Key methods: setValue(OrgChartItem), getOrgChartItem(), initializeChart(); configuration setters (setChartTitle, setChartNodeTitle, setChartNodeContent, setChartDirection, setChartZoom, setChartPan, setChartZoominLimit, setChartZoomoutLimit, setChartDepth, setChartVerticalDepth, setChartToggleSiblingsResp, setChartExpandCollapse, setChartDraggable); export setters (setChartExportButton, setChartExportFileName, setChartExportFileExtension); templates (setNodeTemplate); editing (addSiblings, addChildren, addParent, removeNodes, updateNode); and listeners (addOnNodeClickListener, addDragAndDropListener, addSiblingsAddedListener, addChildrenAddedListener, addNodesRemovedListener, addParentAddedListener, addNodeUpdatedListener).
  • OrgChartItem — the node model; implements Serializable. Constructors: OrgChartItem(Integer id, String name, String title) and a copy constructor. Key methods: getId/setId, getName/setName, getTitle/setTitle, getClassName/setClassName, getChildren/setChildren, addChildren(OrgChartItem), getData/setData(String, String), isHybrid/setHybrid.
  • ChartDirectionEnum and the event classes in the orgchart.event package (ChildrenAddedEvent, NodeUpdatedEvent, NodesRemovedEvent, ParentAddedEvent, SiblingsAddedEvent).

For the full API surface, browse the published JavaDoc.

Demo

A live demo is available at addonsv25.flowingcode.com/orgchart. To run the demo locally (the demo is a separate module):

git clone https://github.com/FlowingCode/OrgChartAddon.git
cd OrgChartAddon
mvn clean install
cd demo
mvn jetty:run

Then open http://localhost:8080/.

Source code

OrgChartAddon on GitHub — distributed under Apache License 2.0.