# diagram-local-data

> Diagram renders a species hierarchy from local data with a hierarchical tree layout.

**Framework:** react  **Component:** Diagram  **Variant:** local-data

## Get this item

**If you are an agent, fetch the JSON.** Source is inlined, so one request is enough and no tooling is required:

```
GET https://ai.syncfusion.com/r/react/ts/diagram-local-data.json
```

**Install Package(s)**

```bash
npm install @syncfusion/ej2-react-diagrams @syncfusion/ej2-data
```

**Notes**

- Syncfusion release: 2026 Volume 2 (v34.1.29)
- The Syncfusion package is licensed. The composition in this file is source you own and edit. See https://ai.syncfusion.com/licensing.md

## Source files

### src/components/diagram-local-data/Diagram.tsx

```tsx
import {
  Node,
  HierarchicalTree,
  DataBinding,
  DiagramComponent,
  Diagram,
  type NodeModel,
  type ConnectorModel,
  Inject,
  DiagramTools
} from "@syncfusion/ej2-react-diagrams";
import { DataManager } from "@syncfusion/ej2-data";

let species = [
    { 'Name': 'Species', 'fillColor': '#3DD94A' },
    { 'Name': 'Plants', 'Category': 'Species' },
    { 'Name': 'Fungi', 'Category': 'Species' },
    { 'Name': 'Lichens', 'Category': 'Species' },
    { 'Name': 'Animals', 'Category': 'Species' },
    { 'Name': 'Mosses', 'Category': 'Plants' },
    { 'Name': 'Ferns', 'Category': 'Plants' },
    { 'Name': 'Gymnosperms', 'Category': 'Plants' },
    { 'Name': 'Dicotyledens', 'Category': 'Plants' },
    { 'Name': 'Monocotyledens', 'Category': 'Plants' },
    { 'Name': 'Invertebrates', 'Category': 'Animals' },
    { 'Name': 'Vertebrates', 'Category': 'Animals' },
    { 'Name': 'Insects', 'Category': 'Invertebrates' },
    { 'Name': 'Molluscs', 'Category': 'Invertebrates' },
    { 'Name': 'Crustaceans', 'Category': 'Invertebrates' },
    { 'Name': 'Others', 'Category': 'Invertebrates' },
    { 'Name': 'Fish', 'Category': 'Vertebrates' },
    { 'Name': 'Amphibians', 'Category': 'Vertebrates' },
    { 'Name': 'Reptiles', 'Category': 'Vertebrates' },
    { 'Name': 'Birds', 'Category': 'Vertebrates' },
    { 'Name': 'Mammals', 'Category': 'Vertebrates' }
];

export interface DataInfo {
  [key: string]: string;
}

function LocalData() {
  return (
    <div className="control-pane">
      <div
        className="control-section"
      >
        <div  style={{ width: "100%" }}>
          <DiagramComponent
            id="diagram"
            width={"100%"}
            height={"350px"}
            //Configures data source
            dataSourceSettings={{
              id: "Name",
              parentId: "Category",
              dataSource: new DataManager(species),
              //binds the external data with node
              doBinding: (
                nodeModel: NodeModel,
                data: DataInfo,
              ) => {
                nodeModel.annotations = [
                  {
                    /* tslint:disable:no-string-literal */
                    content: data["Name"],
                    style: { color: "black" }
                  }
                ];
                /* tslint:disable:no-string-literal */
                nodeModel.style = {
                  fill: "#ffeec7",
                  strokeColor: "#f5d897",
                  strokeWidth: 1
                };
              }
            }}
            //Configrues organizational chart layout
            layout={{
              type: "HierarchicalTree",
              horizontalSpacing: 15,
              verticalSpacing: 50,
              margin: { top: 10, left: 10, right: 10, bottom: 0 }
            }}
            //Sets the default values of nodes
            getNodeDefaults={(obj: Node, diagram: Diagram) => {
              //Initialize shape
              obj.shape = { type: "Basic", shape: "Rectangle" };
              obj.style = { strokeWidth: 1 };
              obj.width = 95;
              obj.height = 30;
            }}
            //Sets the default values of connector
            getConnectorDefaults={(
              connector: ConnectorModel,
              diagram: Diagram
            ) => {
              connector.type = "Orthogonal";
              connector.style.strokeColor = "#4d4d4d";
              connector.targetDecorator.shape = "None";
            }}
            //Disables all interactions except zoom/pan
            tool={DiagramTools.ZoomPan}
            snapSettings={{ constraints: 0 }}
          >
            <Inject services={[DataBinding, HierarchicalTree]} />
          </DiagramComponent>
        </div>
      </div>
    </div>
  );
}

export interface EmployeeInfo {
  Role: string;
  color: string;
}
export default LocalData;
```