# Hierarchical Data FlexDiagram
## Content
**Data-bound** diagrams that use hierarchical data allow **FlexDiagram** to automatically generate diagrams based on hierarchical structures. Each object in the data source contains one or more child objects. **FlexDiagram** uses these relationships to build a visual hierarchy. This method is effective for representing organizational charts, category hierarchies, and other nested structures.
### Create Hierarchical Data **Flex**Diagram
1. Define data model by creating a class that represents the hierarchical structure:
```csharp
public class DataItem
{
public string Name { get; set; }
public DataItem[] Childs { get; set; }
}
```
Define the data model by creating a class that represents the hierarchical structure.
2. Create a data source based on that structure.
```csharp
var dataSource = CreateHierarchicalData();
```
3. Bind the data to the diagram.
```csharp
diagram.DataSource = dataSource;
diagram.Binding = "Type";
diagram.ChildItemsPath = "Items";
```
#### **Hierarchical FlexDiagram Sample**
```csharp
using C1.Diagram;
using C1.Win.Diagram;
namespace FlexDiagramPoC
{
public partial class Form1 : Form
{
public Form1()
{
InitializeComponent();
InitializeDiagram();
}
private void InitializeDiagram()
{
// Create FlexDiagram instance
var diagram = new FlexDiagram();
diagram.Dock = DockStyle.Fill;
this.Controls.Add(diagram);
diagram.Direction = DiagramDirection.LeftRight;
var dataSource = CreateHierarchicalData();
diagram.DataSource = dataSource;
diagram.Binding = "Type";
diagram.ChildItemsPath = "Items";
}
public class SalesDataItem
{
public string? Type { get; set; }
public double Sales { get; set; }
public SalesDataItem[]? Items { get; set; }
}
public SalesDataItem[] CreateHierarchicalData()
{
var data = new SalesDataItem[]
{
new SalesDataItem
{
Type = "Electronics",
Items = new SalesDataItem[]
{
new SalesDataItem
{
Type = "Camera",
Items = new SalesDataItem[]
{
new SalesDataItem { Type = "Digital", Sales = 45 },
new SalesDataItem { Type = "Film", Sales = 23 }
}
},
new SalesDataItem
{
Type = "Headphones",
Items = new SalesDataItem[]
{
new SalesDataItem { Type = "Earbud", Sales = 67 },
new SalesDataItem { Type = "Over-ear", Sales = 89 },
new SalesDataItem { Type = "On-ear", Sales = 34 }
}
}
}
},
new SalesDataItem
{
Type = "Computers & Tablets",
Items = new SalesDataItem[]
{
new SalesDataItem
{
Type = "Desktops",
Items = new SalesDataItem[]
{
new SalesDataItem { Type = "All-in-ones", Sales = 56 },
new SalesDataItem { Type = "Minis", Sales = 42 }
}
},
new SalesDataItem
{
Type = "Laptops",
Items = new SalesDataItem[]
{
new SalesDataItem { Type = "2 in 1", Sales = 78 },
new SalesDataItem { Type = "Traditional", Sales = 91 }
}
}
}
}
};
return data;
}
}
}
```