Angular Diagram - OrgChart Shapes

The Diagram component provides shapes with images that are specially designed for use in OrgCharts. You can select a shape with the following image positions: on the left, right, or top of the shape.

In this demo, the Diagram is bound to a data source. The imageUrlExpr property specifies the name of a field that provides a path to images.

Backend API

<dx-diagram #diagram id="diagram"> <dxo-diagram-nodes [dataSource]="orgItemsDataSource" keyExpr="ID" textExpr="Text" typeExpr="Type" imageUrlExpr="Picture" > <dxo-diagram-auto-layout type="tree" orientation="horizontal" ></dxo-diagram-auto-layout> </dxo-diagram-nodes> <dxo-diagram-edges [dataSource]="orgLinksDataSource" keyExpr="ID" fromExpr="From" toExpr="To" ></dxo-diagram-edges> <dxo-diagram-toolbox> <dxi-diagram-group category="general" title="General"></dxi-diagram-group> <dxi-diagram-group category="orgChart" title="Organizational Chart" [expanded]="true" ></dxi-diagram-group> </dxo-diagram-toolbox> </dx-diagram>

import { bootstrapApplication } from '@angular/platform-browser'; import { Component, enableProdMode, provideZoneChangeDetection } from '@angular/core'; import { provideHttpClient, withFetch } from '@angular/common/http'; import { DxDiagramModule } from 'devextreme-angular'; import { ArrayStore } from 'devextreme-angular/common/data'; import { Service } from './app.service'; if (!/localhost/.test(document.location.host)) { enableProdMode(); } @Component({ selector: 'demo-app', templateUrl: './app.component.html', styleUrls: ['./app.component.css'], providers: [Service], preserveWhitespaces: true, imports: [ DxDiagramModule, ], }) export class AppComponent { orgItemsDataSource: ArrayStore; orgLinksDataSource: ArrayStore; constructor(service: Service) { this.orgItemsDataSource = new ArrayStore({ key: 'ID', data: service.getOrgItems(), }); this.orgLinksDataSource = new ArrayStore({ key: 'ID', data: service.getOrgLinks(), }); } } bootstrapApplication(AppComponent, { providers: [ provideZoneChangeDetection({ eventCoalescing: true, runCoalescing: true }), provideHttpClient(withFetch()), ], });

::ng-deep #diagram { height: 900px; }

import { Injectable } from '@angular/core'; export class OrgItem { ID: string; Text: string; Type: string; Picture: string; } export class OrgLink { ID: string; From: string; To: string; } const orgItems: OrgItem[] = [ { ID: '106', Text: 'Development', Type: 'ellipse', Picture: '', }, { ID: '107', Text: 'WinForms\nTeam', Type: 'ellipse', Picture: '', }, { ID: '108', Text: 'WPF\nTeam', Type: 'ellipse', Picture: '', }, { ID: '109', Text: 'Javascript\nTeam', Type: 'ellipse', Picture: '', }, { ID: '110', Text: 'ASP.NET\nTeam', Type: 'ellipse', Picture: '', }, { ID: '112', Text: 'Ken Samuelson', Type: 'cardWithImageOnLeft', Picture: '../../../../images/employees/32.png', }, { ID: '113', Text: 'Terry Bradley', Type: 'cardWithImageOnLeft', Picture: '../../../../images/employees/33.png', }, { ID: '115', Text: 'Nat Maguiree', Type: 'cardWithImageOnLeft', Picture: '../../../../images/employees/34.png', }, { ID: '116', Text: 'Gabe Jones', Type: 'cardWithImageOnLeft', Picture: '../../../../images/employees/35.png', }, { ID: '117', Text: 'Lucy Ball', Type: 'cardWithImageOnLeft', Picture: '../../../../images/employees/36.png', }, { ID: '119', Text: 'Bart Arnaz', Type: 'cardWithImageOnLeft', Picture: '../../../../images/employees/37.png', }, { ID: '120', Text: 'Leah Simpson', Type: 'cardWithImageOnLeft', Picture: '../../../../images/employees/38.png', }, { ID: '122', Text: 'Hannah Brookly', Type: 'cardWithImageOnLeft', Picture: '../../../../images/employees/39.png', }, { ID: '123', Text: 'Arnie Schwartz', Type: 'cardWithImageOnLeft', Picture: '../../../../images/employees/40.png', }, ]; const orgLinks: OrgLink[] = [ { ID: '124', From: '106', To: '108', }, { ID: '125', From: '106', To: '109', }, { ID: '126', From: '106', To: '107', }, { ID: '127', From: '106', To: '110', }, { ID: '129', From: '110', To: '112', }, { ID: '130', From: '110', To: '113', }, { ID: '132', From: '107', To: '115', }, { ID: '133', From: '107', To: '116', }, { ID: '134', From: '107', To: '117', }, { ID: '136', From: '108', To: '119', }, { ID: '137', From: '108', To: '120', }, { ID: '139', From: '109', To: '122', }, { ID: '140', From: '109', To: '123', }, ]; @Injectable() export class Service { getOrgItems() { return orgItems; } getOrgLinks() { return orgLinks; } }

<!DOCTYPE html> <html lang="en"> <head> <title>DevExtreme Demo</title> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0" /> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/26.1.5/css/dx.light.css" /> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/26.1.5/css/dx-diagram.min.css" /> </head> <body class="dx-viewport"> <div class="demo-container"> <demo-app>Loading...</demo-app> </div> <script src="https://cdn.jsdelivr.net/npm/zone.js@0.16.2/bundles/zone.umd.js"></script> <script src="./bundle.js" type="module"></script> </body> </html>