# Decomposition

The decomposition tree provides a powerful tool for visualizing data across various dimensions. It allows us to conduct a detailed analysis of data by drilling down into the hierarchical structure. It splits core metrics and identifies key factors that affect these metrics. With the help of artificial intelligence (AI), the decomposition tree can even help identify the next dimension of data to explore based on predefined criteria.

## Best Situations to Use a Decomposition chart

* When the user has a time series data set with a clear trend and seasonality patterns. A decomposition tree chart can help to break down the time series into its components and make it easier to analyze.
* To identify underlying trends and seasonality in your business data.
  * E.g., a Decomposition chart can help a retailer to accurately forecast sales for a particular product and adjust inventory and marketing strategies accordingly.

## Steps to configure Decomposition Chart <a href="#toc851682415" id="toc851682415"></a>

* Drag and drop the decomposition chart from the component library. The chart looks as given in the below image on the Designer canvas page:

<figure><img src="/files/rguuBFyjeEapF9wlj8li" alt=""><figcaption></figcaption></figure>

* Associate a valid dataset. The **sample Dataset used to generate a model chart** is given-below:    &#x20;
* Consider the ***Series*** field as ***Population*** and visualize population data as per various categories such as ***Country***, ***State***, and ***City*** in a hierarchical order.

<figure><img src="/files/5FO8OZGdObTEYRkaaPB0" alt=""><figcaption></figcaption></figure>

* The total population per country, state, and city is displayed in each node while opening the Preview of the Dashboard.
  * While clicking on one node, other nodes of the particular hierarchy get closed, and all the sub-categories/ children nodes get displayed. E.g., the sub-categories of the USA are displayed in the below-given image:

<figure><img src="/files/Af3YgkesG9PJTDGREVR6" alt=""><figcaption></figcaption></figure>

## **Properties of the Decomposition chart**

### **General Property**

Users can change the height, width, top, and left. If initial visibility is unchecked, then the component won’t be visible at the first preview. Users can manage the max button to minimize and maximize the chart.

<figure><img src="/files/lokR6Ji2uJQMdXxlJ5wV" alt=""><figcaption></figcaption></figure>

Use a checkmark for the **Enable Context Levels** property field. Users can select the next hierarchy levels as per requirement.

<figure><img src="/files/ubFHpxGACN2YovPpWRbp" alt=""><figcaption><p>Enabling Context Level using the General Properties fields</p></figcaption></figure>

Use a right-click on the node to select the next level.

<figure><img src="/files/5TKWhb8PjtSlamVnP72e" alt=""><figcaption><p>The Parent Node will display the children nodes by using the right click on it</p></figcaption></figure>

<figure><img src="/files/VkKFnXyZjHQw0YHA1obQ" alt=""><figcaption><p>The user can use the Right-click at each level to open the sub-nodes</p></figcaption></figure>

Use a checkmark for the **Enable show percentage** property field. Users can identify the Node percentage. <br>

<figure><img src="/files/rSJb2szpHEDkdbPNd8aW" alt=""><figcaption></figcaption></figure>

### Aggregation Type

The **Aggregation type** property displays the value of the node based on the selected aggregation.

* When the selected aggregation type is **sum.**

<figure><img src="/files/AEe04jS8TgSW5I2yeZLm" alt=""><figcaption></figcaption></figure>

* When the selected aggregation type is **Mean.**

<figure><img src="/files/TNUmIRtKiucR9gMUAZ5X" alt=""><figcaption></figcaption></figure>

* When the selected aggregation type is **Percentage.**

<figure><img src="/files/dPsxCb8XmVmIm5U2UBHx" alt=""><figcaption></figcaption></figure>

* When the selected aggregation type is **Count.**

<figure><img src="/files/39poXisQYT0RBSq48Q5p" alt=""><figcaption></figcaption></figure>

#### Maximum Nodes

Another property called **Maximum Nodes** has been provided to control the number of nodes in each hierarchy.

* The set value for the Maximum Node field is 10 so if a particular node contains more than 10 children nodes, only 9 children nodes with comparatively more values get displayed as visible nodes, and the remaining children nodes with less value are shown as **others**.

