---
title: "Decomposition Tree"
description: "Visualizes hierarchical data across multiple levels with proportional bars and curved connectors."
group: Charts
tags: [Visualization, Chart, Dashboard, Insights, Hierarchy, Tree]
-------------------------------------------------------------------
import { Aside, Steps } from '@astrojs/starlight/components';
# Decomposition Tree
The **Decomposition Tree Chart** displays quantitative **values** distributed across **nested hierarchical levels**. Each node is rendered as a horizontal bar whose length represents its numeric measure, while smooth Bézier curves connect parent and child nodes to emphasise structural relationships.
Unlike radial or collapsible trees that focus primarily on topology, Decomposition Trees highlight **value magnitude** at every level, enabling rapid comparison of sibling nodes and the cumulative contribution of each branch.
**Use cases:**
* Organisational structures showing team sizes by division, department, and squad
* Geographic breakdowns such as **Country → State → City** populations
* Product category hierarchies with sales volumes across multiple levels
* Any multi‑tier taxonomy requiring side‑by‑side value comparison
---
## ⚙️ Setup
1. Drag the **Decomposition Tree Chart** widget from the chart library onto your designer workspace.
2. Select the chart.
3. Go to the [Widget Configuration](/insights-v8/guide-to-infoboard-designer/customize-panel/configure/) tab in the Customize panel.
4. Under the Configuration tab, select the [Basic Configuration](/insights-v8/guide-to-infoboard-designer/customize-panel/configure/#basic) option to access the essential settings for the decomposition tree chart.
5. Select the [Source](/insights-v8/guide-to-infoboard-designer/customize-panel/setup/#sources) which the chart will pull data from.
6. Map:
- **[Measure (Value)](/studio-v8/datasources/measures-dimensions-and-hierarchies/)** — Numeric field sizing each node’s bar.
- **[Dimension Labels](/studio-v8/datasources/measures-dimensions-and-hierarchies/)** — One or more categorical fields (up to 10) that define hierarchy levels.
---
## 📊 Basic Configuration
| Configuration Item | Description |
|:---------------------|:-------------|
| **[Source](/insights-v8/guide-to-infoboard-designer/customize-panel/setup/#sources)** | Data source containing hierarchical records. |
| **[Measure (Value)](/studio-v8/datasources/measures-dimensions-and-hierarchies/)** | Numeric field that determines bar length for each node. |
| **[Dimension Labels](/studio-v8/datasources/measures-dimensions-and-hierarchies/)** | One or more categorical fields defining hierarchy levels. |
| **Date Field** (optional) | Date dimension for time-series snapshots. |
---
## 🎨 Chart Customizations
| Category | Options & Description |
| :------------------------------------------------------------------------------------------------------------- | :---------------------------------------------------------------------------------------------------------------------------------- |
| **[General](/insights-v8/guide-to-infoboard-designer/customize-panel/customization-tab/#general)** | Configure theme, background colour, borders, and drill-down behaviour. |
| **[Title](/insights-v8/guide-to-infoboard-designer/customize-panel/customization-tab/#title)** | Enable and customise chart title text, alignment, font, and colour. |
| **[Series](/insights-v8/guide-to-infoboard-designer/customize-panel/customization-tab/#series-customization)** | Customise node colours, enable per‑level colour, control label display, orientation, and positioning. |
| **[Tooltip](/insights-v8/guide-to-infoboard-designer/customize-panel/customization-tab/#tooltip)** | Control tooltip content, formatting, and visibility on hover. |
| **Others** | Layout parameters such as **Max Bar Width/Height**, **Column Gap**, and **Link Style** (colour, width, dash type, shadow, opacity). |
---
## 📊 Example Visualization
