Decomposition
A Decomposition Tree Chart is a powerful visualization tool for analyzing data across multiple dimensions. It allows users to drill down into hierarchical structures, split core metrics, and identify the key factors driving those metrics.
With AI assistance, the decomposition tree can even suggest the next best dimension to explore based on predefined criteria, helping uncover insights that may not be obvious at first glance.
Best Situations to Use
Use a Decomposition Tree chart when you want to:
Analyze time series datasets with clear trends and seasonality by breaking them into components.
Identify underlying trends and seasonal effects in business data.
Explore hierarchical relationships (e.g., Country → State → City).
Forecast and plan effectively, such as helping a retailer predict sales and optimize inventory and marketing.
Example: A retailer can use a decomposition tree to forecast product sales, identify which regions or categories contribute most, and adjust inventory or promotional strategies accordingly.
Steps to Configure
Drag and drop the Decomposition Tree chart from the component library onto the canvas.
Associate a dataset.
Example: Use Population as the Series field, and Country, State, City as hierarchy categories.
Preview the chart to see hierarchical drill-down.
Clicking a node expands its children.
Closing a node collapses its hierarchy.
Properties of the Decomposition Tree Chart
General
Component Name: Unique identifier (auto-generated or user-defined).
Left / Top: Position on the dashboard.
Height / Width: Adjust dimensions.
Initial Visibility: Toggle visibility on initial load.
Max Button: Enable maximize functionality.
Enable Context Levels: Allow deeper drill-down into hierarchies.
Show Percentage: Display percentages along with numerical values.
Aggregation Type: Choose aggregation (Sum, Average, Percentage, Count).
Maximum Nodes: Limit nodes per hierarchy (extra nodes grouped as “Others”).
Animation: Enable animated transitions for drill-downs.
Background
Gradient Rotation: Adjust background gradient angle.
Opacity: Control background transparency.
Gradient: Apply multi-color gradient fills.
Border / Border Color / Radius: Configure border style and curvature.
Shadow / Color / Transparency: Add shadow depth.
Node Style
Node Height: Set node vertical size.
Node Color / Fill Color: Customize node background.
Stroke Color: Define node border color.
Label Font: Customize node label text (color, size, style, weight, family).
Label Value Font: Configure numeric value text styling.
Tooltip
Show Tooltip: Enable/disable tooltips.
Customization:
Background Color, Opacity, Border Color.
Font Size, Box Width.
Precision for numeric display.
Highlighter to emphasize nodes.
Title & Subtitle
Show Title Box / Show Title: Toggle title box and text.
Title Customization: Font color, size, style, weight, family, alignment, decoration.
Title Bar Height: Adjust height.
Description: Add supporting text.
Dataset Description: Populate title dynamically from dataset.
Subtitle: Configure font color, size, weight, family, alignment, decoration.
Formatter
Unit: Define measurement unit (e.g., %, $, kg).
Precision: Decimal places for numeric display.
Currency: Apply currency formatting.
Position: Place unit/currency before or after value.
Number Formatter: Select Indian or International formatting.
Additional Features
Conditional Colors: Assign colors based on values using the Indicators tab.
Closing Hierarchy: Collapse specific hierarchy levels when Context Levels are enabled.
Loader: Displays while nodes are expanding.
Example
Using the sample dataset:
Series: Population
Categories: Country → State → City
The chart displays total population by country, with drill-down into state and city. Nodes can be limited (e.g., top 3 values shown, others grouped as “Others”), percentages displayed, and conditional colors applied for deeper insights.