&#x20;    ![](/files/kwDEtNafiMHbyJYRHqtT)

E.g., In the given Decomposition chart the Maximum Nodes are set as 3

<figure><img src="/files/69w41C5woX0jSXUSEnC0" alt=""><figcaption></figcaption></figure>

The number of Maximum Nodes gets limited to 3 and the nodes with less values get clubbed as **Others** as displayed in the below-given image:

<figure><img src="/files/HDTYQNrkG0LtoSJ6I5c5" alt=""><figcaption></figcaption></figure>

### **Background Property**

Provide the following Background Properties for the Decomposition chart:

* Gradient Rotation
* Opacity
* Gradient
* Border
* Border Color
* Border Radius
* Shadow&#x20;
* Shadow Color
* Shadow Transparency

![](/files/gfJ3sRveyvGSFiHY7F43)

### **Node Style**

Provide ***Node Style*** for styling the nodes and their default values.

* Node Height: Set the height of nodes.
* Node Color: Set the background color of the node.
* Fill Color: Control node fill color
* Stroke Color: Set the Border color of the node.
* Label Font Color: Select a color for the Fonts.
* Label Font Size: Set the Font Size.
* Label Font Style: Select an option out of the given choices from the drop-down menu.
* Label Font Weight: Select an option out of the given choices from the drop-down menu.
* Label Font Family: Select a Font Family type using the drop-down menu.
* Control Node Label font properties.

![](/files/TsqFuFHT11TLBL34dWuW)

The following image displays a customized Decomposition chart.

<figure><img src="/files/BfoECwelJVTdZCGI27iW" alt=""><figcaption></figcaption></figure>

### ToolTip

Provided **Tooltip** property in the property section.

![](/files/chbE1gfVHtQsSP8YbCAS)

The Tooltip appears for the chart as shown below:

<figure><img src="/files/N3m7odp0XIwxhEg134eb" alt=""><figcaption></figcaption></figure>

### Formatter

Use the **Formatter** property fields to format the default Decomposition

![](/files/42eg7F6akP6gJmyZxm2q)

The default chart gets formatted as shown below:

<figure><img src="/files/CL5FfJSOhxwouW38yy2Z" alt=""><figcaption><p><em><strong>Default Format</strong></em></p></figcaption></figure>

Provided **Indicators**  Conditional color based on series values(series field indicator).

<figure><img src="/files/2erSjXDKPJExgALLr4pa" alt=""><figcaption></figcaption></figure>

## Closing Hierarchy

* Provide an option to close particular hierarchy from header when the ***Context Level*** is enabled.

<figure><img src="/files/qQvz3ZK3ONSiiMnJuWhk" alt=""><figcaption></figcaption></figure>

* The selected hierarchy gets closed.&#x20;

<figure><img src="/files/mdfAn0MoQZpdjpCrUZUy" alt=""><figcaption></figcaption></figure>

The Decomposition chart can highlight the selected node of each hierarchy and display the selected node name below the hierarchy text.

<figure><img src="/files/EmEvSJgVUPbXNec7SXw8" alt=""><figcaption></figcaption></figure>

The user gets a loader while expanding the more nodes for a category.&#x20;

{% hint style="success" %}
*Check out the given illustration on how a loader appears in the preview of the Decomposition chart.*
{% endhint %}

{% embed url="<https://files.gitbook.com/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F5aLubSHNOzBzWIIdbNGx%2Fuploads%2FBS9EegWimAyZuXab6Tbk%2FLoader%20in%20the%20Decomposition%20chart.mp4?alt=media&token=5a68e4f0-b25f-42eb-87fe-7c5b7bd5d877>" %}
Loader while expanding nodes for a specific category&#x20;
{% endembed %}

## Sample Data&#x20;

Download the given sample data and map it as mentioned below to plot your ***Decomposition*** chart.

Select the ***Population***  column as ***Series***, and the other columns as ***Category.***

{% file src="/files/iQaoj28wVca97omrt9OA" %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.bdb.ai/governed-dashboards-5/charts-gallery/advanced-charts/decomposition.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.