# 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/js/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.jsx

```jsx
import { HierarchicalTree, DataBinding, DiagramComponent, 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' }
];

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, data) => {
                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, 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, 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 default LocalData;
```