Getting Started with React Diagram
28 Sep 202424 minutes to read
This section explains the steps required to create a simple diagram and demonstrates the basic usage of the diagram control.
Prerequisites
System requirements for Syncfusion React UI components
Dependencies
The following list of dependencies are required to use the Diagram
component in your application.
|-- @syncfusion/ej2-react-diagrams
|-- @syncfusion/ej2-base
|-- @syncfusion/ej2-data
|-- @syncfusion/ej2-navigations
|-- @syncfusion/ej2-inputs
|-- @syncfusion/ej2-popups
|-- @syncfusion/ej2-buttons
|-- @syncfusion/ej2-lists
|-- @syncfusion/ej2-splitbuttons
|-- @syncfusion/ej2-diagrams
|-- @syncfusion/ej2-react-base
Installation and configuration
You can use create-react-app
to setup the applications. Run the following command to install create-react-app
in JavaScript
environment.
npx create-react-app my-diagram-app
cd my-diagram-app
npm start
yarn create react-app my-diagram-app
cd my-diagram-app
yarn start
To set-up a React application in TypeScript
environment, run the following command.
npx create-react-app my-diagram-app --template typescript
cd my-diagram-app
npm start
yarn create react-app my-diagram-app --template typescript
cd my-diagram-app
yarn start
Adding Syncfusion packages
All the available Essential JS 2 packages are published in Node Package Manager
public registry. You can choose the component that you want to install. For this application, we are going to use Diagram
component.
To install Diagram component, use the following command
npm install @syncfusion/ej2-react-diagrams --save
Adding Style sheet to the Application
The following CSS files are available in ../node_modules/@syncfusion package folder. This can be added as reference in src/App.css
.
@import "../node_modules/@syncfusion/ej2-react-diagrams/styles/material.css";
@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
@import "../node_modules/@syncfusion/ej2-popups/styles/material.css";
@import "../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css";
@import "../node_modules/@syncfusion/ej2-navigations/styles/material.css";
NOTE
To refer App.css in the application, import it in the src/App.tsx file.
import './App.css';
Module Injection
The diagram component is divided into individual feature-wise modules. In order to use a particular feature, you need to inject its feature service in the App. The following list describes the module names and their description.
-
BpmnDiagrams
- Inject this provider to add built-in BPMN Shapes to diagrams. -
ConnectorBridging
- Inject this provider to add bridges to connectors. -
ConnectorEditing
- Inject this provider to edit the segments for connector. -
ComplexHierarchicalTree
- Inject this provider to complex hierarchical tree like structure. -
DataBinding
- Inject this provider to populate nodes from given data source. -
DiagramContextMenu
- Inject this provider to manipulate context menu. -
HierarchicalTree
- Inject this provider to use hierarchical tree like structure. -
LayoutAnimation
- Inject this provider animation to layouts. -
MindMap
- Inject this provider to use mind map. -
PrintAndExport
- Inject this provider to print or export the objects. -
RadialTree
- Inject this provider to use Radial tree like structure. -
Snapping
- Inject this provider to Snap the objects. -
SymmetricLayout
- Inject this provider to render layout in symmetrical method. -
UndoRedo
- Inject this provider to revert and restore the changes. -
Ej1Serialization
- Inject this provider to load ej1 diagram json in ej2 diagram.
These modules should be injected into the diagram using the Inject directive.
import * as React from "react";
import * as ReactDOM from "react-dom";
import {
DiagramComponent,
HierarchicalTree,
MindMap,
RadialTree,
ComplexHierarchicalTree,
DataBinding,
Snapping,
PrintAndExport,
BpmnDiagrams,
SymmetricLayout,
ConnectorBridging,
UndoRedo,
LayoutAnimation,
DiagramContextMenu,
ConnectorEditing,
Ej1Serialization,
Inject
} from "@syncfusion/ej2-react-diagrams";
export default function App() {
return (
<DiagramComponent id="diagram" width={1000} height={500}>
<Inject
services={[
HierarchicalTree,
MindMap,
RadialTree,
ComplexHierarchicalTree,
DataBinding,
Snapping,
PrintAndExport,
BpmnDiagrams,
SymmetricLayout,
ConnectorBridging,
UndoRedo,
LayoutAnimation,
DiagramContextMenu,
ConnectorEditing,
Ej1Serialization
]}
/>
</DiagramComponent>
);
}
const root = ReactDOM.createRoot(document.getElementById("diagram"));
root.render(<App />);
Adding Diagram component to the Application
-
To include the Diagram component in application import the
DiagramComponent
fromej2-react-diagrams
package. -
Then add the Diagram component as shown in below code example.
[src/App.js]
import './App.css';
import { DiagramComponent } from '@syncfusion/ej2-react-diagrams';
function App() {
return (
<div className="App">
<DiagramComponent
id="diagram"
width={'100%'}
height={'500px'}></DiagramComponent>
</div>
);
}
export default App;
Defining Basic Diagram
The below examples shows the basic diagram component which renders an empty diagram.
import * as React from "react";
import * as ReactDOM from "react-dom";
import { DiagramComponent } from "@syncfusion/ej2-react-diagrams";
export default function App() {
return (<DiagramComponent id="container" width={"100%"} height={"350px"}/>);
}
const root = ReactDOM.createRoot(document.getElementById("diagram"));
root.render(<App />);
import * as React from "react";
import * as ReactDOM from "react-dom";
import { DiagramComponent } from "@syncfusion/ej2-react-diagrams";
export default function App() {
return (
<DiagramComponent id="container" width={"100%"} height={"350px"} />
);
}
const root = ReactDOM.createRoot(document.getElementById("diagram") as HTMLElement);
root.render(<App />);
<!DOCTYPE html>
<html lang="en">
<head>
<title>Syncfusion React Chart-DataLabel</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Essential JS 2 for React Components" />
<meta name="author" content="Syncfusion" />
<link href="index.css" rel="stylesheet">
<link href="//cdn.syncfusion.com/ej2/ej2-base/styles/material.css" rel="stylesheet">
<link href="//cdn.syncfusion.com/ej2/ej2-buttons/styles/material.css" rel="stylesheet">
<link href="//cdn.syncfusion.com/ej2/ej2-popups/styles/material.css" rel="stylesheet">
<link href="//cdn.syncfusion.com/ej2/ej2-splitbuttons/styles/material.css" rel="stylesheet">
<link href="//cdn.syncfusion.com/ej2/ej2-diagrams/styles/material.css" rel="stylesheet">
<link href="//cdn.syncfusion.com/ej2/ej2-navigations/styles/fabric.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<script src="systemjs.config.js"></script>
<style>
#loader {
color: #008cff;
height: 40px;
left: 45%;
position: absolute;
top: 45%;
width: 30%;
}
#diagram {
display: block;
}
</style>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
<div id='diagram'>
<div id='loader'>Loading....</div>
</div>
</body>
</html>
Now run the npm start
command in the console, it will run your application and open the browser window.
npm start
Basic Diagram elements
-
Node
: Visualizes any graphical object using nodes, which can also be arranged and manipulated on a diagram page. -
Connector
: Represents the relationship between two nodes. Three types of connectors provided as follows:
1) Orthogonal
2) Bezier
3) Straight
-
Port
: Acts as the connection points of node or connector and allows you to create connections with only specific points. -
Annotation
: Shows additional information by adding text or labels on nodes and connectors.
Flow Diagram
Create and Add Node
Create and add a node
(JSON data) with specific position, size, label, and shape.
import * as React from "react";
import * as ReactDOM from "react-dom";
import { DiagramComponent } from "@syncfusion/ej2-react-diagrams";
export default function App() {
const nodes = [
{
id: 'Start', width: 140, height: 50, offsetX: 300, offsetY: 100,
annotations: [{
id: 'label1',
content: 'Start'
}],
}
];
return (<DiagramComponent id="container" width={"100%"} height={"350px"} nodes={nodes}/>);
}
const root = ReactDOM.createRoot(document.getElementById("diagram"));
root.render(<App />);
import * as React from "react";
import * as ReactDOM from "react-dom";
import { DiagramComponent, NodeModel } from "@syncfusion/ej2-react-diagrams";
export default function App() {
const nodes: NodeModel[] = [
{
id: 'Start', width: 140, height: 50, offsetX: 300, offsetY: 100,
annotations: [{
id: 'label1',
content: 'Start'
}],
}
];
return (
<DiagramComponent
id="container"
width={"100%"}
height={"350px"}
nodes={nodes}
/>
);
}
const root = ReactDOM.createRoot(document.getElementById("diagram") as HTMLElement);
root.render(<App />);
<!DOCTYPE html>
<html lang="en">
<head>
<title>Syncfusion React Chart-DataLabel</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Essential JS 2 for React Components" />
<meta name="author" content="Syncfusion" />
<link href="index.css" rel="stylesheet">
<link href="//cdn.syncfusion.com/ej2/ej2-base/styles/material.css" rel="stylesheet">
<link href="//cdn.syncfusion.com/ej2/ej2-buttons/styles/material.css" rel="stylesheet">
<link href="//cdn.syncfusion.com/ej2/ej2-popups/styles/material.css" rel="stylesheet">
<link href="//cdn.syncfusion.com/ej2/ej2-splitbuttons/styles/material.css" rel="stylesheet">
<link href="//cdn.syncfusion.com/ej2/ej2-diagrams/styles/material.css" rel="stylesheet">
<link href="//cdn.syncfusion.com/ej2/ej2-navigations/styles/fabric.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<script src="systemjs.config.js"></script>
<style>
#loader {
color: #008cff;
height: 40px;
left: 45%;
position: absolute;
top: 45%;
width: 30%;
}
#diagram {
display: block;
}
</style>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
<div id='diagram'>
<div id='loader'>Loading....</div>
</div>
</body>
</html>
Apply shape and style to node
Syncfusion diagram control provides support to render many built-in shapes in diagram.
Please refer to Shapes
to know about built-in Shapes.
The appearance of a node can be customized by changing its fill
color, strokeColor
, strokeWidth
, borderColor
, borderWidth
, strokeDashArray
, opacity
, and shadow
.
import * as React from "react";
import * as ReactDOM from "react-dom";
import { DiagramComponent } from "@syncfusion/ej2-react-diagrams";
export default function App() {
const nodes = [
{
id: 'Start', width: 140, height: 70, offsetX: 300, offsetY: 100,
annotations: [{
id: 'label1',
content: 'Start'
}],
//node shape
shape: { type: 'Flow', shape: 'Terminator' },
//node style
style:{fill:'red',strokeColor:'green',strokeWidth:5,strokeDashArray:'2 2'},
borderWidth:10,
borderColor:'orange'
}
];
return (<DiagramComponent id="container" width={"100%"} height={"350px"} nodes={nodes}/>);
}
const root = ReactDOM.createRoot(document.getElementById("diagram"));
root.render(<App />);
import * as React from "react";
import * as ReactDOM from "react-dom";
import { DiagramComponent, NodeModel } from "@syncfusion/ej2-react-diagrams";
export default function App() {
const nodes:NodeModel[]= [
{
id: 'Start', width: 140, height: 70, offsetX: 300, offsetY: 100,
annotations: [{
id: 'label1',
content: 'Start'
}],
//node shape
shape: { type: 'Flow', shape: 'Terminator' },
//node style
style:{fill:'red',strokeColor:'green',strokeWidth:5,strokeDashArray:'2 2'},
borderWidth:10,
borderColor:'orange'
}
]
return (
<DiagramComponent id="container" width={"100%"} height={"350px"} nodes={nodes} />
);
}
const root = ReactDOM.createRoot(document.getElementById("diagram") as HTMLElement);
root.render(<App />);
<!DOCTYPE html>
<html lang="en">
<head>
<title>Syncfusion React Chart-DataLabel</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Essential JS 2 for React Components" />
<meta name="author" content="Syncfusion" />
<link href="index.css" rel="stylesheet">
<link href="//cdn.syncfusion.com/ej2/ej2-base/styles/material.css" rel="stylesheet">
<link href="//cdn.syncfusion.com/ej2/ej2-buttons/styles/material.css" rel="stylesheet">
<link href="//cdn.syncfusion.com/ej2/ej2-popups/styles/material.css" rel="stylesheet">
<link href="//cdn.syncfusion.com/ej2/ej2-splitbuttons/styles/material.css" rel="stylesheet">
<link href="//cdn.syncfusion.com/ej2/ej2-diagrams/styles/material.css" rel="stylesheet">
<link href="//cdn.syncfusion.com/ej2/ej2-navigations/styles/fabric.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<script src="systemjs.config.js"></script>
<style>
#loader {
color: #008cff;
height: 40px;
left: 45%;
position: absolute;
top: 45%;
width: 30%;
}
#diagram {
display: block;
}
</style>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
<div id='diagram'>
<div id='loader'>Loading....</div>
</div>
</body>
</html>
Add other flowchart nodes to the diagram
You can add multiple nodes with different shapes into diagram.
import * as React from "react";
import * as ReactDOM from "react-dom";
import { DiagramComponent } from "@syncfusion/ej2-react-diagrams";
export default function App() {
const nodes = [
{
id: 'Start', width: 140, height: 70, offsetX: 300, offsetY: 100,
annotations: [{
id: 'label1',
content: 'Start'
}],
shape: { type: 'Flow', shape: 'Terminator' },
style:{fill:'skyblue',strokeColor:'skyblue',},
},
{
id: 'Process', width: 140, height: 70, offsetX: 300, offsetY: 200,
annotations: [{
id: 'label1',
content: 'Process'
}],
shape: { type: 'Flow', shape: 'Process' },
style:{fill:'skyblue',strokeColor:'skyblue',},
},
{
id: 'Decision', width: 140, height: 70, offsetX: 300, offsetY: 300,
annotations: [{
id: 'label1',
content: 'Decision'
}],
shape: { type: 'Flow', shape: 'Decision' },
style:{fill:'skyblue',strokeColor:'skyblue',},
}
];
return (<DiagramComponent id="container" width={"100%"} height={"350px"} nodes={nodes}/>);
}
const root = ReactDOM.createRoot(document.getElementById("diagram"));
root.render(<App />);
Connect flow chart nodes
Connect these nodes by adding a connector using the connectors
property of diagram and refer the source and target end by using the sourceID
and targetID
properties.
The required nodes and connectors can be added to form a complete flow diagram.
import * as React from "react";
import * as ReactDOM from "react-dom";
import { DiagramComponent } from "@syncfusion/ej2-react-diagrams";
export default function App() {
const nodes = [
{
id: "node1",
offsetY: 50,
shape: { type: "Flow", shape: "Terminator" },
annotations: [
{
content: "Start"
}
]
},
{
id: "node2",
offsetY: 140,
shape: { type: "Flow", shape: "Process" },
annotations: [
{
content: "var i = 0;"
}
]
},
{
id: "node3",
offsetY: 230,
shape: { type: "Flow", shape: "Decision" },
annotations: [
{
content: "i < 10?"
}
]
},
{
id: "node4",
offsetY: 320,
shape: { type: "Flow", shape: "PreDefinedProcess" },
annotations: [
{
content: 'print("Hello!!");'
}
]
},
{
id: "node5",
offsetY: 410,
shape: { type: "Flow", shape: "Process" },
annotations: [
{
content: "i++;"
}
]
},
{
id: "node6",
offsetY: 500,
shape: { type: "Flow", shape: "Terminator" },
annotations: [
{
content: "End"
}
]
}
];
const connectors = [
{
id: "connector1",
sourceID: "node1",
targetID: "node2"
},
{
id: "connector2",
sourceID: "node2",
targetID: "node3"
},
{
id: "connector3",
sourceID: "node3",
targetID: "node4",
annotations: [{ content: "Yes" }]
},
{
id: "connector4",
sourceID: "node3",
targetID: "node6",
annotations: [{ content: "No" }],
type: 'Orthogonal',
segments: [
{ type: 'Orthogonal', length: 50, direction: "Right" },
{ type: 'Orthogonal', length: 300, direction: "Bottom" }
]
},
{
id: "connector5",
sourceID: "node4",
targetID: "node5"
},
{
id: "connector6",
sourceID: "node5",
targetID: "node3",
type: 'Orthogonal',
segments: [
{ length: 50, type: 'Orthogonal', direction: "Left" },
{ length: 200, type: 'Orthogonal', direction: "Top" }
]
}
];
return (<DiagramComponent id="container" width={"100%"} height={"600px"} nodes={nodes} connectors={connectors} getNodeDefaults={(node) => {
node.height = 50;
node.width = 140;
if(node.id === "node1" || node.id === "node4"){
node.style = { fill: "#357BD2", strokeColor: "white" };
}else if(node.id === "node2" || node.id === "node5"){
node.style = { fill: "yellow", strokeColor: "white" };
}else if(node.id === "node3"){
node.style = { fill: "#00FF00", strokeColor: "white" };
}else if(node.id === "node6"){
node.style = { fill: "red", strokeColor: "white" };
}
node.offsetX = 300;
return node;
}} getConnectorDefaults={(obj) => {
obj.type = "Orthogonal";
obj.targetDecorator = { shape: 'Arrow', width: 10, height: 10 };
return obj;
}}/>);
}
const root = ReactDOM.createRoot(document.getElementById("diagram"));
root.render(<App />);
import * as React from "react";
import * as ReactDOM from "react-dom";
import {
DiagramComponent,
NodeModel,
ConnectorModel
} from "@syncfusion/ej2-react-diagrams";
export default function App() {
const nodes: NodeModel[] = [
{
id: "node1",
offsetY: 50,
shape: { type: "Flow", shape: "Terminator" },
annotations: [
{
content: "Start"
}
]
},
{
id: "node2",
offsetY: 140,
shape: { type: "Flow", shape: "Process" },
annotations: [
{
content: "var i = 0;"
}
]
},
{
id: "node3",
offsetY: 230,
shape: { type: "Flow", shape: "Decision" },
annotations: [
{
content: "i < 10?"
}
]
},
{
id: "node4",
offsetY: 320,
shape: { type: "Flow", shape: "PreDefinedProcess" },
annotations: [
{
content: 'print("Hello!!");'
}
]
},
{
id: "node5",
offsetY: 410,
shape: { type: "Flow", shape: "Process" },
annotations: [
{
content: "i++;"
}
]
},
{
id: "node6",
offsetY: 500,
shape: { type: "Flow", shape: "Terminator" },
annotations: [
{
content: "End"
}
]
}
];
const connectors: ConnectorModel[] = [
{
id: "connector1",
sourceID: "node1",
targetID: "node2"
},
{
id: "connector2",
sourceID: "node2",
targetID: "node3"
},
{
id: "connector3",
sourceID: "node3",
targetID: "node4",
annotations: [{ content: "Yes" }]
},
{
id: "connector4",
sourceID: "node3",
targetID: "node6",
annotations: [{ content: "No" }],
type: 'Orthogonal',
segments: [
{ type: 'Orthogonal', length: 50, direction: "Right" },
{ type: 'Orthogonal', length: 300, direction: "Bottom" }
]
},
{
id: "connector5",
sourceID: "node4",
targetID: "node5"
},
{
id: "connector6",
sourceID: "node5",
targetID: "node3",
type: 'Orthogonal',
segments: [
{ length: 50, type: 'Orthogonal',direction: "Left" },
{ length: 200, type: 'Orthogonal',direction: "Top" }
]
}
];
return (
<DiagramComponent
id="container"
width={"100%"}
height={"600px"}
nodes={nodes}
connectors={connectors}
getNodeDefaults={(node:NodeModel):NodeModel => {
node.height = 50;
node.width = 140;
if(node.id === "node1" || node.id === "node4"){
node.style = { fill: "#357BD2", strokeColor: "white" };
}else if(node.id === "node2" || node.id === "node5"){
node.style = { fill: "yellow", strokeColor: "white" };
}else if(node.id === "node3"){
node.style = { fill: "#00FF00", strokeColor: "white" };
}else if(node.id === "node6"){
node.style = { fill: "red", strokeColor: "white" };
}
node.offsetX = 300;
return node;
}}
getConnectorDefaults={(obj: ConnectorModel): ConnectorModel => {
obj.type = "Orthogonal";
obj.targetDecorator = { shape: 'Arrow', width: 10, height: 10 };
return obj;
}}
/>
);
}
const root = ReactDOM.createRoot(document.getElementById("diagram") as HTMLElement);
root.render(<App />);
<!DOCTYPE html>
<html lang="en">
<head>
<title>Syncfusion React Chart-DataLabel</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Essential JS 2 for React Components" />
<meta name="author" content="Syncfusion" />
<link href="index.css" rel="stylesheet">
<link href="//cdn.syncfusion.com/ej2/ej2-base/styles/material.css" rel="stylesheet">
<link href="//cdn.syncfusion.com/ej2/ej2-buttons/styles/material.css" rel="stylesheet">
<link href="//cdn.syncfusion.com/ej2/ej2-popups/styles/material.css" rel="stylesheet">
<link href="//cdn.syncfusion.com/ej2/ej2-splitbuttons/styles/material.css" rel="stylesheet">
<link href="//cdn.syncfusion.com/ej2/ej2-diagrams/styles/material.css" rel="stylesheet">
<link href="//cdn.syncfusion.com/ej2/ej2-navigations/styles/fabric.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<script src="systemjs.config.js"></script>
<style>
#loader {
color: #008cff;
height: 40px;
left: 45%;
position: absolute;
top: 45%;
width: 30%;
}
#diagram {
display: block;
}
</style>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
<div id='diagram'>
<div id='loader'>Loading....</div>
</div>
</body>
</html>
Default values for all nodes
and connectors
can be set using the getNodeDefaults
and getConnectorDefaults
properties, respectively. For example, if all nodes have the same width and height, such properties can be moved into getNodeDefaults
.
Automatic Organization Chart
In ‘Flow Diagram’ section we saw how to create a diagram manually, now let us see how to create and position diagram automatically.
Create Business object (Employee information)
Define Employee Information as JSON data. The following code example shows an employee array whose, Name
is used as an unique identifier and ReportingPerson
is used to identify the person to whom an employee report to, in the organization.
const data: Object[] = [
{
Name: "Elizabeth",
Role: "Director"
},
{
Name: "Christina",
ReportingPerson: "Elizabeth",
Role: "Manager"
},
{
Name: "Yoshi",
ReportingPerson: "Christina",
Role: "Lead"
},
{
Name: "Philip",
ReportingPerson: "Christina",
Role: "Lead"
},
{
Name: "Yang",
ReportingPerson: "Elizabeth",
Role: "Manager"
},
{
Name: "Roland",
ReportingPerson: "Yang",
Role: "Lead"
},
{
Name: "Yvonne",
ReportingPerson: "Yang",
Role: "Lead"
}
];
Map data source
You can configure the above “Employee Information” with diagram, so that the nodes and connectors are automatically generated using the mapping properties. The following code example demonstrates how to use dataSourceSettings
to map id
and parentId
with the corresponding property names of employee information.
export default function App() {
const data: Object[] = [
{
Name: "Elizabeth",
Role: "Director"
},
{
Name: "Christina",
ReportingPerson: "Elizabeth",
Role: "Manager"
},
{
Name: "Yoshi",
ReportingPerson: "Christina",
Role: "Lead"
},
{
Name: "Philip",
ReportingPerson: "Christina",
Role: "Lead"
},
{
Name: "Yang",
ReportingPerson: "Elizabeth",
Role: "Manager"
},
{
Name: "Roland",
ReportingPerson: "Yang",
Role: "Lead"
},
{
Name: "Yvonne",
ReportingPerson: "Yang",
Role: "Lead"
}
];
const dataSettings: object = {
id: "Name",
parentId: "ReportingPerson",
dataManager: new DataManager(data as JSON[])
}
return (
<DiagramComponent
id="container"
width={"100%"}
height={"350px"}
dataSourceSettings={dataSettings}
>
<Inject services={[HierarchicalTree, DataBinding]} />
</DiagramComponent>
);
}
const root = ReactDOM.createRoot(document.getElementById("diagram"));
root.render(<App />);
Rendering layout with Datasource
To create an organizational chart, the type
of layout should be set as an OrganizationalChart
. The following code example shows how DataManager is used to generate Layout based on the DataSourceSettings of the Diagram.
import * as React from "react";
import * as ReactDOM from "react-dom";
import { DiagramComponent } from "@syncfusion/ej2-react-diagrams";
import { HierarchicalTree, Inject, DataBinding } from "@syncfusion/ej2-react-diagrams";
import { DataManager } from "@syncfusion/ej2-data";
export default function App() {
const data = [
{
Name: "Elizabeth",
Role: "Director"
},
{
Name: "Christina",
ReportingPerson: "Elizabeth",
Role: "Manager"
},
{
Name: "Yoshi",
ReportingPerson: "Christina",
Role: "Lead"
},
{
Name: "Philip",
ReportingPerson: "Christina",
Role: "Lead"
},
{
Name: "Yang",
ReportingPerson: "Elizabeth",
Role: "Manager"
},
{
Name: "Roland",
ReportingPerson: "Yang",
Role: "Lead"
},
{
Name: "Yvonne",
ReportingPerson: "Yang",
Role: "Lead"
}
];
const dataSettings = {
id: "Name",
parentId: "ReportingPerson",
dataManager: new DataManager(data)
};
const layoutSetting = { type: "OrganizationalChart" };
return (<DiagramComponent id="container" width={"100%"} height={"350px"} dataSourceSettings={dataSettings} layout={layoutSetting} getNodeDefaults={(node) => {
let codes = {
Director: "rgb(0, 139,139)",
Manager: "rgb(30, 30,113)",
Lead: "rgb(0, 100,0)"
};
node.width = 70;
node.height = 30;
node.annotations = [
{ content: node.data.Name, style: { color: "white" } }
];
node.style.fill = codes[node.data.Role];
return node;
}} getConnectorDefaults={(connector) => {
connector.type = "Orthogonal";
connector.cornerRadius = 7;
return connector;
}}>
<Inject services={[HierarchicalTree, DataBinding]}/>
</DiagramComponent>);
}
const root = ReactDOM.createRoot(document.getElementById("diagram"));
root.render(<App />);
import * as React from "react";
import * as ReactDOM from "react-dom";
import { DiagramComponent } from "@syncfusion/ej2-react-diagrams";
import {
Node,
HierarchicalTree,
NodeModel,
ConnectorModel,
Inject,
DataBinding
} from "@syncfusion/ej2-react-diagrams";
import { DataManager } from "@syncfusion/ej2-data";
export interface EmployeeInfo {
Name: string;
Role: string;
color: string;
}
export default function App() {
const data: Object[] = [
{
Name: "Elizabeth",
Role: "Director"
},
{
Name: "Christina",
ReportingPerson: "Elizabeth",
Role: "Manager"
},
{
Name: "Yoshi",
ReportingPerson: "Christina",
Role: "Lead"
},
{
Name: "Philip",
ReportingPerson: "Christina",
Role: "Lead"
},
{
Name: "Yang",
ReportingPerson: "Elizabeth",
Role: "Manager"
},
{
Name: "Roland",
ReportingPerson: "Yang",
Role: "Lead"
},
{
Name: "Yvonne",
ReportingPerson: "Yang",
Role: "Lead"
}
];
const dataSettings: object = {
id: "Name",
parentId: "ReportingPerson",
dataManager: new DataManager(data as JSON[])
}
const layoutSetting: object= { type: "OrganizationalChart" }
return (
<DiagramComponent
id="container"
width={"100%"}
height={"350px"}
dataSourceSettings={dataSettings}
layout={layoutSetting}
getNodeDefaults={(node: NodeModel): NodeModel => {
let codes: { [key in EmployeeInfo["Role"]]: string } = {
Director: "rgb(0, 139,139)",
Manager: "rgb(30, 30,113)",
Lead: "rgb(0, 100,0)"
};
node.width = 70;
node.height = 30;
node.annotations = [
{ content: (node.data as EmployeeInfo).Name, style: { color: "white" } }
];
(node as Node).style.fill = codes[(node.data as EmployeeInfo).Role];
return node;
}}
getConnectorDefaults={(connector: ConnectorModel): ConnectorModel => {
connector.type = "Orthogonal";
connector.cornerRadius = 7;
return connector;
}}
>
<Inject services={[HierarchicalTree, DataBinding]} />
</DiagramComponent>
);
}
const root = ReactDOM.createRoot(document.getElementById("diagram") as HTMLElement);
root.render(<App />);
<!DOCTYPE html>
<html lang="en">
<head>
<title>Syncfusion React Chart-DataLabel</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Essential JS 2 for React Components" />
<meta name="author" content="Syncfusion" />
<link href="index.css" rel="stylesheet">
<link href="//cdn.syncfusion.com/ej2/ej2-base/styles/material.css" rel="stylesheet">
<link href="//cdn.syncfusion.com/ej2/ej2-buttons/styles/material.css" rel="stylesheet">
<link href="//cdn.syncfusion.com/ej2/ej2-popups/styles/material.css" rel="stylesheet">
<link href="//cdn.syncfusion.com/ej2/ej2-splitbuttons/styles/material.css" rel="stylesheet">
<link href="//cdn.syncfusion.com/ej2/ej2-diagrams/styles/material.css" rel="stylesheet">
<link href="//cdn.syncfusion.com/ej2/ej2-navigations/styles/fabric.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<script src="systemjs.config.js"></script>
<style>
#loader {
color: #008cff;
height: 40px;
left: 45%;
position: absolute;
top: 45%;
width: 30%;
}
#diagram {
display: block;
}
</style>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
<div id='diagram'>
<div id='loader'>Loading....</div>
</div>
</body>
</html>
Customize employee appearance
The following code examples indicate how to define the default appearance of nodes and connectors. The setNodeTemplate
is used to update each node based on employee data.
import * as React from "react";
import * as ReactDOM from "react-dom";
import { DiagramComponent } from "@syncfusion/ej2-react-diagrams";
import { HierarchicalTree, Inject, DataBinding,StackPanel,TextElement,ImageElement } from "@syncfusion/ej2-react-diagrams";
import { DataManager } from "@syncfusion/ej2-data";
export default function App() {
const data = [
{
Name: "Elizabeth",
Role: "Director"
},
{
Name: "Christina",
ReportingPerson: "Elizabeth",
Role: "Manager"
},
{
Name: "Yoshi",
ReportingPerson: "Christina",
Role: "Lead"
},
{
Name: "Philip",
ReportingPerson: "Christina",
Role: "Lead"
},
{
Name: "Yang",
ReportingPerson: "Elizabeth",
Role: "Manager"
},
{
Name: "Roland",
ReportingPerson: "Yang",
Role: "Lead"
},
{
Name: "Yvonne",
ReportingPerson: "Yang",
Role: "Lead"
}
];
const dataSettings = {
id: "Name",
parentId: "ReportingPerson",
dataManager: new DataManager(data)
};
const layoutSetting = { type: "OrganizationalChart" };
return (<DiagramComponent id="container" width={"100%"} height={"350px"} dataSourceSettings={dataSettings} layout={layoutSetting} getNodeDefaults={(node) => {
node.width = 70;
node.height = 30;
return node;
}} getConnectorDefaults={(connector) => {
connector.type = "Orthogonal";
connector.cornerRadius = 7;
return connector;
}}
setNodeTemplate={(node)=>{
let codes = {
Director: "rgb(0, 139,139)",
Manager: "rgb(30, 30,113)",
Lead: "rgb(0, 100,0)"
};
let content = new StackPanel();
content.id = node.id + "_outerstack";
content.orientation = "Horizontal";
content.style.strokeColor = "gray";
content.style.fill = codes[(node.data).Role];
content.padding = { left: 5, right: 5, top: 5, bottom: 5}
let innerContent = new ImageElement();
innerContent.style.strokeColor = "blue";
innerContent.id = node.id + "_innerstack";
innerContent.style.fill = "skyblue";
innerContent.width = 50;
innerContent.height = 50;
let text = new TextElement();
text.id = node.id + "_text";
text.content = (node.data).Name;
text.margin = { left: 15, right: 5, top: 5, bottom: 5}
text.style.color = "black";
content.children = [innerContent, text];
return content;
}}>
<Inject services={[HierarchicalTree, DataBinding]}/>
</DiagramComponent>);
}
const root = ReactDOM.createRoot(document.getElementById("diagram"));
root.render(<App />);
import * as React from "react";
import * as ReactDOM from "react-dom";
import { DiagramComponent, ImageElement, StackPanel, TextElement } from "@syncfusion/ej2-react-diagrams";
import {
HierarchicalTree,
NodeModel,
ConnectorModel,
Inject,
DataBinding
} from "@syncfusion/ej2-react-diagrams";
import { DataManager } from "@syncfusion/ej2-data";
export interface EmployeeInfo {
Name: string;
Role: string;
color: string;
}
export default function App() {
const data: Object[] = [
{
Name: "Elizabeth",
Role: "Director"
},
{
Name: "Christina",
ReportingPerson: "Elizabeth",
Role: "Manager"
},
{
Name: "Yoshi",
ReportingPerson: "Christina",
Role: "Lead"
},
{
Name: "Philip",
ReportingPerson: "Christina",
Role: "Lead"
},
{
Name: "Yang",
ReportingPerson: "Elizabeth",
Role: "Manager"
},
{
Name: "Roland",
ReportingPerson: "Yang",
Role: "Lead"
},
{
Name: "Yvonne",
ReportingPerson: "Yang",
Role: "Lead"
}
];
const dataSettings: object = {
id: "Name",
parentId: "ReportingPerson",
dataManager: new DataManager(data as JSON[])
}
const layoutSetting: object= { type: "OrganizationalChart" }
return (
<DiagramComponent
id="container"
width={"100%"}
height={"350px"}
dataSourceSettings={dataSettings}
layout={layoutSetting}
getNodeDefaults={(node: NodeModel): NodeModel => {
node.width = 70;
node.height = 30;
return node;
}}
getConnectorDefaults={(connector: ConnectorModel): ConnectorModel => {
connector.type = "Orthogonal";
connector.cornerRadius = 7;
return connector;
}}
setNodeTemplate={(node: NodeModel) => {
let codes: Object = {
Director: "rgb(0, 139,139)",
Manager: "rgb(30, 30,113)",
Lead: "rgb(0, 100,0)"
};
let content = new StackPanel();
content.id = node.id + "_outerstack";
content.orientation = "Horizontal";
content.style.strokeColor = "gray";
content.style.fill = (codes as any)[(node.data as EmployeeInfo).Role] as string;
content.padding = { left: 5, right: 5, top: 5, bottom: 5}
let innerContent = new ImageElement();
innerContent.style.strokeColor = "blue";
innerContent.id = node.id + "_innerstack";
innerContent.style.fill = "skyblue";
innerContent.width = 50;
innerContent.height = 50;
let text = new TextElement();
text.id = node.id + "_text";
text.content = (node.data as EmployeeInfo).Name;
text.margin = { left: 15, right: 5, top: 5, bottom: 5}
text.style.color = "black";
content.children = [innerContent, text];
return content;
}}
>
<Inject services={[HierarchicalTree, DataBinding]} />
</DiagramComponent>
);
}
const root = ReactDOM.createRoot(document.getElementById("diagram") as HTMLElement);
root.render(<App />);
<!DOCTYPE html>
<html lang="en">
<head>
<title>Syncfusion React Chart-DataLabel</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Essential JS 2 for React Components" />
<meta name="author" content="Syncfusion" />
<link href="index.css" rel="stylesheet">
<link href="//cdn.syncfusion.com/ej2/ej2-base/styles/material.css" rel="stylesheet">
<link href="//cdn.syncfusion.com/ej2/ej2-buttons/styles/material.css" rel="stylesheet">
<link href="//cdn.syncfusion.com/ej2/ej2-popups/styles/material.css" rel="stylesheet">
<link href="//cdn.syncfusion.com/ej2/ej2-splitbuttons/styles/material.css" rel="stylesheet">
<link href="//cdn.syncfusion.com/ej2/ej2-diagrams/styles/material.css" rel="stylesheet">
<link href="//cdn.syncfusion.com/ej2/ej2-navigations/styles/fabric.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<script src="systemjs.config.js"></script>
<style>
#loader {
color: #008cff;
height: 40px;
left: 45%;
position: absolute;
top: 45%;
width: 30%;
}
#diagram {
display: block;
}
</style>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
<div id='diagram'>
<div id='loader'>Loading....</div>
</div>
</body>
</html>
NOTE
You can refer to our React Diagram feature tour page for its groundbreaking feature representations. You can also explore our React Diagram example that shows how to render the Diagram in React.