syncfusion-angular-treemap

어떤 스킬인가요?

Create and customize Syncfusion Angular TreeMap components for hierarchical data visualization. Use this skill when you need to implement a TreeMap, visualize hierarchical data structures, configure multi-level layouts, apply color mapping, enable drilldown navigation, add labels and tooltips, configure legends, handle selection and highlight, export to images or PDF, print, or customize internationalization and accessibility. Covers installation, data binding, layout types, levels, color mapping, labels, tooltips, legends, drilldown, interactivity, print/export, RTL, locale formatting, and accessibility.

설치 방법

프로젝트 폴더에서 아래 명령어를 실행하고, 설치할 에이전트를 선택하세요.

설치 명령을 직접 실행해야 적용됩니다. 지원 에이전트와 필요한 권한·라이선스는 제작자의 안내를 확인하세요.

스킬 원문 파일

# TreeMap API Reference

Base URL: [Link](https://ej2.syncfusion.com/angular/documentation/api/treemap/)

Complete API reference for the **Syncfusion Angular TreeMap** component.

**Component:** Syncfusion Angular TreeMap  
**Selector:** `ejs-treemap`  
**Package:** `@syncfusion/ej2-angular-treemap`

> **Default value rule used below**
> - If the API explicitly provides a default value, it is shown exactly.
> - If the API does **not** explicitly provide a default value, the default is shown as `-`.

---

## Table of Contents

- [TreeMapComponent Class](#treemapcomponent-class)
- [TreeMapComponent Properties](#treemapcomponent-properties)
- [Nested Model Classes](#nested-model-classes)
  - [LevelSettingsModel Class](#levelsettingsmodel-class)
  - [LeafItemSettingsModel Class](#leafitemsettingsmodel-class)
  - [LegendSettingsModel Class](#legendsettingsmodel-class)
  - [TooltipSettingsModel Class](#tooltipsettingsmodel-class)
  - [SelectionSettingsModel Class](#selectionsettingsmodel-class)
  - [HighlightSettingsModel Class](#highlightsettingsmodel-class)
  - [ColorMappingModel Class](#colormappingmodel-class)
  - [CommonTitleSettingsModel Class](#commontitlesettingsmodel-class)
  - [TitleSettingsModel Class](#titlesettingsmodel-class)
  - [SubTitleSettingsModel Class](#subtitlesettingsmodel-class)
  - [InitialDrillSettingsModel Class](#initialdrillsettingsmodel-class)
  - [TreeMapAjax Class](#treemapajax-class)
- [Support Types](#support-types)
  - [BorderModel Class](#bordermodel-class)
  - [FontModel Class](#fontmodel-class)
  - [MarginModel Class](#marginmodel-class)
  - [Location Class](#location-class)
- [Methods](#methods)
  - [TreeMapComponent Methods](#treemapcomponent-methods)
- [Events](#events)
  - [TreeMapComponent Events](#treemapcomponent-events)
  - [Event Args Interfaces](#event-args-interfaces)
- [Enumerations](#enumerations)
  - [Alignment](#alignment)
  - [ExportType](#exporttype)
  - [LayoutMode](#layoutmode)
  - [SelectionMode](#selectionmode)
  - [LegendPosition](#legendposition)
  - [LabelPlacement](#labelplacement)
  - [TreeMapTheme](#treemaptheme)
  - [Other Enum Pages](#other-enum-pages)
- [Angular Directive Pages](#angular-directive-pages)
- [Standalone API Item Pages](#standalone-api-item-pages)

---

## TreeMapComponent Class

**Class:** `TreeMapComponent`  
**Selector:** `ejs-treemap`  
**Package:** `@syncfusion/ej2-angular-treemap`

Represents the Angular TreeMap component used to visualize both hierarchical and flat data using nested rectangles.

**Class page:**  
[Link](https://ej2.syncfusion.com/angular/documentation/api/treemap/)

---

## TreeMapComponent Properties

| Name | Type | Default | Description | Direct Link |
|------|------|---------|-------------|-------------|
| `allowImageExport` | `boolean` | `false` | Enables or disables image export for the TreeMap. | [Link](https://ej2.syncfusion.com/angular/documentation/api/treemap/#allowimageexport) |
| `allowPdfExport` | `boolean` | `false` | Enables or disables PDF export for the TreeMap. | [Link](https://ej2.syncfusion.com/angular/documentation/api/treemap/#allowpdfexport) |
| `allowPrint` | `boolean` | `false` | Enables or disables printing support for the TreeMap. | [Link](https://ej2.syncfusion.com/angular/documentation/api/treemap/#allowprint) |
| `background` | `string` | `null` | Sets the background color of the TreeMap. | [Link](https://ej2.syncfusion.com/angular/documentation/api/treemap/#background) |
| `border` | `BorderModel` | `-` | Configures the border color and width of the TreeMap container. | [Link](https://ej2.syncfusion.com/angular/documentation/api/treemap/#border) |
| `breadcrumbConnector` | `string` | `' - '` | Specifies the connector text shown in the header when drill-down is enabled. | [Link](https://ej2.syncfusion.com/angular/documentation/api/treemap/#breadcrumbconnector) |
| `colorValuePath` | `string` | `null` | Specifies the data field used to assign item colors directly. | [Link](https://ej2.syncfusion.com/angular/documentation/api/treemap/#colorvaluepath) |
| `dataSource` | `Object[] \| DataManager \| TreeMapAjax` | `null` | Defines the data source for the TreeMap. | [Link](https://ej2.syncfusion.com/angular/documentation/api/treemap/#datasource) |
| `description` | `string` | `null` | Provides accessibility description text for the TreeMap. | [Link](https://ej2.syncfusion.com/angular/documentation/api/treemap/#description) |
| `drillDownView` | `boolean` | `false` | Enables or disables the initial drill-down view. | [Link](https://ej2.syncfusion.com/angular/documentation/api/treemap/#drilldownview) |
| `enableBreadcrumb` | `boolean` | `false` | Enables or disables breadcrumb text in the header during drill-down. | [Link](https://ej2.syncfusion.com/angular/documentation/api/treemap/#enablebreadcrumb) |
| `enableDrillDown` | `boolean` | `false` | Enables or disables drill-down functionality. | [Link](https://ej2.syncfusion.com/angular/documentation/api/treemap/#enabledrilldown) |
| `enableHtmlSanitizer` | `boolean` | `false` | Sanitizes untrusted HTML values before rendering. | [Link](https://ej2.syncfusion.com/angular/documentation/api/treemap/#enablehtmlsanitizer) |
| `enablePersistence` | `boolean` | `false` | Enables or disables state persistence across page reloads. | [Link](https://ej2.syncfusion.com/angular/documentation/api/treemap/#enablepersistence) |
| `enableRtl` | `boolean` | `false` | Enables or disables right-to-left rendering. | [Link](https://ej2.syncfusion.com/angular/documentation/api/treemap/#enablertl) |
| `equalColorValuePath` | `string` | `''` | Specifies the field used when equal color mapping is applied. | [Link](https://ej2.syncfusion.com/angular/documentation/api/treemap/#equalcolorvaluepath) |
| `format` | `string` | `null` | Applies global numeric formatting such as `C`, `N1`, or `P`. | [Link](https://ej2.syncfusion.com/angular/documentation/api/treemap/#format) |
| `height` | `string` | `null` | Specifies the height of the TreeMap. | [Link](https://ej2.syncfusion.com/angular/documentation/api/treemap/#height) |
| `highlightSettings` | `HighlightSettingsModel` | `-` | Configures highlight appearance and behavior for hovered items. | [Link](https://ej2.syncfusion.com/angular/documentation/api/treemap/#highlightsettings) |
| `initialDrillDown` | `InitialDrillSettingsModel` | `-` | Configures the initial drill-down item and group. | [Link](https://ej2.syncfusion.com/angular/documentation/api/treemap/#initialdrilldown) |
| `layoutType` | `LayoutMode` | `'Squarified'` | Specifies the layout algorithm used to render TreeMap items. | [Link](https://ej2.syncfusion.com/angular/documentation/api/treemap/#layouttype) |
| `leafItemSettings` | `LeafItemSettingsModel` | `-` | Configures leaf labels, templates, padding, borders, and color mapping. | [Link](https://ej2.syncfusion.com/angular/documentation/api/treemap/#leafitemsettings) |
| `legendSettings` | `LegendSettingsModel` | `-` | Configures legend visibility, position, appearance, and mode. | [Link](https://ej2.syncfusion.com/angular/documentation/api/treemap/#legendsettings) |
| `levels` | `LevelSettingsModel[]` | `-` | Configures grouped hierarchy levels in the TreeMap. | [Link](https://ej2.syncfusion.com/angular/documentation/api/treemap/#levels) |
| `locale` | `string` | `''` | Overrides the global culture and localization value for the component. | [Link](https://ej2.syncfusion.com/angular/documentation/api/treemap/#locale) |
| `margin` | `MarginModel` | `-` | Configures the margin around the TreeMap. | [Link](https://ej2.syncfusion.com/angular/documentation/api/treemap/#margin) |
| `palette` | `string[]` | `[]` | Specifies the palette colors applied to TreeMap items. | [Link](https://ej2.syncfusion.com/angular/documentation/api/treemap/#palette) |
| `query` | `Query` | `null` | Specifies the query used to select particular data when using a data manager source. | [Link](https://ej2.syncfusion.com/angular/documentation/api/treemap/#query) |
| `rangeColorValuePath` | `string` | `''` | Specifies the field used for range-based color mapping. | [Link](https://ej2.syncfusion.com/angular/documentation/api/treemap/#rangecolorvaluepath) |
| `renderDirection` | `RenderingMode` | `TopLeftBottomRight` | Specifies the rendering direction of TreeMap item layout. | [Link](https://ej2.syncfusion.com/angular/documentation/api/treemap/#renderdirection) |
| `selectionSettings` | `SelectionSettingsModel` | `-` | Configures selection appearance and selection behavior. | [Link](https://ej2.syncfusion.com/angular/documentation/api/treemap/#selectionsettings) |
| `tabIndex` | `number` | `0` | Controls focus order of the TreeMap container. | [Link](https://ej2.syncfusion.com/angular/documentation/api/treemap/#tabindex) |
| `theme` | `TreeMapTheme` | `Material` | Specifies the built-in theme applied to the TreeMap. | [Link](https://ej2.syncfusion.com/angular/documentation/api/treemap/#theme) |
| `titleSettings` | `TitleSettingsModel` | `-` | Configures the title text and title styling. | [Link](https://ej2.syncfusion.com/angular/documentation/api/treemap/#titlesettings) |
| `tooltipSettings` | `TooltipSettingsModel` | `-` | Configures tooltip visibility, formatting, and template rendering. | [Link](https://ej2.syncfusion.com/angular/documentation/api/treemap/#tooltipsettings) |
| `useGroupingSeparator` | `boolean` | `false` | Enables grouping separators for formatted numeric values. | [Link](https://ej2.syncfusion.com/angular/documentation/api/treemap/#usegroupingseparator) |
| `weightValuePath` | `string` | `null` | Specifies the numeric field used to determine item size. | [Link](https://ej2.syncfusion.com/angular/documentation/api/treemap/#weightvaluepath) |
| `width` | `string` | `null` | Specifies the width of the TreeMap. | [Link](https://ej2.syncfusion.com/angular/documentation/api/treemap/#width) |

---

## Nested Model Classes

## LevelSettingsModel Class

**Class:** `LevelSettingsModel`  
**Description:** Configures grouped hierarchy levels in the TreeMap.  
**Class page:** [Link](https://ej2.syncfusion.com/angular/documentation/api/treemap/levelsettingsmodel)

### Properties

| Name | Type | Default | Description | Direct Link |
|------|------|---------|-------------|-------------|
| `autoFill` | `boolean` | `false` | Automatically fills level items using the TreeMap palette. | [Link](https://ej2.syncfusion.com/angular/documentation/api/treemap/levelsettingsmodel#autofill) |
| `border` | `BorderModel` | `-` | Configures the border color and width of level items. | [Link](https://ej2.syncfusion.com/angular/documentation/api/treemap/levelsettingsmodel#border) |
| `colorMapping` | `ColorMappingModel[]` | `-` | Configures color mapping rules for level items. | [Link](https://ej2.syncfusion.com/angular/documentation/api/treemap/levelsettingsmodel#colormapping) |
| `fill` | `string` | `null` | Sets the fill color of the level item. | [Link](https://ej2.syncfusion.com/angular/documentation/api/treemap/levelsettingsmodel#fill) |
| `groupGap` | `number` | `0` | Specifies the gap between grouped level items. | [Link](https://ej2.syncfusion.com/angular/documentation/api/treemap/levelsettingsmodel#groupgap) |
| `groupPadding` | `number` | `10` | Specifies padding inside grouped level items. | [Link](https://ej2.syncfusion.com/angular/documentation/api/treemap/levelsettingsmodel#grouppadding) |
| `groupPath` | `string` | `null` | Specifies the field used to group items at this level. | [Link](https://ej2.syncfusion.com/angular/documentation/api/treemap/levelsettingsmodel#grouppath) |
| `headerAlignment` | `Alignment` | `'Near'` | Aligns the header text inside the group header area. | [Link](https://ej2.syncfusion.com/angular/documentation/api/treemap/levelsettingsmodel#headeralignment) |
| `headerFormat` | `string` | `null` | Formats the header text using field placeholders. | [Link](https://ej2.syncfusion.com/angular/documentation/api/treemap/levelsettingsmodel#headerformat) |
| `headerHeight` | `number` | `20` | Specifies the height of the group header. | [Link](https://ej2.syncfusion.com/angular/documentation/api/treemap/levelsettingsmodel#headerheight) |
| `headerStyle` | `FontModel` | `-` | Configures header text styling. | [Link](https://ej2.syncfusion.com/angular/documentation/api/treemap/levelsettingsmodel#headerstyle) |
| `headerTemplate` | `string \| Function` | `null` | Renders a custom template for the group header. | [Link](https://ej2.syncfusion.com/angular/documentation/api/treemap/levelsettingsmodel#headertemplate) |
| `opacity` | `number` | `1` | Specifies the opacity of level items. | [Link](https://ej2.syncfusion.com/angular/documentation/api/treemap/levelsettingsmodel#opacity) |
| `showHeader` | `boolean` | `true` | Shows or hides the group header. | [Link](https://ej2.syncfusion.com/angular/documentation/api/treemap/levelsettingsmodel#showheader) |
| `templatePosition` | `LabelPosition` | `'TopLeft'` | Places the header template content inside the level item. | [Link](https://ej2.syncfusion.com/angular/documentation/api/treemap/levelsettingsmodel#templateposition) |

---

## LeafItemSettingsModel Class

**Class:** `LeafItemSettingsModel`  
**Description:** Configures leaf node appearance, labels, templates, color mapping, and spacing.  
**Class page:** [Link](https://ej2.syncfusion.com/angular/documentation/api/treemap/leafitemsettingsmodel)

### Properties

| Name | Type | Default | Description | Direct Link |
|------|------|---------|-------------|-------------|
| `autoFill` | `boolean` | `false` | Automatically fills leaf items using the TreeMap palette. | [Link](https://ej2.syncfusion.com/angular/documentation/api/treemap/leafitemsettingsmodel#autofill) |
| `border` | `BorderModel` | `-` | Configures the border of leaf items. | [Link](https://ej2.syncfusion.com/angular/documentation/api/treemap/leafitemsettingsmodel#border) |
| `colorMapping` | `ColorMappingModel[]` | `-` | Configures color mapping rules for leaf items. | [Link](https://ej2.syncfusion.com/angular/documentation/api/treemap/leafitemsettingsmodel#colormapping) |
| `fill` | `string` | `null` | Sets the fill color of leaf items. | [Link](https://ej2.syncfusion.com/angular/documentation/api/treemap/leafitemsettingsmodel#fill) |
| `gap` | `number` | `0` | Specifies the gap between leaf items. | [Link](https://ej2.syncfusion.com/angular/documentation/api/treemap/leafitemsettingsmodel#gap) |
| `interSectAction` | `LabelIntersectAction` | `'Trim'` | Controls how labels behave when they do not fit. | [Link](https://ej2.syncfusion.com/angular/documentation/api/treemap/leafitemsettingsmodel#intersectaction) |
| `labelFormat` | `string` | `null` | Formats label text using field placeholders. | [Link](https://ej2.syncfusion.com/angular/documentation/api/treemap/leafitemsettingsmodel#labelformat) |
| `labelPath` | `string` | `null` | Specifies the field used as the leaf label text. | [Link](https://ej2.syncfusion.com/angular/documentation/api/treemap/leafitemsettingsmodel#labelpath) |
| `labelPosition` | `LabelPosition` | `'TopLeft'` | Positions the label inside the leaf item. | [Link](https://ej2.syncfusion.com/angular/documentation/api/treemap/leafitemsettingsmodel#labelposition) |
| `labelStyle` | `FontModel` | `-` | Configures the style of the label text. | [Link](https://ej2.syncfusion.com/angular/documentation/api/treemap/leafitemsettingsmodel#labelstyle) |
| `labelTemplate` | `string \| Function` | `null` | Renders a custom label template. | [Link](https://ej2.syncfusion.com/angular/documentation/api/treemap/leafitemsettingsmodel#labeltemplate) |
| `opacity` | `number` | `1` | Specifies the opacity of leaf items. | [Link](https://ej2.syncfusion.com/angular/documentation/api/treemap/leafitemsettingsmodel#opacity) |
| `padding` | `number` | `10` | Specifies padding inside each leaf item. | [Link](https://ej2.syncfusion.com/angular/documentation/api/treemap/leafitemsettingsmodel#padding) |
| `showLabels` | `boolean` | `true` | Shows or hides leaf labels. | [Link](https://ej2.syncfusion.com/angular/documentation/api/treemap/leafitemsettingsmodel#showlabels) |
| `templatePosition` | `LabelPosition` | `'Center'` | Positions the label template content inside the leaf item. | [Link](https://ej2.syncfusion.com/angular/documentation/api/treemap/leafitemsettingsmodel#templateposition) |

---

## LegendSettingsModel Class

**Class:** `LegendSettingsModel`  
**Description:** Configures legend layout, style, mode, and rendering behavior.  
**Class page:** [Link](https://ej2.syncfusion.com/angular/documentation/api/treemap/legendsettingsmodel)

### Properties

| Name | Type | Default | Description | Direct Link |
|------|------|---------|-------------|-------------|
| `alignment` | `Alignment` | `'Center'` | Aligns legend items within the legend area. | [Link](https://ej2.syncfusion.com/angular/documentation/api/treemap/legendsettingsmodel#alignment) |
| `background` | `string` | `'transparent'` | Specifies the background color of the legend. | [Link](https://ej2.syncfusion.com/angular/documentation/api/treemap/legendsettingsmodel#background) |
| `border` | `BorderModel` | `-` | Configures the border of the legend container. | [Link](https://ej2.syncfusion.com/angular/documentation/api/treemap/legendsettingsmodel#border) |
| `fill` | `string` | `null` | Specifies the fill color of the legend shape. | [Link](https://ej2.syncfusion.com/angular/documentation/api/treemap/legendsettingsmodel#fill) |
| `height` | `string` | `''` | Specifies the height of the legend. | [Link](https://ej2.syncfusion.com/angular/documentation/api/treemap/legendsettingsmodel#height) |
| `imageUrl` | `string` | `null` | Specifies the image path when the legend shape is rendered as an image. | [Link](https://ej2.syncfusion.com/angular/documentation/api/treemap/legendsettingsmodel#imageurl) |
| `invertedPointer` | `boolean` | `false` | Enables or disables the inverted pointer for interactive legends. | [Link](https://ej2.syncfusion.com/angular/documentation/api/treemap/legendsettingsmodel#invertedpointer) |
| `labelDisplayMode` | `LabelIntersectAction` | `'None'` | Controls legend label behavior when labels overlap. | [Link](https://ej2.syncfusion.com/angular/documentation/api/treemap/legendsettingsmodel#labeldisplaymode) |
| `labelPosition` | `LabelPlacement` | `'After'` | Specifies legend label placement relative to the legend shape. | [Link](https://ej2.syncfusion.com/angular/documentation/api/treemap/legendsettingsmodel#labelposition) |
| `location` | `Location` | `-` | Places the legend at a custom location. | [Link](https://ej2.syncfusion.com/angular/documentation/api/treemap/legendsettingsmodel#location) |
| `mode` | `LegendMode` | `'Default'` | Sets the legend mode to default or interactive. | [Link](https://ej2.syncfusion.com/angular/documentation/api/treemap/legendsettingsmodel#mode) |
| `opacity` | `number` | `1` | Specifies the opacity of the legend. | [Link](https://ej2.syncfusion.com/angular/documentation/api/treemap/legendsettingsmodel#opacity) |
| `orientation` | `LegendOrientation` | `'None'` | Specifies legend orientation. | [Link](https://ej2.syncfusion.com/angular/documentation/api/treemap/legendsettingsmodel#orientation) |
| `position` | `LegendPosition` | `'Bottom'` | Specifies where the legend is placed. | [Link](https://ej2.syncfusion.com/angular/documentation/api/treemap/legendsettingsmodel#position) |
| `removeDuplicateLegend` | `boolean` | `false` | Removes duplicate legend items when enabled. | [Link](https://ej2.syncfusion.com/angular/documentation/api/treemap/legendsettingsmodel#removeduplicatelegend) |
| `shape` | `LegendShape` | `'Circle'` | Specifies the legend shape. | [Link](https://ej2.syncfusion.com/angular/documentation/api/treemap/legendsettingsmodel#shape) |
| `shapeBorder` | `BorderModel` | `-` | Configures the border of the legend shape. | [Link](https://ej2.syncfusion.com/angular/documentation/api/treemap/legendsettingsmodel#shapeborder) |
| `shapeHeight` | `number` | `15` | Specifies the height of legend shapes. | [Link](https://ej2.syncfusion.com/angular/documentation/api/treemap/legendsettingsmodel#shapeheight) |
| `shapePadding` | `number` | `10` | Specifies spacing between shape and text. | [Link](https://ej2.syncfusion.com/angular/documentation/api/treemap/legendsettingsmodel#shapepadding) |
| `shapeWidth` | `number` | `15` | Specifies the width of legend shapes. | [Link](https://ej2.syncfusion.com/angular/documentation/api/treemap/legendsettingsmodel#shapewidth) |
| `showLegendPath` | `string` | `null` | Specifies the field controlling legend item visibility. | [Link](https://ej2.syncfusion.com/angular/documentation/api/treemap/legendsettingsmodel#showlegendpath) |
| `textStyle` | `FontModel` | `-` | Configures legend text style. | [Link](https://ej2.syncfusion.com/angular/documentation/api/treemap/legendsettingsmodel#textstyle) |
| `title` | `CommonTitleSettingsModel` | `-` | Configures the legend title. | [Link](https://ej2.syncfusion.com/angular/documentation/api/treemap/legendsettingsmodel#title) |
| `titleStyle` | `FontModel` | `-` | Configures the legend title text style. | [Link](https://ej2.syncfusion.com/angular/documentation/api/treemap/legendsettingsmodel#titlestyle) |
| `valuePath` | `string` | `null` | Specifies the field used to render legend values. | [Link](https://ej2.syncfusion.com/angular/documentation/api/treemap/legendsettingsmodel#valuepath) |
| `visible` | `boolean` | `-` | Shows or hides the legend. | [Link](https://ej2.syncfusion.com/angular/documentation/api/treemap/legendsettingsmodel#visible) |
| `width` | `string` | `-` | Specifies the width of the legend. | [Link](https://ej2.syncfusion.com/angular/documentation/api/treemap/legendsettingsmodel#width) |

---

## TooltipSettingsModel Class

**Class:** `TooltipSettingsModel`  
**Description:** Configures tooltip appearance, visibility, formatting, and template rendering.  
**Class page:** [Link](https://ej2.syncfusion.com/angular/documentation/api/treemap/tooltipsettingsmodel)

### Properties

| Name | Type | Default | Description | Direct Link |
|------|------|---------|-------------|-------------|
| `border` | `BorderModel` | `-` | Configures the border color and width of the tooltip. | [Link](https://ej2.syncfusion.com/angular/documentation/api/treemap/tooltipsettingsmodel#border) |
| `fill` | `string` | `null` | Specifies the tooltip background color. | [Link](https://ej2.syncfusion.com/angular/documentation/api/treemap/tooltipsettingsmodel#fill) |
| `format` | `string` | `null` | Formats tooltip text using field placeholders. | [Link](https://ej2.syncfusion.com/angular/documentation/api/treemap/tooltipsettingsmodel#format) |
| `opacity` | `number` | `0.75` | Specifies tooltip opacity. | [Link](https://ej2.syncfusion.com/angular/documentation/api/treemap/tooltipsettingsmodel#opacity) |
| `template` | `string \| Function` | `''` | Renders custom tooltip content. | [Link](https://ej2.syncfusion.com/angular/documentation/api/treemap/tooltipsettingsmodel#template) |
| `textStyle` | `FontModel` | `-` | Configures tooltip text style. | [Link](https://ej2.syncfusion.com/angular/documentation/api/treemap/tooltipsettingsmodel#textstyle) |
| `visible` | `boolean` | `false` | Shows or hides the tooltip. | [Link](https://ej2.syncfusion.com/angular/documentation/api/treemap/tooltipsettingsmodel#visible) |

---

## SelectionSettingsModel Class

**Class:** `SelectionSettingsModel`  
**Description:** Configures selection behavior and visual style for selected items.  
**Class page:** [Link](https://ej2.syncfusion.com/angular/documentation/api/treemap/selectionsettingsmodel)

### Properties

| Name | Type | Default | Description | Direct Link |
|------|------|---------|-------------|-------------|
| `border` | `BorderModel` | `-` | Configures the border of selected items. | [Link](https://ej2.syncfusion.com/angular/documentation/api/treemap/selectionsettingsmodel#border) |
| `enable` | `boolean` | `false` | Enables or disables selection. | [Link](https://ej2.syncfusion.com/angular/documentation/api/treemap/selectionsettingsmodel#enable) |
| `fill` | `string` | `null` | Sets the fill color of selected items. | [Link](https://ej2.syncfusion.com/angular/documentation/api/treemap/selectionsettingsmodel#fill) |
| `mode` | `SelectionMode` | `'Item'` | Specifies which element type is selected when the user interacts with the TreeMap. | [Link](https://ej2.syncfusion.com/angular/documentation/api/treemap/selectionsettingsmodel#mode) |
| `opacity` | `string` | `'0.5'` | Specifies the opacity of the selection overlay. | [Link](https://ej2.syncfusion.com/angular/documentation/api/treemap/selectionsettingsmodel#opacity) |

---

## HighlightSettingsModel Class

**Class:** `HighlightSettingsModel`  
**Description:** Configures hover highlight behavior and visual style.  
**Class page:** [Link](https://ej2.syncfusion.com/angular/documentation/api/treemap/highlightsettingsmodel)

### Properties

| Name | Type | Default | Description | Direct Link |
|------|------|---------|-------------|-------------|
| `border` | `BorderModel` | `-` | Configures the border of highlighted items. | [Link](https://ej2.syncfusion.com/angular/documentation/api/treemap/highlightsettingsmodel#border) |
| `enable` | `boolean` | `false` | Enables or disables item highlight on hover. | [Link](https://ej2.syncfusion.com/angular/documentation/api/treemap/highlightsettingsmodel#enable) |
| `fill` | `string` | `'#808080'` | Sets the highlight fill color. | [Link](https://ej2.syncfusion.com/angular/documentation/api/treemap/highlightsettingsmodel#fill) |
| `mode` | `HighLightMode` | `'Item'` | Specifies which element type is highlighted. | [Link](https://ej2.syncfusion.com/angular/documentation/api/treemap/highlightsettingsmodel#mode) |
| `opacity` | `string` | `'0.5'` | Specifies the opacity of the highlight overlay. | [Link](https://ej2.syncfusion.com/angular/documentation/api/treemap/highlightsettingsmodel#opacity) |

---

## ColorMappingModel Class

**Class:** `ColorMappingModel`  
**Description:** Configures TreeMap color mapping rules for leaf items or grouped level items.  
**Class page:** [Link](https://ej2.syncfusion.com/angular/documentation/api/treemap/colormappingmodel)

### Properties

| Name | Type | Default | Description | Direct Link |
|------|------|---------|-------------|-------------|
| `color` | `string \| string[]` | `-` | Sets the color for the color-mapping in TreeMap. | [Link](https://ej2.syncfusion.com/angular/documentation/api/treemap/colormappingmodel#color) |
| `from` | `number` | `-` | Sets the value from which the range of color mapping starts. | [Link](https://ej2.syncfusion.com/angular/documentation/api/treemap/colormappingmodel#from) |
| `label` | `string` | `-` | Sets the legend label text when the legend is rendered based on color mapping. | [Link](https://ej2.syncfusion.com/angular/documentation/api/treemap/colormappingmodel#label) |
| `maxOpacity` | `number` | `-` | Sets the maximum opacity for the color-mapping. | [Link](https://ej2.syncfusion.com/angular/documentation/api/treemap/colormappingmodel#maxopacity) |
| `minOpacity` | `number` | `-` | Sets the minimum opacity for the color-mapping. | [Link](https://ej2.syncfusion.com/angular/documentation/api/treemap/colormappingmodel#minopacity) |
| `showLegend` | `boolean` | `-` | Enables or disables legend visibility for the color mapping. | [Link](https://ej2.syncfusion.com/angular/documentation/api/treemap/colormappingmodel#showlegend) |
| `to` | `number` | `-` | Sets the value to which the range of color mapping ends. | [Link](https://ej2.syncfusion.com/angular/documentation/api/treemap/colormappingmodel#to) |
| `value` | `string \| number` | `-` | Sets the discrete value for equal color-mapping from the data source. | [Link](https://ej2.syncfusion.com/angular/documentation/api/treemap/colormappingmodel#value) |

---

## CommonTitleSettingsModel Class

**Class:** `CommonTitleSettingsModel`  
**Description:** Shared title model used by TreeMap title-related configurations.  
**Class page:** [Link](https://ej2.syncfusion.com/angular/documentation/api/treemap/commontitlesettingsmodel)

### Properties

| Name | Type | Default | Description | Direct Link |
|------|------|---------|-------------|-------------|
| `description` | `string` | `-` | Defines the accessibility description for the title. | [Link](https://ej2.syncfusion.com/angular/documentation/api/treemap/commontitlesettingsmodel#description) |
| `text` | `string` | `-` | Sets the title text. | [Link](https://ej2.syncfusion.com/angular/documentation/api/treemap/commontitlesettingsmodel#text) |

---

## TitleSettingsModel Class

**Class:** `TitleSettingsModel`  
**Description:** Configures the TreeMap title.  
**Class page:** [Link](https://ej2.syncfusion.com/angular/documentation/api/treemap/titlesettingsmodel)

### Properties

| Name | Type | Default | Description | Direct Link |
|------|------|---------|-------------|-------------|
| `alignment` | `Alignment` | `-` | Sets the text position of the title text in the TreeMap. | [Link](https://ej2.syncfusion.com/angular/documentation/api/treemap/titlesettingsmodel#alignment) |
| `description` | `string` | `-` | Defines the accessibility description of the title. | [Link](https://ej2.syncfusion.com/angular/documentation/api/treemap/titlesettingsmodel#description) |
| `subtitleSettings` | `SubTitleSettingsModel` | `-` | Configures the subtitle for the TreeMap title. | [Link](https://ej2.syncfusion.com/angular/documentation/api/treemap/titlesettingsmodel#subtitlesettings) |
| `text` | `string` | `-` | Sets the title text. | [Link](https://ej2.syncfusion.com/angular/documentation/api/treemap/titlesettingsmodel#text) |
| `textStyle` | `FontModel` | `-` | Configures the title text style. | [Link](https://ej2.syncfusion.com/angular/documentation/api/treemap/titlesettingsmodel#textstyle) |

---

## SubTitleSettingsModel Class

**Class:** `SubTitleSettingsModel`  
**Description:** Configures the TreeMap subtitle.  
**Class page:** [Link](https://ej2.syncfusion.com/angular/documentation/api/treemap/subtitlesettingsmodel)

### Properties

| Name | Type | Default | Description | Direct Link |
|------|------|---------|-------------|-------------|
| `alignment` | `Alignment` | `-` | Sets the alignment of the subtitle text in the TreeMap. | [Link](https://ej2.syncfusion.com/angular/documentation/api/treemap/subtitlesettingsmodel#alignment) |
| `description` | `string` | `-` | Defines the accessibility description of the subtitle. | [Link](https://ej2.syncfusion.com/angular/documentation/api/treemap/subtitlesettingsmodel#description) |
| `text` | `string` | `-` | Sets the subtitle text. | [Link](https://ej2.syncfusion.com/angular/documentation/api/treemap/subtitlesettingsmodel#text) |
| `textStyle` | `FontModel` | `-` | Configures the subtitle text style. | [Link](https://ej2.syncfusion.com/angular/documentation/api/treemap/subtitlesettingsmodel#textstyle) |

---

## InitialDrillSettingsModel Class

**Class:** `InitialDrillSettingsModel`  
**Description:** Configures the initial drill-down target rendered on first load.  
**Class page:** [Link](https://ej2.syncfusion.com/angular/documentation/api/treemap/initialdrillsettingsmodel)

### Properties

| Name | Type | Default | Description | Direct Link |
|------|------|---------|-------------|-------------|
| `groupIndex` | `number` | `-` | Sets the initial rendering level index in the TreeMap. | [Link](https://ej2.syncfusion.com/angular/documentation/api/treemap/initialdrillsettingsmodel#groupindex) |
| `groupName` | `string` | `-` | Sets the initial rendering level name in the TreeMap. | [Link](https://ej2.syncfusion.com/angular/documentation/api/treemap/initialdrillsettingsmodel#groupname) |

---

## TreeMapAjax Class

**Class:** `TreeMapAjax`  
**Description:** Specifies the data to be received through Ajax request for TreeMap.  
**Class page:** [Link](https://ej2.syncfusion.com/angular/documentation/api/treemap/treemapajax)

### Properties

| Name | Type | Default | Description | Direct Link |
|------|------|---------|-------------|-------------|
| `async` | `boolean` | `-` | Specifies whether the request is asynchronous. | [Link](https://ej2.syncfusion.com/angular/documentation/api/treemap/treemapajax#async) |
| `contentType` | `string` | `-` | Defines the content type of the request. | [Link](https://ej2.syncfusion.com/angular/documentation/api/treemap/treemapajax#contenttype) |
| `dataOptions` | `string \| any` | `-` | Defines the data options for the TreeMap request. | [Link](https://ej2.syncfusion.com/angular/documentation/api/treemap/treemapajax#dataoptions) |
| `sendData` | `string \| any` | `-` | Defines the data to be sent through the request. | [Link](https://ej2.syncfusion.com/angular/documentation/api/treemap/treemapajax#senddata) |
| `type` | `string` | `-` | Defines the type of data/request. | [Link](https://ej2.syncfusion.com/angular/documentation/api/treemap/treemapajax#type) |

---

## Support Types

## BorderModel Class

**Class:** `BorderModel`  
**Description:** Reusable border model used across TreeMap API objects.  
**Class page:** [Link](https://ej2.syncfusion.com/angular/documentation/api/treemap/bordermodel)

### Properties

| Name | Type | Default | Description | Direct Link |
|------|------|---------|-------------|-------------|
| `color` | `string` | `-` | Sets the border color. Accepts valid CSS colors including hex and rgba strings. | [Link](https://ej2.syncfusion.com/angular/documentation/api/treemap/bordermodel#color) |
| `width` | `number` | `-` | Defines the width of the border in the TreeMap. | [Link](https://ej2.syncfusion.com/angular/documentation/api/treemap/bordermodel#width) |

---

## FontModel Class

**Class:** `FontModel`  
**Description:** Reusable text style model used across TreeMap title, legend, tooltip, label, and header settings.  
**Class page:** [Link](https://ej2.syncfusion.com/angular/documentation/api/treemap/fontmodel)

### Properties

| Name | Type | Default | Description | Direct Link |
|------|------|---------|-------------|-------------|
| `color` | `string` | `-` | Sets the text color. | [Link](https://ej2.syncfusion.com/angular/documentation/api/treemap/fontmodel#color) |
| `fontFamily` | `string` | `-` | Sets the font family. | [Link](https://ej2.syncfusion.com/angular/documentation/api/treemap/fontmodel#fontfamily) |
| `fontStyle` | `string` | `-` | Sets the font style. | [Link](https://ej2.syncfusion.com/angular/documentation/api/treemap/fontmodel#fontstyle) |
| `fontWeight` | `string` | `-` | Sets the font weight. | [Link](https://ej2.syncfusion.com/angular/documentation/api/treemap/fontmodel#fontweight) |
| `opacity` | `number` | `-` | Sets the text opacity. | [Link](https://ej2.syncfusion.com/angular/documentation/api/treemap/fontmodel#opacity) |
| `size` | `string` | `-` | Sets the font size. | [Link](https://ej2.syncfusion.com/angular/documentation/api/treemap/fontmodel#size) |

---

## MarginModel Class

**Class:** `MarginModel`  
**Description:** Reusable margin model used by the TreeMap container.  
**Class page:** [Link](https://ej2.syncfusion.com/angular/documentation/api/treemap/marginmodel)

### Properties

| Name | Type | Default | Description | Direct Link |
|------|------|---------|-------------|-------------|
| `bottom` | `number` | `-` | Sets the bottom margin for the TreeMap. | [Link](https://ej2.syncfusion.com/angular/documentation/api/treemap/marginmodel#bottom) |
| `left` | `number` | `-` | Sets the left margin for the TreeMap. | [Link](https://ej2.syncfusion.com/angular/documentation/api/treemap/marginmodel#left) |
| `right` | `number` | `-` | Sets the right margin for the TreeMap. | [Link](https://ej2.syncfusion.com/angular/documentation/api/treemap/marginmodel#right) |
| `top` | `number` | `-` | Sets the top margin for the TreeMap. | [Link](https://ej2.syncfusion.com/angular/documentation/api/treemap/marginmodel#top) |

---

## Location Class

**Class:** `Location`  
**Description:** Specifies X/Y location parameters used by custom legend positioning.  
**Class page:** [Link](https://ej2.syncfusion.com/angular/documentation/api/treemap/location)

### Properties

| Name | Type | Default | Description | Direct Link |
|------|------|---------|-------------|-------------|
| `x` | `number` | `-` | Defines the horizontal position. | [Link](https://ej2.syncfusion.com/angular/documentation/api/treemap/location#x) |
| `y` | `number` | `-` | Defines the vertical position. | [Link](https://ej2.syncfusion.com/angular/documentation/api/treemap/location#y) |

---

## Methods

## TreeMapComponent Methods

| Name | Return Type | Description | Direct Link |
|------|-------------|-------------|-------------|
| `destroy()` | `void` | Destroys the TreeMap instance and removes its behavior. | [Link](https://ej2.syncfusion.com/angular/documentation/api/treemap/#destroy) |
| `doubleClickOnTreeMap(e)` | `void` | Handles the double-click event in the TreeMap. | [Link](https://ej2.syncfusion.com/angular/documentation/api/treemap/#doubleclickontreemap) |
| `export(type, fileName, orientation?, allowDownload?)` | `Promise` | Exports the TreeMap to image or PDF formats. | [Link](https://ej2.syncfusion.com/angular/documentation/api/treemap/#export) |
| `print(id?)` | `void` | Prints the rendered TreeMap. | [Link](https://ej2.syncfusion.com/angular/documentation/api/treemap/#print) |
| `selectItem(levelOrder: string[], isSelected?: boolean)` | `void` | Programmatically selects or deselects a TreeMap item or group. | [Link](https://ej2.syncfusion.com/angular/documentation/api/treemap/#selectitem) |

## Method Usage Example

```typescript
import { Component, ViewChild, signal } from '@angular/core';
import {
  TreeMapModule,
  TreeMapComponent as SyncTreeMapComponent,
  PrintService,
  ImageExportService,
  PdfExportService,
  TreeMapSelectionService
} from '@syncfusion/ej2-angular-treemap';

@Component({
  selector: 'app-treemap',
  standalone: true,
  imports: [TreeMapModule],
  providers: [PrintService, ImageExportService, PdfExportService, TreeMapSelectionService],
  template: `
    <div class="toolbar">
      <button type="button" (click)="selectLaptop()">Select Laptop</button>
      <button type="button" (click)="exportPNG()">Export PNG</button>
      <button type="button" (click)="exportPDF()">Export PDF</button>
      <button type="button" (click)="printTreeMap()">Print</button>
      <button type="button" (click)="destroyTreeMap()">Destroy</button>
    </div>

    <ejs-treemap
      #treemap
      id="treemap-container"
      [dataSource]="data()"
      weightValuePath="Sales"
      [allowPrint]="true"
      [allowImageExport]="true"
      [allowPdfExport]="true"
      [selectionSettings]="selectionSettings"
      [levels]="levels"
      [leafItemSettings]="leafItemSettings">
    </ejs-treemap>
  `,
  styles: [`
    .toolbar {
      display: flex;
      gap: 8px;
      flex-wrap: wrap;
      margin-bottom: 12px;
    }

    #treemap-container {
      display: block;
      width: 100%;
      height: 520px;
    }
  `]
})
export class TreeMapComponent {
  @ViewChild('treemap')
  public treemap?: SyncTreeMapComponent;

  public data = signal([
    { Category: 'Electronics', Product: 'Laptop', Sales: 15000 },
    { Category: 'Electronics', Product: 'Phone', Sales: 12000 },
    { Category: 'Furniture', Product: 'Chair', Sales: 8000 }
  ]);

  public levels = [
    { groupPath: 'Category' }
  ];

  public selectionSettings = {
    enable: true,
    mode: 'Item',
    fill: '#dbeafe',
    border: { color: '#2563eb', width: 1 }
  };

  public leafItemSettings = {
    labelPath: 'Product',
    gap: 4,
    border: { color: '#ffffff', width: 1 }
  };

  public selectLaptop(): void {
    this.treemap?.selectItem(['Electronics', 'Laptop'], true);
  }

  public exportPNG(): void {
    this.treemap?.export('PNG', 'treemap');
  }

  public exportPDF(): void {
    this.treemap?.export('PDF', 'treemap');
  }

  public printTreeMap(): void {
    this.treemap?.print();
  }

  public destroyTreeMap(): void {
    this.treemap?.destroy();
  }
}
```

---

## Events

## TreeMapComponent Events

| Name | Type | Description | Direct Link |
|------|------|-------------|-------------|
| `beforePrint` | `EmitType<IPrintEventArgs>` | Triggers before printing starts. | [Link](https://ej2.syncfusion.com/angular/documentation/api/treemap/treemapmodel/#beforeprint) |
| `click` | `EmitType<IItemClickEventArgs>` | Triggers after clicking on the TreeMap. | [Link](https://ej2.syncfusion.com/angular/documentation/api/treemap/treemapmodel/#click) |
| `doubleClick` | `EmitType<IDoubleClickEventArgs>` | Triggers after double-clicking on the TreeMap. | [Link](https://ej2.syncfusion.com/angular/documentation/api/treemap/treemapmodel/#doubleclick) |
| `drillEnd` | `EmitType<IDrillEndEventArgs>` | Triggers after drill-down completes. | [Link](https://ej2.syncfusion.com/angular/documentation/api/treemap/treemapmodel/#drillend) |
| `drillStart` | `EmitType<IDrillStartEventArgs>` | Triggers when drill-down starts. | [Link](https://ej2.syncfusion.com/angular/documentation/api/treemap/treemapmodel/#drillstart) |
| `itemClick` | `EmitType<IItemClickEventArgs>` | Triggers after clicking a TreeMap item. | [Link](https://ej2.syncfusion.com/angular/documentation/api/treemap/treemapmodel/#itemclick) |
| `itemHighlight` | `EmitType<IItemHighlightEventArgs>` | Triggers after highlighting an item. | [Link](https://ej2.syncfusion.com/angular/documentation/api/treemap/treemapmodel/#itemhighlight) |
| `itemMove` | `EmitType<IItemMoveEventArgs>` | Triggers after moving the pointer over an item. | [Link](https://ej2.syncfusion.com/angular/documentation/api/treemap/treemapmodel/#itemmove) |
| `itemRendering` | `EmitType<IItemRenderingEventArgs>` | Triggers before each item is rendered. | [Link](https://ej2.syncfusion.com/angular/documentation/api/treemap/treemapmodel/#itemrendering) |
| `itemSelected` | `EmitType<IItemSelectedEventArgs>` | Triggers after selecting a TreeMap item. | [Link](https://ej2.syncfusion.com/angular/documentation/api/treemap/treemapmodel/#itemselected) |
| `legendItemRendering` | `EmitType<ILegendItemRenderingEventArgs>` | Triggers before each legend item is rendered. | [Link](https://ej2.syncfusion.com/angular/documentation/api/treemap/treemapmodel/#legenditemrendering) |
| `legendRendering` | `EmitType<ILegendRenderingEventArgs>` | Triggers before the legend is rendered. | [Link](https://ej2.syncfusion.com/angular/documentation/api/treemap/treemapmodel/#legendrendering) |
| `load` | `EmitType<ILoadEventArgs>` | Triggers before the TreeMap is rendered. | [Link](https://ej2.syncfusion.com/angular/documentation/api/treemap/treemapmodel/#load) |
| `loaded` | `EmitType<ILoadedEventArgs>` | Triggers after the TreeMap is rendered. | [Link](https://ej2.syncfusion.com/angular/documentation/api/treemap/treemapmodel/#loaded) |
| `mouseMove` | `EmitType<IMouseMoveEventArgs>` | Triggers after moving the pointer over the TreeMap. | [Link](https://ej2.syncfusion.com/angular/documentation/api/treemap/treemapmodel/#mousemove) |
| `resize` | `EmitType<IResizeEventArgs>` | Triggers when the TreeMap is resized. | [Link](https://ej2.syncfusion.com/angular/documentation/api/treemap/treemapmodel/#resize) |
| `rightClick` | `EmitType<IMouseMoveEventArgs>` | Triggers after right-clicking on the TreeMap. | [Link](https://ej2.syncfusion.com/angular/documentation/api/treemap/treemapmodel/#rightclick) |
| `tooltipRendering` | `EmitType<ITreeMapTooltipRenderEventArgs>` | Triggers while the tooltip is being rendered. | [Link](https://ej2.syncfusion.com/angular/documentation/api/treemap/treemapmodel/#tooltiprendering) |

---

## Event Args Interfaces

> These are the dedicated API item pages for TreeMap event-args interfaces.

- `IClickEventArgs` — [Link](https://ej2.syncfusion.com/angular/documentation/api/treemap/iclickeventargs)
- `IDoubleClickEventArgs` — [Link](https://ej2.syncfusion.com/angular/documentation/api/treemap/idoubleclickeventargs)
- `IDrillEndEventArgs` — [Link](https://ej2.syncfusion.com/angular/documentation/api/treemap/idrillendeventargs)
- `IDrillStartEventArgs` — [Link](https://ej2.syncfusion.com/angular/documentation/api/treemap/idrillstarteventargs)
- `IItemClickEventArgs` — [Link](https://ej2.syncfusion.com/angular/documentation/api/treemap/iitemclickeventargs)
- `IItemHighlightEventArgs` — [Link](https://ej2.syncfusion.com/angular/documentation/api/treemap/iitemhighlighteventargs)
- `IItemMoveEventArgs` — [Link](https://ej2.syncfusion.com/angular/documentation/api/treemap/iitemmoveeventargs)
- `IItemRenderingEventArgs` — [Link](https://ej2.syncfusion.com/angular/documentation/api/treemap/iitemrenderingeventargs)
- `IItemSelectedEventArgs` — [Link](https://ej2.syncfusion.com/angular/documentation/api/treemap/iitemselectedeventargs)
- `ILegendItemRenderingEventArgs` — [Link](https://ej2.syncfusion.com/angular/documentation/api/treemap/ilegenditemrenderingeventargs)
- `ILegendRenderingEventArgs` — [Link](https://ej2.syncfusion.com/angular/documentation/api/treemap/ilegendrenderingeventargs)
- `ILoadedEventArgs` — [Link](https://ej2.syncfusion.com/angular/documentation/api/treemap/iloadedeventargs)
- `ILoadEventArgs` — [Link](https://ej2.syncfusion.com/angular/documentation/api/treemap/iloadeventargs)
- `IMouseMoveEventArgs` — [Link](https://ej2.syncfusion.com/angular/documentation/api/treemap/imousemoveeventargs)
- `IPrintEventArgs` — [Link](https://ej2.syncfusion.com/angular/documentation/api/treemap/iprinteventargs)
- `IResizeEventArgs` — [Link](https://ej2.syncfusion.com/angular/documentation/api/treemap/iresizeeventargs)
- `IRightClickEventArgs` — [Link](https://ej2.syncfusion.com/angular/documentation/api/treemap/irightclickeventargs)
- `ITreeMapTooltipRenderEventArgs` — [Link](https://ej2.syncfusion.com/angular/documentation/api/treemap/itreemaptooltiprendereventargs)


## Event Usage Example

```typescript
import { Component, signal } from '@angular/core';
import {
  TreeMapModule,
  TreeMapTooltipService,
  TreeMapLegendService,
  TreeMapSelectionService,
  TreeMapHighlightService,
  IItemClickEventArgs,
  IItemRenderingEventArgs,
  IDoubleClickEventArgs,
  IDrillStartEventArgs,
  IDrillEndEventArgs,
  IItemSelectedEventArgs,
  ILegendRenderingEventArgs,
  ILegendItemRenderingEventArgs,
  ILoadedEventArgs,
  ILoadEventArgs,
  IMouseMoveEventArgs,
  IResizeEventArgs,
  ITreeMapTooltipRenderEventArgs
} from '@syncfusion/ej2-angular-treemap';

@Component({
  selector: 'app-treemap',
  standalone: true,
  imports: [TreeMapModule],
  providers: [
    TreeMapTooltipService,
    TreeMapLegendService,
    TreeMapSelectionService,
    TreeMapHighlightService
  ],
  template: `
    <ejs-treemap
      id="treemap-container"
      [dataSource]="data()"
      weightValuePath="Sales"
      equalColorValuePath="Category"
      [enableDrillDown]="true"
      [legendSettings]="legendSettings"
      [tooltipSettings]="tooltipSettings"
      [selectionSettings]="selectionSettings"
      [highlightSettings]="highlightSettings"
      [levels]="levels"
      [leafItemSettings]="leafItemSettings"
      (load)="onLoad($event)"
      (loaded)="onLoaded($event)"
      (itemRendering)="onItemRendering($event)"
      (click)="onClick($event)"
      (itemClick)="onItemClick($event)"
      (doubleClick)="onDoubleClick($event)"
      (drillStart)="onDrillStart($event)"
      (drillEnd)="onDrillEnd($event)"
      (itemSelected)="onItemSelected($event)"
      (legendRendering)="onLegendRendering($event)"
      (legendItemRendering)="onLegendItemRendering($event)"
      (mouseMove)="onMouseMove($event)"
      (itemMove)="onItemMove($event)"
      (itemHighlight)="onItemHighlight($event)"
      (rightClick)="onRightClick($event)"
      (tooltipRendering)="onTooltipRendering($event)"
      (resize)="onResize($event)">
    </ejs-treemap>

    <div class="event-log">
      <h3>Last Event</h3>
      <p>{{ lastEvent() }}</p>
    </div>
  `,
  styles: [`
    #treemap-container {
      display: block;
      width: 100%;
      height: 520px;
    }

    .event-log {
      margin-top: 12px;
      padding: 12px;
      border: 1px solid #d1d5db;
      border-radius: 8px;
      background: #f9fafb;
    }
  `]
})
export class TreeMapComponent {
  public data = signal([
    { Category: 'Electronics', Product: 'Laptop', Sales: 15000 },
    { Category: 'Electronics', Product: 'Phone', Sales: 12000 },
    { Category: 'Furniture', Product: 'Chair', Sales: 8000 },
    { Category: 'Clothing', Product: 'Shirt', Sales: 5000 }
  ]);

  public levels = [{ groupPath: 'Category' }];

  public leafItemSettings = {
    labelPath: 'Product',
    colorMapping: [
      { value: 'Electronics', color: '#2563eb', label: 'Electronics' },
      { value: 'Furniture', color: '#16a34a', label: 'Furniture' },
      { value: 'Clothing', color: '#ea580c', label: 'Clothing' }
    ]
  };

  public legendSettings = {
    visible: true
  };

  public tooltipSettings = {
    visible: true,
    format: '${Product}: ${Sales}'
  };

  public selectionSettings = {
    enable: true,
    mode: 'Item',
    fill: '#dbeafe',
    border: { color: '#2563eb', width: 1 }
  };

  public highlightSettings = {
    enable: true,
    fill: '#fde68a',
    border: { color: '#d97706', width: 1 }
  };

  public lastEvent = signal('No event yet.');

  public onLoad(args: ILoadEventArgs): void {
    this.lastEvent.set('load');
    console.log('load', args);
  }

  public onLoaded(args: ILoadedEventArgs): void {
    this.lastEvent.set('loaded');
    console.log('loaded', args);
  }

  public onItemRendering(args: IItemRenderingEventArgs): void {
    this.lastEvent.set('itemRendering');
    console.log('itemRendering', args);
  }

  public onClick(args: IItemClickEventArgs): void {
    this.lastEvent.set('click');
    console.log('click', args);
  }

  public onItemClick(args: IItemClickEventArgs): void {
    this.lastEvent.set('itemClick');
    console.log('itemClick', args);
  }

  public onDoubleClick(args: IDoubleClickEventArgs): void {
    this.lastEvent.set('doubleClick');
    console.log('doubleClick', args);
  }

  public onDrillStart(args: IDrillStartEventArgs): void {
    this.lastEvent.set('drillStart');
    console.log('drillStart', args);
  }

  public onDrillEnd(args: IDrillEndEventArgs): void {
    this.lastEvent.set('drillEnd');
    console.log('drillEnd', args);
  }

  public onItemSelected(args: IItemSelectedEventArgs): void {
    this.lastEvent.set('itemSelected');
    console.log('itemSelected', args);
  }

  public onLegendRendering(args: ILegendRenderingEventArgs): void {
    this.lastEvent.set('legendRendering');
    console.log('legendRendering', args);
  }

  public onLegendItemRendering(args: ILegendItemRenderingEventArgs): void {
    this.lastEvent.set('legendItemRendering');
    console.log('legendItemRendering', args);
  }

  public onMouseMove(args: IMouseMoveEventArgs): void {
    this.lastEvent.set('mouseMove');
    console.log('mouseMove', args);
  }

  public onItemMove(args: any): void {
    this.lastEvent.set('itemMove');
    console.log('itemMove', args);
  }

  public onItemHighlight(args: any): void {
    this.lastEvent.set('itemHighlight');
    console.log('itemHighlight', args);
  }

  public onRightClick(args: IMouseMoveEventArgs): void {
    this.lastEvent.set('rightClick');
    console.log('rightClick', args);
  }

  public onTooltipRendering(args: ITreeMapTooltipRenderEventArgs): void {
    this.lastEvent.set('tooltipRendering');
    console.log('tooltipRendering', args);
  }

  public onResize(args: IResizeEventArgs): void {
    this.lastEvent.set('resize');
    console.log('resize', args);
  }
}

---

## Enumerations

### Alignment

Specifies the alignment of the elements in the TreeMap.

```ts
export type Alignment =
  | 'Near'
  | 'Center'
  | 'Far';
```

**Common values:**
- `Near`
- `Center`
- `Far`

**Reference:** [Link](https://ej2.syncfusion.com/angular/documentation/api/treemap/alignment)

---

### ExportType

Specifies the export type for the TreeMap.

```ts
export type ExportType =
  | 'PNG'
  | 'JPEG'
  | 'SVG'
  | 'PDF';
```

**Common values:**
- `PNG`
- `JPEG`
- `SVG`
- `PDF`

**Reference:** [Link](https://ej2.syncfusion.com/angular/documentation/api/treemap/exporttype)

---

### HighLightMode

Specifies the element that must be highlighted when mouse over is performed in the TreeMap.

```ts
export type HighLightMode =
  | 'Item'
  | 'Child'
  | 'Parent'
  | 'All';
```

**Common values:**
- `Item` — highlights the hovered item
- `Child` — highlights child items
- `Parent` — highlights the parent group
- `All` — highlights the full related hierarchy

**Reference:** [Link](https://ej2.syncfusion.com/angular/documentation/api/treemap/highlightmode)

---

### LabelAlignment

Defines the action of the label to be placed within the defined margins.

```ts
export type LabelAlignment =
  | 'Trim'
  | 'Hide'
  | 'WrapByWord'
  | 'Wrap';
```

**Common values:**
- `Trim` — trims the label if it exceeds the available bounds
- `Hide` — hides the label if it exceeds the available bounds
- `WrapByWord` — wraps the label by words
- `Wrap` — wraps the label

**Reference:** [Link](https://ej2.syncfusion.com/angular/documentation/api/treemap/labelalignment)

---

### LabelIntersectAction

Defines the action to perform when labels intersect each other in the TreeMap.

```ts
export type LabelIntersectAction =
  | 'None'
  | 'Trim'
  | 'Hide';
```

**Common values:**
- `None` — shows all labels without applying collision handling
- `Trim` — trims labels when they intersect
- `Hide` — hides labels when they intersect

**Reference:** [Link](https://ej2.syncfusion.com/angular/documentation/api/treemap/labelintersectaction)

---

### LabelPlacement

Defines the placement type of the label.

```ts
export type LabelPlacement =
  | 'Before'
  | 'After';
```

**Common values:**
- `Before`
- `After`

**Reference:** [Link](https://ej2.syncfusion.com/angular/documentation/api/treemap/labelplacement)

---

### LabelPosition

Defines the position of the label in the TreeMap leaf node.

```ts
export type LabelPosition =
  | 'TopLeft'
  | 'TopCenter'
  | 'TopRight'
  | 'CenterLeft'
  | 'Center'
  | 'CenterRight'
  | 'BottomLeft'
  | 'BottomCenter'
  | 'BottomRight';
```

**Common values:**
- `TopLeft`
- `TopCenter`
- `TopRight`
- `CenterLeft`
- `Center`
- `CenterRight`
- `BottomLeft`
- `BottomCenter`
- `BottomRight`

**Reference:** [Link](https://ej2.syncfusion.com/angular/documentation/api/treemap/labelposition)

---

### LayoutMode

Specifies the layout rendering mode of the TreeMap.

```ts
export type LayoutMode =
  | 'Squarified'
  | 'SliceAndDiceHorizontal'
  | 'SliceAndDiceVertical'
  | 'SliceAndDiceAuto';
```

**Common values:**
- `Squarified` — default balanced layout
- `SliceAndDiceHorizontal` — slices items horizontally
- `SliceAndDiceVertical` — slices items vertically
- `SliceAndDiceAuto` — automatically chooses slice direction

**Reference:** [Link](https://ej2.syncfusion.com/angular/documentation/api/treemap/layoutmode)

---

### LegendMode

Defines the modes for rendering the legend.

```ts
export type LegendMode =
  | 'Default'
  | 'Interactive';
```

**Common values:**
- `Default` — standard legend rendering
- `Interactive` — interactive legend rendering

**Reference:** [Link](https://ej2.syncfusion.com/angular/documentation/api/treemap/legendmode)

---

### LegendOrientation

Specifies the orientation of the legend in the TreeMap.

```ts
export type LegendOrientation =
  | 'None'
  | 'Horizontal'
  | 'Vertical';
```

**Common values:**
- `None`
- `Horizontal`
- `Vertical`

**Reference:** [Link](https://ej2.syncfusion.com/angular/documentation/api/treemap/legendorientation)

---

### LegendPosition

Controls where the legend is placed relative to the TreeMap.

```ts
export type LegendPosition =
  | 'Top'
  | 'Bottom'
  | 'Left'
  | 'Right'
  | 'Float';
```

**Common values:**
- `Top`
- `Bottom`
- `Left`
- `Right`
- `Float`

**Reference:** [Link](https://ej2.syncfusion.com/angular/documentation/api/treemap/legendposition)

---

### LegendShape

Defines the shape of the legend item in the TreeMap.

```ts
export type LegendShape =
  | 'Circle'
  | 'Rectangle'
  | 'Triangle'
  | 'Diamond'
  | 'Cross'
  | 'Star'
  | 'HorizontalLine'
  | 'VerticalLine'
  | 'Pentagon'
  | 'InvertedTriangle'
  | 'Image';
```

**Common values:**
- `Circle`
- `Rectangle`
- `Triangle`
- `Diamond`
- `Cross`
- `Star`
- `HorizontalLine`
- `VerticalLine`
- `Pentagon`
- `InvertedTriangle`
- `Image`

**Reference:** [Link](https://ej2.syncfusion.com/angular/documentation/api/treemap/legendshape)

---

### RenderingMode

Defines the rendering directions used to render TreeMap items.

```ts
export type RenderingMode =
  | 'TopRightBottomLeft'
  | 'BottomLeftTopRight'
  | 'BottomRightTopLeft'
  | 'TopLeftBottomRight';
```

**Common values:**
- `TopRightBottomLeft`
- `BottomLeftTopRight`
- `BottomRightTopLeft`
- `TopLeftBottomRight`

**Reference:** [Link](https://ej2.syncfusion.com/angular/documentation/api/treemap/renderingmode)

---

### SelectionMode

Specifies which TreeMap element is selected when the user interacts with the component.

```ts
export type SelectionMode =
  | 'Item'
  | 'Child'
  | 'Parent'
  | 'All';
```

**Common values:**
- `Item` — selects the clicked item
- `Child` — selects child items
- `Parent` — selects the parent group
- `All` — selects the full related hierarchy

**Reference:** [Link](https://ej2.syncfusion.com/angular/documentation/api/treemap/selectionmode)

---

### TreeMapTheme

Defines the built-in theme supported for TreeMap.

```ts
export type TreeMapTheme =
  | 'Material'
  | 'Fabric'
  | 'HighContrastLight'
  | 'Bootstrap'
  | 'MaterialDark'
  | 'FabricDark'
  | 'HighContrast'
  | 'BootstrapDark'
  | 'Bootstrap4'
  | 'Tailwind'
  | 'TailwindDark'
  | 'Tailwind3'
  | 'Tailwind3Dark'
  | 'Bootstrap5'
  | 'Bootstrap5Dark'
  | 'Fluent'
  | 'FluentDark'
  | 'Material3'
  | 'Material3Dark'
  | 'Fluent2'
  | 'Fluent2Dark'
  | 'Fluent2HighContrast';
```

**Common values:**
- `Material`
- `Fabric`
- `HighContrastLight`
- `Bootstrap`
- `MaterialDark`
- `FabricDark`
- `HighContrast`
- `BootstrapDark`
- `Bootstrap4`
- `Tailwind`
- `TailwindDark`
- `Tailwind3`
- `Tailwind3Dark`
- `Bootstrap5`
- `Bootstrap5Dark`
- `Fluent`
- `FluentDark`
- `Material3`
- `Material3Dark`
- `Fluent2`
- `Fluent2Dark`
- `Fluent2HighContrast`

**Reference:** [Link](https://ej2.syncfusion.com/angular/documentation/api/treemap/treemaptheme)

# Color Mapping in Angular TreeMap

## Table of Contents

- [Overview](#overview)
- [Range Color Mapping](#range-color-mapping)
  - [Basic Range Mapping](#basic-range-mapping)
  - [Color Range Examples](#color-range-examples)
- [Equal Color Mapping](#equal-color-mapping)
  - [Category-Based Coloring](#category-based-coloring)
- [Desaturation Color Mapping](#desaturation-color-mapping)
  - [Opacity-Based Coloring](#opacity-based-coloring)
- [Palette Color Mapping](#palette-color-mapping)
  - [Simple Palette Assignment](#simple-palette-assignment)
- [Multiple Gradient Colors](#multiple-gradient-colors)
  - [Gradient Color Mapping](#gradient-color-mapping)
- [Direct Color Assignment](#direct-color-assignment)
  - [Color Value Path](#color-value-path)
- [Color Mapping for Group Headers](#color-mapping-for-group-headers)
  - [Group vs Leaf Coloring](#group-vs-leaf-coloring)
- [Color Mapping Best Practices](#color-mapping-best-practices)
  - [DO: Use Accessible Color Ranges](#do-use-accessible-color-ranges)
  - [DON'T: Use Similar Colors for Different Ranges](#dont-use-similar-colors-for-different-ranges)
  - [DO: Align Colors with Data Meaning](#do-align-colors-with-data-meaning)
  - [DO: Use Sequential Colors for Ranges](#do-use-sequential-colors-for-ranges)
  - [Troubleshooting](#troubleshooting)
- [Final Notes](#final-notes)

## Overview

Color mapping in the Syncfusion Angular TreeMap is a built-in feature set used to customize the fill color of leaf items based on numeric ranges, exact values, opacity variation, palette assignment, gradients, or a color field from the data source.

The original content was mostly correct, but a few definitions and examples needed to be adjusted so they better match the built-in TreeMap API and modern Angular usage.

## Range Color Mapping

Range color mapping is a built-in TreeMap coloring mode used to apply colors based on numeric value intervals. It works by binding a numeric field to `rangeColorValuePath` and defining `from`, `to`, and `color` entries inside `leafItemSettings.colorMapping`.

### Basic Range Mapping

```typescript
import { Component, signal } from '@angular/core';
import { TreeMapModule } from '@syncfusion/ej2-angular-treemap';

@Component({
  selector: 'app-treemap',
  standalone: true,
  imports: [TreeMapModule],
  template: `
    <ejs-treemap
      id="treemap-container"
      [dataSource]="data()"
      weightValuePath="Sales"
      rangeColorValuePath="Profit"
      [leafItemSettings]="leafItemSettings">
    </ejs-treemap>
  `
})
export class TreeMapComponent {
  data = signal([
    { Product: 'A', Sales: 15000, Profit: 35 },
    { Product: 'B', Sales: 12000, Profit: 55 },
    { Product: 'C', Sales: 8000, Profit: 75 },
    { Product: 'D', Sales: 10000, Profit: 20 }
  ]);

  leafItemSettings = {
    labelPath: 'Product',
    gap: 4,
    border: { color: '#ffffff', width: 1 },
    colorMapping: [
      { from: 0, to: 25, color: '#a6c84c' },
      { from: 25, to: 50, color: '#f1b41d' },
      { from: 50, to: 75, color: '#f18f17' },
      { from: 75, to: 100, color: '#c1272d' }
    ]
  };
}
```

**Key Properties:**

- `rangeColorValuePath`: The numeric field used for evaluating range-based colors.
- `from`: The lower boundary of the color range.
- `to`: The upper boundary of the color range.
- `color`: The fill color applied when the data value falls inside that range.

### Color Range Examples

```typescript
leafItemSettings = {
  labelPath: 'Product',
  colorMapping: [
    { from: -10, to: 0, color: '#0066cc' },
    { from: 0, to: 15, color: '#3399ff' },
    { from: 15, to: 25, color: '#66cc00' },
    { from: 25, to: 40, color: '#ff6600' },
    { from: 40, to: 60, color: '#cc0000' }
  ]
};
```

This is useful for temperature bands, risk scoring, sales tiers, or any metric where the numeric scale itself carries meaning.

## Equal Color Mapping

Equal color mapping is another built-in TreeMap coloring mode. It is used when the color should depend on exact category values rather than numeric intervals.

### Category-Based Coloring

```typescript
import { Component, signal } from '@angular/core';
import { TreeMapModule } from '@syncfusion/ej2-angular-treemap';

@Component({
  selector: 'app-treemap',
  standalone: true,
  imports: [TreeMapModule],
  template: `
    <ejs-treemap
      [dataSource]="data()"
      weightValuePath="Sales"
      equalColorValuePath="Category"
      [leafItemSettings]="leafItemSettings">
    </ejs-treemap>
  `
})
export class TreeMapComponent {
  data = signal([
    { Product: 'Laptop', Sales: 15000, Category: 'Electronics' },
    { Product: 'Chair', Sales: 8000, Category: 'Furniture' },
    { Product: 'Shirt', Sales: 5000, Category: 'Clothing' }
  ]);

  leafItemSettings = {
    labelPath: 'Product',
    gap: 4,
    border: { color: '#ffffff', width: 1 },
    colorMapping: [
      { value: 'Electronics', color: '#0066cc' },
      { value: 'Furniture', color: '#66cc00' },
      { value: 'Clothing', color: '#ff6600' }
    ]
  };
}
```

**Key Properties:**

- `equalColorValuePath`: The field that contains the exact value to compare.
- `value`: The specific category or value to match.
- `color`: The fill color assigned to matched items.

This is the best option for category-based visuals such as brand, status, department, or product type.

## Desaturation Color Mapping

Desaturation color mapping is built in and uses `minOpacity` and `maxOpacity` to show value intensity. It still works through the color-mapping configuration, but instead of switching between very different colors, it varies opacity across the range.

### Opacity-Based Coloring

```typescript
import { Component, signal } from '@angular/core';
import { TreeMapModule } from '@syncfusion/ej2-angular-treemap';

@Component({
  selector: 'app-treemap',
  standalone: true,
  imports: [TreeMapModule],
  template: `
    <ejs-treemap
      [dataSource]="data()"
      weightValuePath="Sales"
      rangeColorValuePath="Profit"
      [leafItemSettings]="leafItemSettings">
    </ejs-treemap>
  `
})
export class TreeMapComponent {
  data = signal([
    { Product: 'A', Sales: 15000, Profit: 10 },
    { Product: 'B', Sales: 12000, Profit: 30 },
    { Product: 'C', Sales: 8000, Profit: 60 },
    { Product: 'D', Sales: 10000, Profit: 90 }
  ]);

  leafItemSettings = {
    labelPath: 'Product',
    gap: 4,
    border: { color: '#ffffff', width: 1 },
    colorMapping: [
      {
        from: 0,
        to: 100,
        color: '#0066cc',
        minOpacity: 0.2,
        maxOpacity: 1
      }
    ]
  };
}
```

**Key Properties:**

- `color`: The base color used for the opacity transition.
- `minOpacity`: The opacity used near the low end of the range.
- `maxOpacity`: The opacity used near the high end of the range.

**Use Case:** Items with lower profit or lower score appear lighter, while higher values appear more visually prominent.

## Palette Color Mapping

Palette coloring is built in, but it is not the same as range or equal color mapping. Instead of comparing values, TreeMap cycles through the colors you provide in the `palette` property.

### Simple Palette Assignment

```typescript
import { Component, signal } from '@angular/core';
import { TreeMapModule } from '@syncfusion/ej2-angular-treemap';

@Component({
  selector: 'app-treemap',
  standalone: true,
  imports: [TreeMapModule],
  template: `
    <ejs-treemap
      [dataSource]="data()"
      weightValuePath="Sales"
      [palette]="palette"
      [leafItemSettings]="leafItemSettings">
    </ejs-treemap>
  `
})
export class TreeMapComponent {
  data = signal([
    { Product: 'A', Sales: 15000 },
    { Product: 'B', Sales: 12000 },
    { Product: 'C', Sales: 8000 },
    { Product: 'D', Sales: 10000 },
    { Product: 'E', Sales: 9000 }
  ]);

  palette = ['#0066cc', '#66cc00', '#ff6600', '#cc0000', '#9933ff'];

  leafItemSettings = {
    labelPath: 'Product',
    gap: 4,
    border: { color: '#ffffff', width: 1 }
  };
}
```

**Behavior:** TreeMap assigns colors from the palette in sequence across the rendered items.

This is ideal when you simply want quick visual distinction between items without a value-based mapping rule.

## Multiple Gradient Colors

This is a built-in TreeMap capability. Syncfusion supports giving an array of colors inside a `colorMapping` entry so the component can apply a gradient-like effect within the configured range.

### Gradient Color Mapping

```typescript
import { Component, signal } from '@angular/core';
import { TreeMapModule } from '@syncfusion/ej2-angular-treemap';

@Component({
  selector: 'app-treemap',
  standalone: true,
  imports: [TreeMapModule],
  template: `
    <ejs-treemap
      [dataSource]="data()"
      weightValuePath="Sales"
      rangeColorValuePath="Score"
      [leafItemSettings]="leafItemSettings">
    </ejs-treemap>
  `
})
export class TreeMapComponent {
  data = signal([
    { Product: 'A', Sales: 15000, Score: 10 },
    { Product: 'B', Sales: 12000, Score: 35 },
    { Product: 'C', Sales: 8000, Score: 65 },
    { Product: 'D', Sales: 10000, Score: 90 }
  ]);

  leafItemSettings = {
    labelPath: 'Product',
    gap: 4,
    border: { color: '#ffffff', width: 1 },
    colorMapping: [
      { from: 0, to: 50, color: ['#3398db', '#7cb5ec', '#ffd700'] },
      { from: 50, to: 100, color: ['#ffd700', '#ff8c42', '#d32f2f'] }
    ]
  };
}
```

Colors transition across the provided color array for values within each range.

## Direct Color Assignment

Direct color assignment is also built in. If your data source already contains the final color for each item, bind that field to `colorValuePath`.

### Color Value Path

```typescript
import { Component, signal } from '@angular/core';
import { TreeMapModule } from '@syncfusion/ej2-angular-treemap';

@Component({
  selector: 'app-treemap',
  standalone: true,
  imports: [TreeMapModule],
  template: `
    <ejs-treemap
      [dataSource]="data()"
      weightValuePath="Sales"
      colorValuePath="Color"
      [leafItemSettings]="leafItemSettings">
    </ejs-treemap>
  `
})
export class TreeMapComponent {
  data = signal([
    { Product: 'A', Sales: 15000, Color: '#0066cc' },
    { Product: 'B', Sales: 12000, Color: '#66cc00' },
    { Product: 'C', Sales: 8000, Color: '#ff6600' }
  ]);

  leafItemSettings = {
    labelPath: 'Product',
    gap: 4,
    border: { color: '#ffffff', width: 1 }
  };
}
```

**When to use:** Use this when color is already part of the dataset and should not be derived by TreeMap rules.

## Color Mapping for Group Headers

This section should be defined more precisely: TreeMap supports styling for group headers, but this is not the same as leaf-item color mapping. Group styling is usually applied through `levels`, while leaf-item styling is controlled through `leafItemSettings`, `palette`, or color mapping properties.

### Group vs Leaf Coloring

```typescript
import { Component, signal } from '@angular/core';
import { TreeMapModule } from '@syncfusion/ej2-angular-treemap';

@Component({
  selector: 'app-treemap',
  standalone: true,
  imports: [TreeMapModule],
  template: `
    <ejs-treemap
      [dataSource]="data()"
      weightValuePath="Value"
      [levels]="levels()"
      [leafItemSettings]="leafItemSettings">
    </ejs-treemap>
  `
})
export class TreeMapComponent {
  data = signal([
    { Category: 'Electronics', Item: 'Laptop', Value: 25 },
    { Category: 'Electronics', Item: 'Phone', Value: 20 },
    { Category: 'Furniture', Item: 'Chair', Value: 15 },
    { Category: 'Furniture', Item: 'Table', Value: 18 }
  ]);

  levels = signal([
    {
      groupPath: 'Category',
      fill: '#dbeafe',
      border: { color: '#93c5fd', width: 1 }
    }
  ]);

  leafItemSettings = {
    labelPath: 'Item',
    fill: '#0066cc',
    gap: 4,
    border: { color: '#ffffff', width: 1 }
  };
}
```

**Clarified Behavior:** Group headers are styled through `levels`, while leaf items are styled through `leafItemSettings` and the built-in color mechanisms.

## Color Mapping Best Practices

### DO: Use Accessible Color Ranges

Choose colors with enough contrast so users can distinguish them clearly.

```typescript
leafItemSettings = {
  labelPath: 'Product',
  colorMapping: [
    { from: 0, to: 15, color: '#0066cc' },
    { from: 15, to: 50, color: '#ff6600' }
  ]
};
```

### DON'T: Use Similar Colors for Different Ranges

Avoid ranges that are visually too close together, because users may not be able to distinguish them quickly.

```typescript
leafItemSettings = {
  labelPath: 'Product',
  colorMapping: [
    { from: 0, to: 50, color: '#0066cc' },
    { from: 50, to: 100, color: '#0055bb' }
  ]
};
```

### DO: Align Colors with Data Meaning

Use color semantics that support the data meaning.

```typescript
leafItemSettings = {
  labelPath: 'Product',
  colorMapping: [
    { from: 0, to: 40, color: '#cc0000' },
    { from: 40, to: 80, color: '#ffcc00' },
    { from: 80, to: 100, color: '#00cc00' }
  ]
};
```

### DO: Use Sequential Colors for Ranges

For progressive values such as score, revenue, density, or completion, use a visually ordered sequence.

```typescript
leafItemSettings = {
  labelPath: 'Product',
  colorMapping: [
    {
      from: 0,
      to: 100,
      color: ['#e8f4f8', '#b3d9e6', '#7eb8d4', '#5a9bc0']
    }
  ]
};
```

### Troubleshooting

**Issue:** Color mapping is not applying.

**Updated Definition:** In Syncfusion TreeMap, range and equal mapping are commonly configured through `leafItemSettings.colorMapping`. Make sure the correct value path is bound at the TreeMap level and the field exists in the data source.

```typescript
<ejs-treemap
  [dataSource]="data()"
  weightValuePath="Sales"
  rangeColorValuePath="Profit"
  [leafItemSettings]="leafItemSettings">
</ejs-treemap>
```

**Issue:** All items show the same color.

**Possible Causes:**

- All values fall into the same defined range.
- Exact match values do not match the `value` entries in equal mapping.
- `palette` is being used when you expected rule-based mapping.
- `colorValuePath` points to the wrong field name.

```typescript
leafItemSettings = {
  labelPath: 'Product',
  colorMapping: [
    { from: 0, to: 100, color: '#0066cc' }
  ]
};
```

**Issue:** Colors appear washed out.

**Updated Definition:** This is expected if `minOpacity` is too low. Increase the minimum opacity or use stronger base colors.

```typescript
leafItemSettings = {
  labelPath: 'Product',
  colorMapping: [
    {
      from: 0,
      to: 100,
      color: '#0066cc',
      minOpacity: 0.5,
      maxOpacity: 1
    }
  ]
};
```

## Final Notes

- Keep `TreeMapAllModule` only if you intentionally want the full bundled module style shown in some documentation samples. For focused standalone components, `TreeMapModule` is usually cleaner.
- Do not remove palette, gradient, direct color binding, or desaturation from the document because they are built into the Syncfusion TreeMap component.
- The main correction is not feature removal, but using the right built-in configuration pattern and clearer definitions.

# Data Binding in Angular TreeMap

## Table  of Contents

- [Overview](#overview)
- [Flat Collection Binding](#flat-collection-binding)
  - [Basic Flat Collection](#basic-flat-collection)
  - [Weighted Collection](#weighted-collection)
- [Hierarchical Collection Binding](#hierarchical-collection-binding)
  - [Two-Level Hierarchy](#two-level-hierarchy)
  - [Multi-Level Hierarchy (3+ Levels)](#multi-level-hierarchy-3-levels)
- [Data Source Properties Mapping](#data-source-properties-mapping)
- [Dynamic Data Updates](#dynamic-data-updates)
  - [Recommended Angular Update Pattern](#recommended-angular-update-pattern)
- [Structured Hierarchical Objects](#structured-hierarchical-objects)
  - [Nested Source Example](#nested-source-example)
  - [Flatten Before Binding](#flatten-before-binding)
- [Data Format Best Practices](#data-format-best-practices)
  - [DO: Clear Field Names](#do-clear-field-names)
  - [DON'T: Ambiguous Field Names](#dont-ambiguous-field-names)
  - [DO: Consistent Data Types](#do-consistent-data-types)
  - [DON'T: Mixed Data Types](#dont-mixed-data-types)
- [Troubleshooting](#troubleshooting)

## Overview

The Syncfusion Angular TreeMap binds data through the `dataSource` property. In practice, TreeMap rendering is driven by a collection of items plus one required numeric field mapped through `weightValuePath`. You can bind simple flat collections directly, and you can visualize grouped or hierarchical relationships by configuring `levels` with `groupPath` fields over the bound data.


## Flat Collection Binding

Use a flat collection when your dataset is a single list of items and each rectangle is represented directly by one data object.

### Basic Flat Collection

```typescript
import { Component, signal } from '@angular/core';
import { TreeMapModule } from '@syncfusion/ej2-angular-treemap';

@Component({
  selector: 'app-treemap',
  standalone: true,
  imports: [TreeMapModule],
  template: `
    <ejs-treemap
      id="treemap-container"
      [dataSource]="data()"
      weightValuePath="Size"
      [leafItemSettings]="leafItemSettings">
    </ejs-treemap>
  `
})
export class TreeMapComponent {
  data = signal([
    { Item: 'Laptop', Size: 150 },
    { Item: 'Phone', Size: 200 },
    { Item: 'Tablet', Size: 100 },
    { Item: 'Watch', Size: 50 }
  ]);

  leafItemSettings = {
    labelPath: 'Item',
    gap: 4,
    border: { color: '#ffffff', width: 1 }
  };
}
```

### Weighted Collection

Use `weightValuePath` to specify the numeric field that determines the area of each leaf item.

```typescript
import { Component, signal } from '@angular/core';
import { TreeMapModule } from '@syncfusion/ej2-angular-treemap';

@Component({
  selector: 'app-treemap',
  standalone: true,
  imports: [TreeMapModule],
  template: `
    <ejs-treemap
      id="treemap-container"
      [dataSource]="data()"
      weightValuePath="Sales">
    </ejs-treemap>
  `
})
export class TreeMapComponent {
    data = signal([
        { Product: 'A', Sales: 15000, Category: 'Electronics' },
        { Product: 'B', Sales: 12000, Category: 'Electronics' },
        { Product: 'C', Sales: 8000, Category: 'Furniture' }
      ]);

}
```

**Key Point:** Items with larger numeric values in the `weightValuePath` field render as larger rectangles.

## Hierarchical Collection Binding

For TreeMap, hierarchy is commonly represented by grouping fields in the data source and then mapping those fields with `levels` and `groupPath`. This means the data is often still a flat array, but TreeMap renders it as grouped hierarchy.

### Two-Level Hierarchy

```typescript
import { Component, signal } from '@angular/core';
import { TreeMapModule } from '@syncfusion/ej2-angular-treemap';

@Component({
  selector: 'app-treemap',
  standalone: true,
  imports: [TreeMapModule],
  template: `
    <ejs-treemap
      [dataSource]="data()"
      weightValuePath="Value"
      [levels]="levels"
      [leafItemSettings]="leafItemSettings">
    </ejs-treemap>
  `
})
export class TreeMapComponent {
  data = signal([
    { Region: 'North America', Country: 'United States', Value: 25460 },
    { Region: 'North America', Country: 'Mexico', Value: 1286 },
    { Region: 'Europe', Country: 'Germany', Value: 3846 },
    { Region: 'Europe', Country: 'France', Value: 2781 }
  ]);

  levels = [
    { groupPath: 'Region' },
    { groupPath: 'Country' }
  ];

  leafItemSettings = {
    labelPath: 'Country',
    gap: 4,
    border: { color: '#ffffff', width: 1 }
  };
}
```

### Multi-Level Hierarchy (3+ Levels)

```typescript
import { Component, signal } from '@angular/core';
import { TreeMapModule } from '@syncfusion/ej2-angular-treemap';

@Component({
  selector: 'app-treemap',
  standalone: true,
  imports: [TreeMapModule],
  template: `
    <ejs-treemap
      [dataSource]="data()"
      weightValuePath="Value"
      [levels]="levels"
      [leafItemSettings]="leafItemSettings">
    </ejs-treemap>
  `
})
export class TreeMapComponent {
  data = signal([
    { Continent: 'North America', Region: 'Canada', Country: 'Toronto', Value: 500 },
    { Continent: 'North America', Region: 'USA', Country: 'California', Value: 800 },
    { Continent: 'Europe', Region: 'Western', Country: 'France', Value: 600 }
  ]);

  levels = [
    { groupPath: 'Continent', headerFormat: '${Continent}' },
    { groupPath: 'Region', headerFormat: '${Region}' },
    { groupPath: 'Country', headerFormat: '${Country}' }
  ];

  leafItemSettings = {
    labelPath: 'Country',
    gap: 4,
    border: { color: '#ffffff', width: 1 }
  };
}
```

**Clarified Definition:** In TreeMap, this is still typically a grouped data-source approach. The hierarchy is rendered from field mappings, not from a TreeView-style recursive UI binding pattern.

## Data Source Properties Mapping

Map your data fields carefully to the TreeMap properties that control size, grouping, labels, and optional color behavior.

```typescript
import { Component, signal } from '@angular/core';
import { TreeMapModule } from '@syncfusion/ej2-angular-treemap';

@Component({
  selector: 'app-treemap',
  standalone: true,
  imports: [TreeMapModule],
  template: `
    <ejs-treemap
      [dataSource]="data()"
      weightValuePath="Sales"
      colorValuePath="Color"
      [levels]="levels"
      [leafItemSettings]="leafItemSettings">
    </ejs-treemap>
  `
})
export class TreeMapComponent {
  data = signal([
    { Department: 'Electronics', Product: 'Laptop', Sales: 15000, Color: '#2563eb' },
    { Department: 'Electronics', Product: 'Phone', Sales: 12000, Color: '#16a34a' },
    { Department: 'Furniture', Product: 'Chair', Sales: 8000, Color: '#ea580c' }
  ]);

  levels = [
    { groupPath: 'Department' }
  ];

  leafItemSettings = {
    labelPath: 'Product',
    gap: 4,
    border: { color: '#ffffff', width: 1 }
  };
}
```

**Common mappings:**

- `dataSource`: The collection bound to the TreeMap.
- `weightValuePath`: The numeric field that controls leaf size.
- `labelPath` in `leafItemSettings`: The field displayed as the leaf label.
- `groupPath` in `levels`: The field used to form grouped hierarchy.
- `colorValuePath`: Optional direct color field from the data source.
- `equalColorValuePath`: Optional field used for exact-match color mapping.
- `rangeColorValuePath`: Optional field used for numeric range color mapping.

**Important:** Do not treat `colorValuePath`, `equalColorValuePath`, and `rangeColorValuePath` as if they all need to be enabled together. They represent different coloring strategies and should be used intentionally.

## Dynamic Data Updates

TreeMap data can be updated after initialization. In Angular, the cleanest approach is to replace the bound collection reference. This works well with Signals and keeps the update flow declarative.

### Recommended Angular Update Pattern

```typescript
import { Component, signal, ViewChild } from '@angular/core';
import { TreeMapModule } from '@syncfusion/ej2-angular-treemap';

@Component({
  selector: 'app-treemap',
  standalone: true,
  imports: [TreeMapModule],
  template: `
    <button type="button" (click)="updateData()">Update Data</button>

    <ejs-treemap
      #treemap
      id="treemap-container"
      [dataSource]="data()"
      weightValuePath="Value"
      [leafItemSettings]="leafItemSettings">
    </ejs-treemap>
  `
})
export class TreeMapComponent {
  treemap = ViewChild('treemap');

  data = signal([
    { Item: 'A', Value: 100 },
    { Item: 'B', Value: 200 }
  ]);

  leafItemSettings = {
    labelPath: 'Item',
    gap: 4,
    border: { color: '#ffffff', width: 1 }
  };

  updateData(): void {
    this.data.set([
      { Item: 'A', Value: 150 },
      { Item: 'B', Value: 250 },
      { Item: 'C', Value: 180 }
    ]);

    const instance = this.treemap();
    if (instance) {
      instance.refresh();
    }
  }
}
```

**Updated Definition:** If your Angular wrapper already reacts properly to a new array reference, a manual `refresh()` may not always be necessary. It is still reasonable to keep it when you want to force immediate redraw behavior after imperative changes.

## Structured Hierarchical Objects

If your source data is deeply nested with `children` arrays, that structure is not the most TreeMap-friendly binding format for grouped `levels` rendering. Instead of binding the nested structure directly as-is, preprocess it into a flattened collection that contains the grouping fields TreeMap expects.

### Nested Source Example

```typescript
nestedData = [
  {
    id: '1',
    name: 'Electronics',
    children: [
      { id: '1a', name: 'Laptops', value: 150 },
      { id: '1b', name: 'Phones', value: 200 }
    ]
  },
  {
    id: '2',
    name: 'Furniture',
    children: [
      { id: '2a', name: 'Chairs', value: 100 },
      { id: '2b', name: 'Tables', value: 120 }
    ]
  }
];
```

### Flatten Before Binding

```typescript
import { Component, computed, signal } from '@angular/core';
import { TreeMapModule } from '@syncfusion/ej2-angular-treemap';

interface ChildItem {
  id: string;
  name: string;
  value: number;
}

interface CategoryItem {
  id: string;
  name: string;
  children: ChildItem[];
}

interface FlattenedItem {
  CategoryId: string;
  Category: string;
  ItemId: string;
  Item: string;
  Value: number;
}

@Component({
  selector: 'app-treemap',
  standalone: true,
  imports: [TreeMapModule],
  template: `
    <ejs-treemap
      id="treemap-container"
      [dataSource]="flattenedData()"
      weightValuePath="Value"
      [levels]="levels"
      [leafItemSettings]="leafItemSettings">
    </ejs-treemap>
  `,
  styles: [`
    :host {
      display: block;
      padding: 12px;
      box-sizing: border-box;
    }

    #treemap-container {
      display: block;
      width: 100%;
      height: 500px;
    }
  `]
})
export class TreeMapComponent {
  public nestedData = signal<CategoryItem[]>([
    {
      id: '1',
      name: 'Electronics',
      children: [
        { id: '1a', name: 'Laptops', value: 150 },
        { id: '1b', name: 'Phones', value: 200 }
      ]
    },
    {
      id: '2',
      name: 'Furniture',
      children: [
        { id: '2a', name: 'Chairs', value: 100 },
        { id: '2b', name: 'Tables', value: 120 }
      ]
    }
  ]);

  public flattenedData = computed<FlattenedItem[]>(() => {
    const result: FlattenedItem[] = [];
    const categories = this.nestedData();

    for (const category of categories) {
      for (const child of category.children) {
        result.push({
          CategoryId: category.id,
          Category: category.name,
          ItemId: child.id,
          Item: child.name,
          Value: child.value
        });
      }
    }

    return result;
  });

  public levels = [
    {
      groupPath: 'Category',
      headerFormat: '${Category}',
      fill: '#dbeafe',
      border: { color: '#93c5fd', width: 1 }
    }
  ];

  public leafItemSettings = {
    labelPath: 'Item',
    gap: 4,
    border: { color: '#ffffff', width: 1 }
  };
}
```

**Updated Definition:** Keep the nested source if that is how your application stores data, but transform it into a flat TreeMap input model before binding.

## Data Format Best Practices

### DO: Clear Field Names

```typescript
{ Department: 'Sales', Employee: 'John', Revenue: 5000 }
```

Use descriptive property names so that `weightValuePath`, `groupPath`, `labelPath`, and optional color mappings are easy to understand and maintain.

### DON'T: Ambiguous Field Names

```typescript
{ d: 'Sales', e: 'John', r: 5000 }
```

Short unclear field names make configuration harder to read and easier to misconfigure.

### DO: Consistent Data Types

```typescript
{ Item: 'Product A', Sales: 15000 }
{ Item: 'Product B', Sales: 12000 }
```

The field mapped to `weightValuePath` should remain numeric for all items.

### DON'T: Mixed Data Types

```typescript
{ Item: 'Product A', Sales: 15000 }
{ Item: 'Product B', Sales: '12000' }
```

Avoid mixing numbers and strings in the same mapped field. TreeMap size calculations should use a consistent numeric type.

## Troubleshooting

**Issue:** TreeMap not rendering with data

**Solution:** Ensure `weightValuePath` points to an existing numeric field.

```typescript
<ejs-treemap
  [dataSource]="data()"
  weightValuePath="Sales">
</ejs-treemap>
```

**Issue:** Hierarchy not displaying correctly

**Solution:** Verify that every configured `groupPath` exists in the bound data items and that the field names are consistent.

```typescript
levels = [
  { groupPath: 'Region' },
  { groupPath: 'Country' }
];
```

**Issue:** Labels are empty

**Solution:** Check that `leafItemSettings.labelPath` matches a valid field from the data source.

```typescript
leafItemSettings = {
  labelPath: 'Item'
};
```

**Issue:** Data changes not reflecting in TreeMap

**Solution:** Replace the bound array reference, and if needed, call `refresh()` after imperative updates.

```typescript
this.data.set(newData);
this.treemap()?.refresh();
```

# Drilldown and Navigation in Angular TreeMap

## Table of Contents

- [Overview](#overview)
  - [What was corrected without removing built-in Syncfusion features](#what-was-corrected-without-removing-built-in-syncfusion-features)
- [Enabling Drilldown](#enabling-drilldown)
  - [Basic Drilldown Setup](#basic-drilldown-setup)
- [Parent-Child Navigation](#parent-child-navigation)
  - [Understanding Navigation Flow](#understanding-navigation-flow)
  - [Three-Level Hierarchy Example](#three-level-hierarchy-example)
  - [Header Customization at Each Level](#header-customization-at-each-level)
- [On-Demand Data Loading](#on-demand-data-loading)
  - [Enable DrillDownView](#enable-drilldownview)
  - [Data Structure with On-Demand](#data-structure-with-on-demand)
- [Breadcrumb Navigation](#breadcrumb-navigation)
  - [Enable Breadcrumb](#enable-breadcrumb)
  - [Breadcrumb Connector Options](#breadcrumb-connector-options)
  - [Click Breadcrumb to Navigate Up](#click-breadcrumb-to-navigate-up)
- [Back Navigation](#back-navigation)
  - [Programmatic Back Navigation](#programmatic-back-navigation)
  - [Reset to Root Using Angular State](#reset-to-root-using-angular-state)
  - [Root-Level Detection](#root-level-detection)
- [Drill Down Events](#drill-down-events)
  - [Listen to Drill Down Actions](#listen-to-drill-down-actions)
  - [Event Properties](#event-properties)
  - [Track Navigation History](#track-navigation-history)
- [Best Practices](#best-practices)
  - [DO: Use Meaningful Header Formats](#do-use-meaningful-header-formats)
  - [DON'T: Use Unclear Headers](#dont-use-unclear-headers)
  - [DO: Include Aggregated Totals](#do-include-aggregated-totals)
  - [DO: Provide Visual Feedback](#do-provide-visual-feedback)
  - [DO: Limit Hierarchy Depth](#do-limit-hierarchy-depth)
  - [Troubleshooting](#troubleshooting)

## Overview

Drilldown in the Syncfusion Angular TreeMap is a built-in navigation feature that lets users move from a higher grouping level to a lower grouping level by clicking items. The original content was mostly correct, but a few definitions and event names needed to be adjusted to better match the built-in Angular TreeMap API.

### What was corrected without removing built-in Syncfusion features

- `TreeMapAllModule` was not removed as a Syncfusion module, but the examples were updated to use `TreeMapModule` only for cleaner standalone Angular usage.
- The drilldown examples were updated to use normal Angular template markup instead of escaped HTML.
- The event names were corrected from `drillDown` and `drillUp` to the documented TreeMap drill events such as `drillStart` and `drillEnd`.
- The back-navigation section was redefined because a public Angular TreeMap `drillUp()` method is not part of the documented API pattern shown for the component. Built-in navigation is primarily handled by clicking the drilled node path and by using breadcrumb support.
- The examples were updated to use modern Angular patterns such as standalone components and Signals.

## Enabling Drilldown

Drilldown is enabled by setting `enableDrillDown` to `true`. TreeMap then lets the user click a rendered group and move into the next hierarchy level.

### Basic Drilldown Setup

```typescript
import { Component, signal } from '@angular/core';
import { TreeMapModule } from '@syncfusion/ej2-angular-treemap';

@Component({
  selector: 'app-treemap',
  standalone: true,
  imports: [TreeMapModule],
  template: `
    <ejs-treemap
      id="treemap-container"
      [dataSource]="data()"
      weightValuePath="Value"
      [enableDrillDown]="true"
      [levels]="levels"
      [leafItemSettings]="leafItemSettings">
    </ejs-treemap>
  `,
  styles: [`
    :host {
      display: block;
      padding: 12px;
      box-sizing: border-box;
    }

    #treemap-container {
      display: block;
      width: 100%;
      height: 520px;
    }
  `]
})
export class TreeMapComponent {
  public data = signal([
    { Region: 'North America', Country: 'United States', Value: 25460 },
    { Region: 'North America', Country: 'Canada', Value: 1841 },
    { Region: 'Europe', Country: 'Germany', Value: 3846 },
    { Region: 'Europe', Country: 'France', Value: 2781 },
    { Region: 'Asia', Country: 'China', Value: 17734 },
    { Region: 'Asia', Country: 'Japan', Value: 4909 }
  ]);

  public levels = [
    { groupPath: 'Region', headerFormat: '${Region}' },
    { groupPath: 'Country', headerFormat: '${Country}' }
  ];

  public leafItemSettings = {
    labelPath: 'Country',
    gap: 4,
    border: { color: '#ffffff', width: 1 }
  };
}
```

**Behavior:** Clicking a region drills into the countries grouped inside that region.

## Parent-Child Navigation

TreeMap drilldown is driven by grouped hierarchy fields configured through `levels`. Each click moves from one grouping layer to the next rendered grouping layer.

### Understanding Navigation Flow

When drilldown is enabled:

1. The initial view renders the current top grouping level.
2. Clicking a parent group drills into the next configured level.
3. The header updates to reflect the current context.
4. Users can move back through the built-in drill navigation path, especially when breadcrumb is enabled.

### Three-Level Hierarchy Example

```typescript
import { Component, signal } from '@angular/core';
import { TreeMapModule } from '@syncfusion/ej2-angular-treemap';

@Component({
  selector: 'app-treemap',
  standalone: true,
  imports: [TreeMapModule],
  template: `
    <ejs-treemap
      id="treemap-container"
      [dataSource]="data()"
      weightValuePath="Value"
      [enableDrillDown]="true"
      [levels]="levels"
      [leafItemSettings]="leafItemSettings">
    </ejs-treemap>
  `
})
export class TreeMapComponent {
  public data = signal([
    { Continent: 'North America', Region: 'Northeast', State: 'New York', Value: 500 },
    { Continent: 'North America', Region: 'Northeast', State: 'Boston', Value: 400 },
    { Continent: 'North America', Region: 'Southwest', State: 'Texas', Value: 600 },
    { Continent: 'Europe', Region: 'Western', State: 'France', Value: 550 }
  ]);

  public levels = [
    { groupPath: 'Continent', headerFormat: '${Continent}' },
    { groupPath: 'Region', headerFormat: '${Region}' },
    { groupPath: 'State', headerFormat: '${State}' }
  ];

  public leafItemSettings = {
    labelPath: 'State',
    gap: 4,
    border: { color: '#ffffff', width: 1 }
  };
}
```

**Navigation Example:**

- Click `North America` to drill into `Northeast` and `Southwest`
- Click `Northeast` to drill into `New York` and `Boston`

### Header Customization at Each Level

You can customize the header text and style per level using `headerFormat` and `headerStyle`.

```typescript
public levels = [
  {
    groupPath: 'Continent',
    headerFormat: 'Continent: ${Continent}',
    headerStyle: { size: '16px', fontWeight: '600' }
  },
  {
    groupPath: 'Region',
    headerFormat: 'Region: ${Region}',
    headerStyle: { size: '14px', fontWeight: '500' }
  },
  {
    groupPath: 'State',
    headerFormat: 'State: ${State}',
    headerStyle: { size: '12px' }
  }
];
```

## On-Demand Data Loading

`drillDownView` is a built-in TreeMap property that changes how child items are rendered during drilldown. Instead of rendering all child items immediately, child nodes are rendered during the drilldown process.

### Enable DrillDownView

```typescript
import { Component, signal } from '@angular/core';
import { TreeMapModule } from '@syncfusion/ej2-angular-treemap';

@Component({
  selector: 'app-treemap',
  standalone: true,
  imports: [TreeMapModule],
  template: `
    <ejs-treemap
      id="treemap-container"
      [dataSource]="data()"
      weightValuePath="Value"
      [enableDrillDown]="true"
      [drillDownView]="true"
      [levels]="levels"
      [leafItemSettings]="leafItemSettings">
    </ejs-treemap>
  `
})
export class TreeMapComponent {
  public data = signal([
    { Region: 'North America', Country: 'United States', Value: 25460 },
    { Region: 'North America', Country: 'Canada', Value: 1841 },
    { Region: 'Europe', Country: 'Germany', Value: 3846 },
    { Region: 'Europe', Country: 'France', Value: 2781 }
  ]);

  public levels = [
    { groupPath: 'Region' },
    { groupPath: 'Country' }
  ];

  public leafItemSettings = {
    labelPath: 'Country',
    gap: 4,
    border: { color: '#ffffff', width: 1 }
  };
}
```

**Use Case:** This is useful when you want the lower-level items to be rendered only as the user drills into the hierarchy.

### Data Structure with On-Demand

The data remains a grouped collection. What changes is how TreeMap renders the drill hierarchy.

```typescript
public data = signal([
  { Region: 'North America', Country: 'United States', Value: 25460 },
  { Region: 'North America', Country: 'Canada', Value: 1841 },
  { Region: 'Europe', Country: 'Germany', Value: 3846 },
  { Region: 'Europe', Country: 'France', Value: 2781 }
]);
```

**Updated Definition:** `drillDownView` does not require a special server-side lazy-loading contract by itself. It changes the initial rendering behavior so that child items are shown during drill interaction rather than all at once up front.

## Breadcrumb Navigation

Breadcrumb support is built in and can be enabled to show the path from the root level to the current drilled level.

### Enable Breadcrumb

```typescript
import { Component, signal } from '@angular/core';
import { TreeMapModule } from '@syncfusion/ej2-angular-treemap';

@Component({
  selector: 'app-treemap',
  standalone: true,
  imports: [TreeMapModule],
  template: `
    <ejs-treemap
      id="treemap-container"
      [dataSource]="data()"
      weightValuePath="Value"
      [enableDrillDown]="true"
      [enableBreadcrumb]="true"
      breadcrumbConnector=" -> "
      [levels]="levels"
      [leafItemSettings]="leafItemSettings">
    </ejs-treemap>
  `
})
export class TreeMapComponent {
  public data = signal([
    { Region: 'North America', Country: 'United States', Value: 25460 },
    { Region: 'North America', Country: 'Canada', Value: 1841 },
    { Region: 'Europe', Country: 'Germany', Value: 3846 },
    { Region: 'Europe', Country: 'France', Value: 2781 }
  ]);

  public levels = [
    { groupPath: 'Region' },
    { groupPath: 'Country' }
  ];

  public leafItemSettings = {
    labelPath: 'Country',
    gap: 4,
    border: { color: '#ffffff', width: 1 }
  };
}
```

### Breadcrumb Connector Options

You can customize the path separator using `breadcrumbConnector`.

```typescript
breadcrumbConnector=" / "
breadcrumbConnector=" -> "
breadcrumbConnector=" :: "
breadcrumbConnector=" | "
```

### Click Breadcrumb to Navigate Up

Built-in breadcrumb support shows the navigation path from the root parent to the current level. This is the recommended built-in way to let users move back to earlier levels without relying on undocumented instance methods.

## Back Navigation

This section needed the biggest correction.

### Programmatic Back Navigation

The earlier sample used a `drillUp()` instance method and a `currentLevel` check, but those are not part of the documented Angular TreeMap API pattern shown for the component examples and events. Because of that, the safer guidance is:

- use built-in breadcrumb navigation for moving upward
- use normal drill interaction to return to earlier levels
- if your application needs a dedicated **Reset to Root** button, recreate the TreeMap view state from Angular rather than calling an undocumented instance API

### Reset to Root Using Angular State

The following example adds a **Reset to Root** button by recreating the TreeMap component through Angular state. This is an application-level workaround, not a special Syncfusion drill-up API.

```typescript
import { ChangeDetectorRef, Component, inject, signal } from '@angular/core';
import { TreeMapModule } from '@syncfusion/ej2-angular-treemap';

@Component({
  selector: 'app-treemap',
  standalone: true,
  imports: [TreeMapModule],
  template: `
    <button type="button" (click)="resetToRoot()">Reset to Root</button>

    @if (showTreeMap()) {
      <ejs-treemap
        [id]="treeMapId()"
        [dataSource]="data()"
        weightValuePath="Value"
        [enableDrillDown]="true"
        [enableBreadcrumb]="true"
        breadcrumbConnector=" -> "
        [levels]="levels"
        [leafItemSettings]="leafItemSettings">
      </ejs-treemap>
    }
  `,
  styles: [`
    :host {
      display: block;
      padding: 12px;
      box-sizing: border-box;
    }

    button {
      margin-bottom: 12px;
      padding: 8px 12px;
      border: 1px solid #cbd5e1;
      background: #ffffff;
      border-radius: 8px;
      cursor: pointer;
    }

    ejs-treemap {
      display: block;
      width: 100%;
      height: 520px;
    }
  `]
})
export class TreeMapComponent {
  private cdr = inject(ChangeDetectorRef);

  public showTreeMap = signal(true);
  public treeMapId = signal('treemap-container-0');

  public data = signal([
    { Continent: 'North America', Region: 'Northeast', State: 'New York', Value: 500 },
    { Continent: 'North America', Region: 'Northeast', State: 'Boston', Value: 400 },
    { Continent: 'North America', Region: 'Southwest', State: 'Texas', Value: 600 },
    { Continent: 'Europe', Region: 'Western', State: 'France', Value: 550 }
  ]);

  public levels = [
    { groupPath: 'Continent', headerFormat: '${Continent}' },
    { groupPath: 'Region', headerFormat: '${Region}' },
    { groupPath: 'State', headerFormat: '${State}', showHeader: false }
  ];

  public leafItemSettings = {
    labelPath: 'State',
    gap: 4,
    border: { color: '#ffffff', width: 1 }
  };

  public resetToRoot(): void {
    this.showTreeMap.set(false);
    this.cdr.detectChanges();

    setTimeout(() => {
      this.treeMapId.set(`treemap-container-${Date.now()}`);
      this.showTreeMap.set(true);
    }, 0);
  }
}
```

### Root-Level Detection

Instead of relying on an undocumented `currentLevel` instance property, keep root-level UI behavior under your own Angular state if you need custom buttons, analytics, or navigation indicators.

**Updated Guidance:** Built-in upward navigation should primarily rely on breadcrumb and drill interaction. For custom app-level controls, use Angular state to recreate or control the view.

## Drill Down Events

The event names in the original content needed correction.

### Listen to Drill Down Actions

Use documented drill events such as `drillStart` and `drillEnd`.

```typescript
import { Component, signal } from '@angular/core';
import {
  TreeMapModule
} from '@syncfusion/ej2-angular-treemap';

@Component({
  selector: 'app-treemap',
  standalone: true,
  imports: [TreeMapModule],
  template: `
    <div class="page">
      <ejs-treemap
        id="treemap-container"
        [dataSource]="data()"
        weightValuePath="Value"
        [enableDrillDown]="true"
        [enableBreadcrumb]="true"
        breadcrumbConnector=" -> "
        [levels]="levels"
        [leafItemSettings]="leafItemSettings"
        (drillStart)="onDrillStart($event)"
        (drillEnd)="onDrillEnd($event)">
      </ejs-treemap>

      <section class="event-panel">
        <h3>Drill Information</h3>

        <div class="info-grid">
          <div class="info-card">
            <div class="label">Current Action</div>
            <div class="value">{{ currentAction() }}</div>
          </div>

          <div class="info-card">
            <div class="label">Current Item</div>
            <div class="value">{{ currentItem() }}</div>
          </div>

          <div class="info-card">
            <div class="label">Current Level</div>
            <div class="value">{{ currentLevel() }}</div>
          </div>

          <div class="info-card">
            <div class="label">Last Updated</div>
            <div class="value">{{ lastUpdated() }}</div>
          </div>
        </div>

        <div class="summary-box">
          <div class="label">Summary</div>
          <p>{{ currentSummary() }}</p>
        </div>

        <div class="history-box">
          <div class="label">Navigation History</div>

          @if (navigationHistory().length > 0) {
            <ul class="history-list">
              @for (entry of navigationHistory(); track $index) {
                <li>{{ entry }}</li>
              }
            </ul>
          } @else {
            <p class="empty-text">No drill actions yet.</p>
          }
        </div>
      </section>
    </div>
  `,
  styles: [`
    :host {
      display: block;
      padding: 12px;
      box-sizing: border-box;
      font-family: Arial, Helvetica, sans-serif;
      color: #111827;
    }

    .page {
      display: grid;
      gap: 16px;
    }

    #treemap-container {
      display: block;
      width: 100%;
      height: 520px;
    }

    .event-panel {
      border: 1px solid #d1d5db;
      border-radius: 12px;
      padding: 16px;
      background: #f9fafb;
    }

    .event-panel h3 {
      margin: 0 0 12px;
      font-size: 18px;
      font-weight: 600;
    }

    .info-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
      gap: 12px;
      margin-bottom: 16px;
    }

    .info-card,
    .summary-box,
    .history-box {
      border: 1px solid #e5e7eb;
      border-radius: 10px;
      background: #ffffff;
      padding: 12px;
    }

    .label {
      font-size: 12px;
      font-weight: 600;
      color: #6b7280;
      text-transform: uppercase;
      letter-spacing: 0.04em;
      margin-bottom: 6px;
    }

    .value {
      font-size: 15px;
      font-weight: 500;
      color: #111827;
      word-break: break-word;
    }

    .summary-box p,
    .empty-text {
      margin: 0;
      color: #374151;
      line-height: 1.5;
    }

    .history-list {
      margin: 0;
      padding-left: 18px;
    }

    .history-list li {
      margin-bottom: 8px;
      color: #111827;
      line-height: 1.5;
    }
  `]
})
export class TreeMapComponent {
  public data = signal([
    { Region: 'North America', Country: 'United States', Value: 25460 },
    { Region: 'North America', Country: 'Canada', Value: 1841 },
    { Region: 'Europe', Country: 'Germany', Value: 3846 },
    { Region: 'Europe', Country: 'France', Value: 2781 }
  ]);

  public levels = [
    { groupPath: 'Region', headerFormat: '${Region}' }
  ];

  public leafItemSettings = {
    labelPath: 'Country',
    gap: 4,
    border: { color: '#ffffff', width: 1 }
  };

  public currentAction = signal('No action yet');
  public currentItem = signal('N/A');
  public currentLevel = signal('N/A');
  public lastUpdated = signal('N/A');
  public currentSummary = signal('Interact with the TreeMap to see drill details here.');
  public navigationHistory = signal<string[]>([]);

  public onDrillStart(args: any): void {
    this.updateDrillText('Drill Start', args);
  }

  public onDrillEnd(args: any): void {
    this.updateDrillText('Drill End', args);
  }

  private updateDrillText(
    action: string,
    args: any
  ): void {
    const details = this.extractDetails(args);
    const time = this.formatTime(new Date());

    this.currentAction.set(action);
    this.currentItem.set(details.item);
    this.currentLevel.set(details.level);
    this.lastUpdated.set(time);
    this.currentSummary.set(
      `${action} happened for "${details.item}" at level "${details.level}" on ${time}.`
    );

    this.navigationHistory.update((history) => [
      ...history,
      `${action} | Item: ${details.item} | Level: ${details.level} | Time: ${time}`
    ]);
  }

  private extractDetails(
    args: any
  ): { item: string; level: string } {
    const eventArgs = args as any;

    const item =
      eventArgs?.item?.groupName ??
      eventArgs?.item?.name ??
      eventArgs?.groupName ??
      eventArgs?.name ??
      eventArgs?.renderItems?.[0]?.groupName ??
      eventArgs?.renderItems?.[0]?.name ??
      'Unknown Item';

    const level =
      this.readLevelFromOrder(eventArgs?.levelOrderName) ??
      this.readLevelFromOrder(eventArgs?.item?.levelOrderName) ??
      this.readLevelFromOrder(eventArgs?.renderItems?.[0]?.levelOrderName) ??
      this.readNumericLevel(eventArgs?.groupIndex) ??
      this.readNumericLevel(eventArgs?.currentLevel) ??
      'Unknown Level';

    return {
      item: String(item),
      level: String(level)
    };
  }

  private readLevelFromOrder(value: unknown): string | null {
    if (typeof value !== 'string' || !value.trim()) {
      return null;
    }

    const parts = value
      .split('#')
      .map((part) => part.trim())
      .filter(Boolean);

    return parts.length ? parts[parts.length - 1] : value;
  }

  private readNumericLevel(value: unknown): string | null {
    if (typeof value === 'number') {
      return `Level ${value}`;
    }

    return null;
  }

  private formatTime(date: Date): string {
    return date.toLocaleString();
  }
}
```

### Event Properties

The safest guidance is to use the documented event types and inspect the event object in your handler. The exact event payload can vary depending on the drill action and version, so the best pattern is to strongly type the handler and log the incoming object during development.

```typescript
public onDrillStart(args: IDrillStartEventArgs): void {
  console.log(args);
}

public onDrillEnd(args: IDrillEndEventArgs): void {
  console.log(args);
}
```

### Track Navigation History

If you need app-level drill history, store it in Angular state from the drill events.

```typescript
import { Component, signal } from '@angular/core';
import {
  TreeMapModule,
  IDrillEndEventArgs
} from '@syncfusion/ej2-angular-treemap';

@Component({
  selector: 'app-treemap',
  standalone: true,
  imports: [TreeMapModule],
  template: `
    <div class="page">
      <ejs-treemap
        id="treemap-container"
        [dataSource]="data()"
        weightValuePath="Value"
        [enableDrillDown]="true"
        [enableBreadcrumb]="true"
        breadcrumbConnector=" -> "
        [levels]="levels"
        [leafItemSettings]="leafItemSettings"
        (drillEnd)="onDrillEnd($event)">
      </ejs-treemap>

      <div class="history-panel">
        <h3>Navigation History</h3>

        @if (navigationHistory().length > 0) {
          <ul class="history-list">
            @for (entry of navigationHistory(); track $index) {
              <li>{{ entry }}</li>
            }
          </ul>
        } @else {
          <p class="empty-text">No drill actions yet.</p>
        }
      </div>
    </div>
  `,
  styles: [`
    :host {
      display: block;
      padding: 12px;
      box-sizing: border-box;
      font-family: Arial, Helvetica, sans-serif;
    }

    .page {
      display: grid;
      gap: 16px;
    }

    #treemap-container {
      display: block;
      width: 100%;
      height: 520px;
    }

    .history-panel {
      border: 1px solid #d1d5db;
      border-radius: 10px;
      padding: 12px;
      background: #f9fafb;
    }

    .history-panel h3 {
      margin: 0 0 12px;
      font-size: 18px;
    }

    .history-list {
      margin: 0;
      padding-left: 18px;
    }

    .history-list li {
      margin-bottom: 8px;
      color: #111827;
      line-height: 1.5;
    }

    .empty-text {
      margin: 0;
      color: #6b7280;
    }
  `]
})
export class TreeMapComponent {
  public data = signal([
    { Region: 'North America', Country: 'United States', Value: 25460 },
    { Region: 'North America', Country: 'Canada', Value: 1841 },
    { Region: 'Europe', Country: 'Germany', Value: 3846 },
    { Region: 'Europe', Country: 'France', Value: 2781 }
  ]);

  public levels = [
    { groupPath: 'Region', headerFormat: '${Region}' }
  ];

  public leafItemSettings = {
    labelPath: 'Country',
    gap: 4,
    border: { color: '#ffffff', width: 1 }
  };

  public navigationHistory = signal<string[]>([]);

  public onDrillEnd(args: IDrillEndEventArgs): void {
    const itemName = this.getDrilledItemName(args);
    const levelName = this.getDrilledLevel(args);
    const timestamp = new Date().toLocaleString();

    this.navigationHistory.update((history) => [
      ...history,
      `Drill completed | Item: ${itemName} | Level: ${levelName} | Time: ${timestamp}`
    ]);
  }

  private getDrilledItemName(args: IDrillEndEventArgs): string {
    const eventArgs = args as any;

    return (
      eventArgs?.groupName ??
      eventArgs?.item?.groupName ??
      eventArgs?.item?.name ??
      eventArgs?.name ??
      eventArgs?.renderItems?.[0]?.groupName ??
      eventArgs?.renderItems?.[0]?.name ??
      'Unknown Item'
    );
  }

  private getDrilledLevel(args: IDrillEndEventArgs): string {
    const eventArgs = args as any;

    const levelOrderName =
      eventArgs?.levelOrderName ??
      eventArgs?.item?.levelOrderName ??
      eventArgs?.renderItems?.[0]?.levelOrderName;

    if (typeof levelOrderName === 'string' && levelOrderName.trim()) {
      const parts = levelOrderName
        .split('#')
        .map((part: string) => part.trim())
        .filter(Boolean);

      return parts.length ? parts[parts.length - 1] : levelOrderName;
    }

    if (typeof eventArgs?.groupIndex === 'number') {
      return `Level ${eventArgs.groupIndex}`;
    }

    if (typeof eventArgs?.currentLevel === 'number') {
      return `Level ${eventArgs.currentLevel}`;
    }

    return 'Unknown Level';
  }
}
```

## Best Practices

### DO: Use Meaningful Header Formats

```typescript
public levels = [
  {
    groupPath: 'Region',
    headerFormat: '${Region}'
  },
  {
    groupPath: 'Country',
    headerFormat: '${Country}'
  }
];
```

Use headers that clearly reflect the current hierarchy level.

### DON'T: Use Unclear Headers

```typescript
public levels = [
  {
    groupPath: 'Region',
    headerFormat: '${Data}'
  }
];
```

Avoid headers that reference unclear or unmapped fields.

### DO: Include Aggregated Totals

If your data already includes aggregate values, surface them through the header format or tooltips.

```typescript
public data = signal([
  { Region: 'North America', Country: 'USA', Value: 25460, RegionTotal: 27301 },
  { Region: 'North America', Country: 'Canada', Value: 1841, RegionTotal: 27301 }
]);

public levels = [
  {
    groupPath: 'Region',
    headerFormat: '${Region}'
  }
];
```

If you want totals visible in the header, make sure the field is available at the level where the header is rendered.

### DO: Provide Visual Feedback

Use built-in breadcrumb support, meaningful headers, and optionally event handlers to update surrounding Angular UI when drilling starts or ends.

```typescript
<ejs-treemap
  [enableDrillDown]="true"
  [enableBreadcrumb]="true"
  (drillStart)="onDrillStart($event)"
  (drillEnd)="onDrillEnd($event)">
</ejs-treemap>
```

### DO: Limit Hierarchy Depth

Keep drill hierarchies manageable.

```typescript
public levels = [
  { groupPath: 'Level1' },
  { groupPath: 'Level2' },
  { groupPath: 'Level3' }
];
```

Three or four levels are usually easier to navigate than very deep drill chains.

### Troubleshooting

**Issue:** Drilldown is not working

**Solution:** Make sure `enableDrillDown` is enabled and each configured `groupPath` exists in the data source.

```typescript
public levels = [
  { groupPath: 'Region' },
  { groupPath: 'Country' }
];
```

**Issue:** Breadcrumb is not showing

**Solution:** Enable both drilldown and breadcrumb.

```typescript
[enableDrillDown]="true"
[enableBreadcrumb]="true"
```

**Issue:** Drill events are not firing

**Solution:** Use the documented drill event names.

```typescript
(drillStart)="onDrillStart($event)"
(drillEnd)="onDrillEnd($event)"
```

**Issue:** Need a custom Back button

**Solution:** Prefer built-in breadcrumb for upward navigation. If you need an application button that returns to the root, recreate the TreeMap through Angular state rather than calling an undocumented instance method.

# Getting Started with Angular TreeMap

This refined version keeps your original section order, corrects a few technical issues, and provides Angular-ready examples that align with current Syncfusion TreeMap usage patterns.

- [Prerequisites](#prerequisites)
- [Installation](#installation)
  - [Step 1: Create an Angular Application](#step-1-create-an-angular-application)
  - [Step 2: Install Syncfusion TreeMap Package](#step-2-install-syncfusion-treemap-package)
- [Module Setup](#module-setup)
  - [Standalone Component (Recommended)](#standalone-component-recommended)
  - [NgModule Setup](#ngmodule-setup)
- [Basic Component Creation](#basic-component-creation)
- [Adding Hierarchy with Levels](#adding-hierarchy-with-levels)
- [Styling Leaf Items](#styling-leaf-items)
- [Running the Application](#running-the-application)
- [Common Setup Issues](#common-setup-issues)
  - [Issue: "Cannot find module" error](#issue-cannot-find-module-error)
  - [Issue: Styles not loading](#issue-styles-not-loading)
  - [Issue: ViewEncapsulation warning](#issue-viewencapsulation-warning)

## Prerequisites

Before setting up the TreeMap component, ensure the following are installed:

- Node.js (LTS version recommended)
- npm
- Angular CLI

## Installation

### Step 1: Create an Angular Application

Create a new Angular application using Angular CLI:

```bash
ng new my-treemap-app
cd my-treemap-app
```

### Step 2: Install Syncfusion TreeMap Package

Install the TreeMap package from npm:

```bash
npm install @syncfusion/ej2-angular-treemap --save
```

> Note: In modern npm versions, `--save` is optional, but keeping it is harmless.

## Module Setup

### Standalone Component (Recommended)

For standalone components, import `TreeMapModule` directly into the component.

```typescript
import { Component, ViewEncapsulation } from '@angular/core';
import { TreeMapModule } from '@syncfusion/ej2-angular-treemap';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [TreeMapModule],
  template: `<ejs-treemap id="treemap-container"></ejs-treemap>`,
  encapsulation: ViewEncapsulation.None
})
export class AppComponent {}
```

### NgModule Setup

For traditional NgModule-based applications, import `TreeMapModule` in the root module.

```typescript
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { TreeMapModule } from '@syncfusion/ej2-angular-treemap';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, TreeMapModule],
  bootstrap: [AppComponent]
})
export class AppModule {}
```

> Important correction: You generally do **not** need to import both `TreeMapModule` and `TreeMapAllModule` together. Use `TreeMapModule` unless you have a specific reason to pull in the aggregate module.

## Basic Component Creation

Create a simple TreeMap component with minimal configuration:

```typescript
import { Component, ViewEncapsulation } from '@angular/core';
import { TreeMapModule } from '@syncfusion/ej2-angular-treemap';

@Component({
  selector: 'app-treemap',
  standalone: true,
  imports: [TreeMapModule],
  encapsulation: ViewEncapsulation.None,
  template: `
    <ejs-treemap
      id="treemap-container"
      style="display: block;"
      height="350px"
      [dataSource]="data"
      weightValuePath="GDP"
      [leafItemSettings]="leafItemSettings">
    </ejs-treemap>
  `
})
export class TreeMapComponent {
  public data = [
    { Country: 'United States', GDP: 25460 },
    { Country: 'China', GDP: 17734 },
    { Country: 'Japan', GDP: 4909 },
    { Country: 'Germany', GDP: 3846 },
    { Country: 'India', GDP: 3287 }
  ];

  public leafItemSettings = {
    labelPath: 'Country'
  };
}
```

This renders a simple TreeMap showing country sizes proportional to their GDP values.

## Adding Hierarchy with Levels

For multi-level hierarchical grouping, configure the `levels` property as an array of level definitions.

```typescript
import { Component, ViewEncapsulation } from '@angular/core';
import { TreeMapModule } from '@syncfusion/ej2-angular-treemap';

@Component({
  selector: 'app-treemap',
  standalone: true,
  imports: [TreeMapModule],
  encapsulation: ViewEncapsulation.None,
  template: `
    <ejs-treemap
      id="treemap-container"
      style="display: block;"
      height="350px"
      [dataSource]="data"
      weightValuePath="Sales"
      [levels]="levels"
      [leafItemSettings]="leafItemSettings">
    </ejs-treemap>
  `
})
export class TreeMapComponent {
  public data = [
    { Region: 'North America', Company: 'Tech Corp', Product: 'Software', Sales: 15000 },
    { Region: 'North America', Company: 'Tech Corp', Product: 'Hardware', Sales: 12000 },
    { Region: 'Europe', Company: 'Global Inc', Product: 'Software', Sales: 10000 },
    { Region: 'Europe', Company: 'Global Inc', Product: 'Services', Sales: 8000 }
  ];

  public levels = [
    {
      groupPath: 'Region',
      headerFormat: '${Region}',
      border: { color: '#000000', width: 0.5 }
    },
    {
      groupPath: 'Company',
      headerFormat: '${Company}',
      border: { color: '#000000', width: 0.5 }
    }
  ];

  public leafItemSettings = {
    labelPath: 'Product',
    border: { color: '#000000', width: 0.5 }
  };
}
```

> Important correction: Using `[levels]="levels"` is the safest and clearest Angular pattern here. It avoids relying on nested configuration markup when a direct object-array configuration is already supported and documented.

## Styling Leaf Items

Customize the appearance of leaf items (lowest-level rectangles) using `leafItemSettings`:

```typescript
public leafItemSettings = {
  labelPath: 'Product',
  labelFormat: '${Product}: ${Sales}',
  fill: '#008cba',
  border: { color: '#000000', width: 2 },
  labelPosition: 'Center',
  showLabels: true,
  opacity: 0.9
};
```

**Common `leafItemSettings` properties:**

- `labelPath`: Field used as the item label
- `labelFormat`: Format string for the label text
- `fill`: Background color for leaf items
- `border`: Border color and width
- `labelPosition`: Label alignment such as `TopLeft`, `TopCenter`, `Center`, and so on
- `showLabels`: Shows or hides labels
- `opacity`: Opacity from `0` to `1`
- `colorMapping`: Applies conditional coloring rules to leaf items
- `labelStyle`: Customizes label text appearance

> Important correction: Use `labelFormat` for formatted labels. Do not replace it with a generic `format` property in this section.

## Running the Application

Start the development server:

```bash
ng serve
```

Then open the Angular app in your browser, typically at:

```text
http://localhost:4200/
```

## Common Setup Issues

### Issue: "Cannot find module" error

**Cause:** The Syncfusion TreeMap package is missing or the dependency install was interrupted.

**Solution:**

```bash
npm install @syncfusion/ej2-angular-treemap
```

If the problem still exists, refresh local dependencies:

```bash
rm -rf node_modules package-lock.json
npm install
```

If you are on Windows PowerShell, use:

```powershell
Remove-Item -Recurse -Force node_modules
Remove-Item package-lock.json
npm install
```

### Issue: Styles not loading

**Cause:** A Syncfusion theme has not been added globally.

**Solution:** Add a global Syncfusion theme import in `src/styles.css` or `src/styles.scss`:

```css
@import '@syncfusion/ej2-angular-treemap/styles/material.css';
```

You can also use another supported theme such as `material3.css`, `fluent.css`, `fluent2.css`, `bootstrap5.css`, `tailwind.css`, or `highcontrast.css`.

> Best practice: Add the theme once at the global styles level. Do not import the same theme repeatedly in multiple components.

### Issue: ViewEncapsulation warning

**Cause:** `ViewEncapsulation.None` is often copied into examples even when it is not strictly required.

**Solution:** Keep `ViewEncapsulation.None` only if you want your component-level style overrides to target Syncfusion’s global CSS classes more easily. It is **not** mandatory just to render the TreeMap.

Minimal example without changing encapsulation:

```typescript
import { Component } from '@angular/core';
import { TreeMapModule } from '@syncfusion/ej2-angular-treemap';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [TreeMapModule],
  template: `<ejs-treemap id="treemap-container"></ejs-treemap>`
})
export class AppComponent {}
```

---

## Final Technical Review Summary

- The original structure was good, but importing both `TreeMapModule` and `TreeMapAllModule` together was unnecessary.
- The hierarchy example is more reliable when written with `[levels]="levels"` instead of nested level markup.
- `labelFormat` is the correct property name for formatted leaf labels.
- Theme CSS should be loaded globally to avoid rendering and styling confusion.
- `ViewEncapsulation.None` is optional, not a hard requirement.

# Internationalization in Angular TreeMap

## Table of Contents

- [Right-to-Left (RTL) Support](#right-to-left-rtl-support)
  - [Enable RTL](#enable-rtl)
- [Render Direction Configuration](#render-direction-configuration)
  - [Render Direction Options](#render-direction-options)
  - [RTL with Different Render Directions](#rtl-with-different-render-directions)
- [Locale Configuration](#locale-configuration)
  - [Supported Locales](#supported-locales)
  - [Set Locale](#set-locale)
- [Number Formatting](#number-formatting)
  - [Number Format Property](#number-format-property)
  - [Format Codes](#format-codes)
  - [Custom Format String](#custom-format-string)
- [Date Formatting (if applicable)](#date-formatting-if-applicable)
- [Complete I18N Example](#complete-i18n-example)
- [Language-Specific Labels](#language-specific-labels)
  - [Multilingual Data](#multilingual-data)
- [Currency Formatting by Locale](#currency-formatting-by-locale)
- [Number Grouping by Locale](#number-grouping-by-locale)
- [RTL Breadcrumb Navigation](#rtl-breadcrumb-navigation)
- [Best Practices](#best-practices)
  - [DO: Test with RTL Languages](#do-test-with-rtl-languages)
  - [DON'T: Mix RTL and LTR Without Testing](#dont-mix-rtl-and-ltr-without-testing)
  - [DO: Provide Locale Switcher](#do-provide-locale-switcher)
  - [DO: Use Standard Format Codes](#do-use-standard-format-codes)
  - [DO: Verify Number/Currency Display](#do-verify-numbercurrency-display)
- [Troubleshooting](#troubleshooting)

## Right-to-Left (RTL) Support

The Syncfusion Angular TreeMap includes built-in right-to-left rendering through the `enableRtl` property. This is the correct feature to use for Arabic, Hebrew, and similar RTL languages.

### Enable RTL

```typescript
import { Component, signal } from '@angular/core';
import { TreeMapModule } from '@syncfusion/ej2-angular-treemap';

@Component({
  selector: 'app-treemap',
  standalone: true,
  imports: [TreeMapModule],
  template: `
    <ejs-treemap
      id="treemap-container"
      [dataSource]="data()"
      weightValuePath="Sales"
      [enableRtl]="true"
      [leafItemSettings]="leafItemSettings">
    </ejs-treemap>
  `,
  styles: [`
    #treemap-container {
      display: block;
      width: 100%;
      height: 500px;
    }
  `]
})
export class TreeMapComponent {
  public data = signal([
    { Product: 'منتج أ', Sales: 15000 },
    { Product: 'منتج ب', Sales: 12000 }
  ]);

  public leafItemSettings = {
    labelPath: 'Product',
    gap: 4,
    border: { color: '#ffffff', width: 1 }
  };
}
```

**Effects of `enableRtl`:**

- TreeMap renders in right-to-left mode.
- Data labels, tooltips, and legends respect RTL rendering.
- Legend icon and legend text follow RTL-friendly placement.
- Drilldown breadcrumb text also aligns better for RTL usage when breadcrumb is enabled.

**Corrected Definition:** `enableRtl` controls RTL rendering, but it does not automatically replace `renderDirection`. Layout direction and RTL support should be treated as related but separate settings.

## Render Direction Configuration

`renderDirection` controls how the TreeMap rectangles are laid out visually. It is a built-in layout option and can be used with both LTR and RTL interfaces.

### Render Direction Options

```typescript
<ejs-treemap
  renderDirection="TopLeftBottomRight">
</ejs-treemap>
```

**Available directions:**

- `TopLeftBottomRight`
- `TopRightBottomLeft`
- `BottomRightTopLeft`
- `BottomLeftTopRight`

### RTL with Different Render Directions

Use `enableRtl` for RTL UI behavior, and optionally choose an RTL-friendly `renderDirection` if you want the visual layout flow to begin from the right.

```typescript
<ejs-treemap
  [enableRtl]="true"
  renderDirection="TopRightBottomLeft">
</ejs-treemap>
```

```typescript
<ejs-treemap
  [enableRtl]="true"
  renderDirection="BottomRightTopLeft">
</ejs-treemap>
```

**Corrected Definition:** `renderDirection` is a layout configuration, not a locale switch. It changes visual item placement, while `enableRtl` changes UI rendering behavior.

## Locale Configuration

TreeMap supports localization and globalization through Syncfusion culture APIs and the `locale` property.

### Supported Locales

TreeMap can work with common locales such as:

- `en-US`
- `de`
- `fr`
- `es`
- `ar`
- `he`
- `ja`
- `zh`

**Corrected Definition:** The component can use different locales, but the formatting behavior depends on the culture you set and the locale data available in your application.

### Set Locale

For TreeMap internationalization, the most reliable built-in pattern is:

- use `setCulture()` to change formatting culture
- use `setCurrencyCode()` when currency formatting is involved
- use the TreeMap `locale` property if you want the component instance to explicitly follow a culture value
- use `L10n.load()` only when you actually need localized component text resources

```typescript
import { Component, signal } from '@angular/core';
import { L10n, setCulture, setCurrencyCode } from '@syncfusion/ej2-base';
import { TreeMapModule } from '@syncfusion/ej2-angular-treemap';

L10n.load({
  de: {
    treemap: {
      placeholder: 'Baumkarte'
    }
  },
  ar: {
    treemap: {
      placeholder: 'الخريطة الشجرية'
    }
  }
});

@Component({
  selector: 'app-treemap',
  standalone: true,
  imports: [TreeMapModule],
  template: `
    <ejs-treemap
      [dataSource]="data()"
      weightValuePath="Sales"
      [locale]="currentLocale()"
      [leafItemSettings]="leafItemSettings">
    </ejs-treemap>
  `
})
export class TreeMapComponent {
  public currentLocale = signal('en-US');

  public data = signal([
    { Product: 'Laptop', Sales: 15000.5 },
    { Product: 'Phone', Sales: 12000.25 }
  ]);

  public leafItemSettings = {
    labelPath: 'Product'
  };

  public setLocale(locale: string): void {
    this.currentLocale.set(locale);
    setCulture(locale);

    if (locale === 'de') {
      setCurrencyCode('EUR');
    } else if (locale === 'ar') {
      setCurrencyCode('SAR');
    } else {
      setCurrencyCode('USD');
    }
  }
}
```

## Number Formatting

TreeMap supports culture-aware text formatting through the built-in `format` property.

### Number Format Property

```typescript
<ejs-treemap
  [dataSource]="data"
  weightValuePath="Sales"
  format="n2"
  [useGroupingSeparator]="true">
</ejs-treemap>
```

```typescript
data = [
  { Product: 'A', Sales: 15000.5 },
  { Product: 'B', Sales: 12000.25 }
];
```

**Behavior:**

- `en-US`: `15,000.50`
- `de`: `15.000,50`
- `fr`: `15 000,50`

### Format Codes

The built-in `format` property accepts standard global format strings.

- `n` → number
- `n2` → number with two decimals
- `p` → percentage
- `c` → currency
- `c2` → currency with two decimals

### Custom Format String

For labels and tooltips, the safest pattern is to combine:

- TreeMap `format` for culture-aware numeric formatting
- a label or tooltip format string for text structure

```typescript
import { Component, signal } from '@angular/core';
import { TreeMapModule, TreeMapTooltipService } from '@syncfusion/ej2-angular-treemap';

@Component({
  selector: 'app-treemap',
  standalone: true,
  imports: [TreeMapModule],
  providers: [TreeMapTooltipService],
  template: `
    <ejs-treemap
      [dataSource]="data()"
      weightValuePath="Sales"
      format="n2"
      [useGroupingSeparator]="true"
      [leafItemSettings]="leafItemSettings"
      [tooltipSettings]="tooltipSettings">
    </ejs-treemap>
  `
})
export class TreeMapComponent {
  public data = signal([
    { Product: 'Produkt A', Sales: 15000 },
    { Product: 'Produkt B', Sales: 12000 }
  ]);

  public leafItemSettings = {
    labelPath: 'Product'
  };

  public tooltipSettings = {
    visible: true,
    format: '${Product}<br/>${Sales}'
  };
}
```

**Corrected Definition:** TreeMap formatting is most reliable when the numeric format is controlled by the component `format` property, while the tooltip or label string controls the text layout.

## Date Formatting (if applicable)

TreeMap does not have a date axis like a chart. If dates are part of your item data, the best approach is to pre-format them before binding them into labels or tooltips.

```typescript
import { Component, computed, signal } from '@angular/core';
import { TreeMapModule, TreeMapTooltipService } from '@syncfusion/ej2-angular-treemap';

@Component({
  selector: 'app-treemap',
  standalone: true,
  imports: [TreeMapModule],
  providers: [TreeMapTooltipService],
  template: `
    <ejs-treemap
      [dataSource]="localizedData()"
      weightValuePath="Sales"
      [leafItemSettings]="leafItemSettings"
      [tooltipSettings]="tooltipSettings">
    </ejs-treemap>
  `
})
export class TreeMapComponent {
  public currentLocale = signal('en-US');

  public data = signal([
    { Product: 'Laptop', Sales: 15000, OrderDate: '2024-03-15' },
    { Product: 'Phone', Sales: 12000, OrderDate: '2024-04-01' }
  ]);

  public localizedData = computed(() =>
    this.data().map((item) => ({
      ...item,
      FormattedDate: new Intl.DateTimeFormat(this.currentLocale()).format(new Date(item.OrderDate))
    }))
  );

  public leafItemSettings = {
    labelPath: 'Product'
  };

  public tooltipSettings = {
    visible: true,
    format: '${Product}<br/>${FormattedDate}'
  };
}
```

**Corrected Definition:** Date formatting in TreeMap is applicable only when your data labels or tooltips contain date values. Pre-formatting the date into a string field is the most predictable approach.

## Complete I18N Example

```typescript
import { Component, computed, signal } from '@angular/core';
import { L10n, setCulture, setCurrencyCode } from '@syncfusion/ej2-base';
import {
  TreeMapModule,
  TreeMapTooltipService,
  TreeMapLegendService
} from '@syncfusion/ej2-angular-treemap';

L10n.load({
  de: {
    treemap: {
      placeholder: 'Baumkarte'
    }
  },
  ar: {
    treemap: {
      placeholder: 'الخريطة الشجرية'
    }
  }
});

type LocaleKey = 'en-US' | 'de' | 'ar';

@Component({
  selector: 'app-treemap-i18n',
  standalone: true,
  imports: [TreeMapModule],
  providers: [TreeMapTooltipService, TreeMapLegendService],
  template: `
    <div class="toolbar">
      <button type="button" (click)="setLocale('en-US')">English</button>
      <button type="button" (click)="setLocale('de')">Deutsch</button>
      <button type="button" (click)="setLocale('ar')">العربية</button>
    </div>

    <ejs-treemap
      id="treemap-container"
      [dataSource]="localizedData()"
      weightValuePath="Sales"
      [locale]="currentLocale()"
      [enableRtl]="isRtl()"
      [renderDirection]="currentRenderDirection()"
      format="c2"
      [useGroupingSeparator]="true"
      [leafItemSettings]="leafItemSettings"
      [tooltipSettings]="tooltipSettings()"
      [legendSettings]="legendSettings">
    </ejs-treemap>
  `,
  styles: [`
    :host {
      display: block;
      padding: 12px;
      box-sizing: border-box;
      font-family: Arial, Helvetica, sans-serif;
    }

    .toolbar {
      display: flex;
      gap: 8px;
      margin-bottom: 12px;
      flex-wrap: wrap;
    }

    .toolbar button {
      padding: 8px 12px;
      border: 1px solid #cbd5e1;
      background: #ffffff;
      border-radius: 8px;
      cursor: pointer;
    }

    #treemap-container {
      display: block;
      width: 100%;
      height: 520px;
    }
  `]
})
export class TreeMapI18NComponent {
  public currentLocale = signal<LocaleKey>('en-US');

  public rawData = signal([
    {
      Product: {
        'en-US': 'Laptop',
        de: 'Laptop',
        ar: 'الكمبيوتر المحمول'
      },
      Category: {
        'en-US': 'Electronics',
        de: 'Elektronik',
        ar: 'إلكترونيات'
      },
      Sales: 15000.5
    },
    {
      Product: {
        'en-US': 'Phone',
        de: 'Telefon',
        ar: 'الهاتف'
      },
      Category: {
        'en-US': 'Electronics',
        de: 'Elektronik',
        ar: 'إلكترونيات'
      },
      Sales: 12000.75
    },
    {
      Product: {
        'en-US': 'Chair',
        de: 'Stuhl',
        ar: 'الكرسي'
      },
      Category: {
        'en-US': 'Furniture',
        de: 'Möbel',
        ar: 'أثاث'
      },
      Sales: 8000.25
    }
  ]);

  public localizedData = computed(() => {
    const locale = this.currentLocale();

    return this.rawData().map((item) => ({
      Product: item.Product[locale],
      Category: item.Category[locale],
      Sales: item.Sales
    }));
  });

  public isRtl = computed(() => this.currentLocale() === 'ar');

  public currentRenderDirection = computed(() =>
    this.isRtl() ? 'TopRightBottomLeft' : 'TopLeftBottomRight'
  );

  public leafItemSettings = {
    labelPath: 'Product',
    gap: 4,
    border: { color: '#ffffff', width: 1 }
  };

  public legendSettings = {
    visible: true
  };

  public tooltipSettings = computed(() => {
    const salesText =
      this.currentLocale() === 'de'
        ? 'Umsatz'
        : this.currentLocale() === 'ar'
          ? 'المبيعات'
          : 'Sales';

    return {
      visible: true,
      format: '${Product}<br/>' + salesText + ': ${Sales}'
    };
  });

  public setLocale(locale: LocaleKey): void {
    this.currentLocale.set(locale);
    setCulture(locale);

    if (locale === 'de') {
      setCurrencyCode('EUR');
    } else if (locale === 'ar') {
      setCurrencyCode('SAR');
    } else {
      setCurrencyCode('USD');
    }
  }
}
```

## Language-Specific Labels

If your application stores multilingual content, the best approach is to transform the data into a locale-specific flat collection before binding it to TreeMap.

### Multilingual Data

```typescript
import { Component, computed, signal } from '@angular/core';
import { TreeMapModule } from '@syncfusion/ej2-angular-treemap';

@Component({
  selector: 'app-treemap',
  standalone: true,
  imports: [TreeMapModule],
  template: `
    <ejs-treemap
      [dataSource]="localizedData()"
      weightValuePath="Sales"
      [leafItemSettings]="leafItemSettings">
    </ejs-treemap>
  `
})
export class TreeMapComponent {
  public currentLocale = signal<'en-US' | 'de' | 'ar'>('en-US');

  public data = signal([
    {
      Product: { 'en-US': 'Laptop', de: 'Laptop', ar: 'الكمبيوتر المحمول' },
      Category: { 'en-US': 'Electronics', de: 'Elektronik', ar: 'إلكترونيات' },
      Sales: 15000
    }
  ]);

  public localizedData = computed(() =>
    this.data().map((item) => ({
      Product: item.Product[this.currentLocale()],
      Category: item.Category[this.currentLocale()],
      Sales: item.Sales
    }))
  );

  public leafItemSettings = {
    labelPath: 'Product'
  };
}
```

**Corrected Definition:** Instead of trying to bind a nested language object directly to `labelPath`, transform the data so TreeMap receives a normal string field such as `Product`.

## Currency Formatting by Locale

Currency formatting is built in through `format` plus the active culture and currency code.

```typescript
import { Component, signal } from '@angular/core';
import { setCulture, setCurrencyCode } from '@syncfusion/ej2-base';
import { TreeMapModule, TreeMapTooltipService } from '@syncfusion/ej2-angular-treemap';

@Component({
  selector: 'app-treemap',
  standalone: true,
  imports: [TreeMapModule],
  providers: [TreeMapTooltipService],
  template: `
    <ejs-treemap
      [dataSource]="data()"
      weightValuePath="Sales"
      [locale]="currentLocale()"
      format="c2"
      [useGroupingSeparator]="true"
      [leafItemSettings]="leafItemSettings"
      [tooltipSettings]="tooltipSettings">
    </ejs-treemap>
  `
})
export class TreeMapComponent {
  public currentLocale = signal('en-US');

  public data = signal([
    { Product: 'Laptop', Sales: 15000 },
    { Product: 'Phone', Sales: 12000 }
  ]);

  public leafItemSettings = {
    labelPath: 'Product'
  };

  public tooltipSettings = {
    visible: true,
    format: '${Product}<br/>${Sales}'
  };

  public setLocale(locale: string): void {
    this.currentLocale.set(locale);
    setCulture(locale);

    if (locale === 'de') {
      setCurrencyCode('EUR');
    } else if (locale === 'ar') {
      setCurrencyCode('SAR');
    } else {
      setCurrencyCode('USD');
    }
  }
}
```

**Expected behavior:**

- `en-US` → `$15,000.00`
- `de` → `15.000,00 €`
- `ar` → formatted according to Arabic culture and the configured currency code

## Number Grouping by Locale

To show culture-aware thousand separators, enable `useGroupingSeparator` and set a culture.

```typescript
<ejs-treemap
  [dataSource]="data"
  weightValuePath="Sales"
  format="n2"
  [useGroupingSeparator]="true">
</ejs-treemap>
```

**Typical results by locale:**

- English → `1,000,000`
- German → `1.000.000`
- French → `1 000 000`

**Corrected Definition:** Grouping style depends on the active culture. TreeMap does not invent a grouping style by itself; it follows the culture settings.

## RTL Breadcrumb Navigation

TreeMap breadcrumb support works with drilldown and can be combined with RTL.

```typescript
import { Component, signal } from '@angular/core';
import { TreeMapModule } from '@syncfusion/ej2-angular-treemap';

@Component({
  selector: 'app-treemap',
  standalone: true,
  imports: [TreeMapModule],
  template: `
    <ejs-treemap
      [dataSource]="data()"
      weightValuePath="Value"
      [enableDrillDown]="true"
      [enableBreadcrumb]="true"
      [enableRtl]="true"
      breadcrumbConnector=" <- "
      [levels]="levels"
      [leafItemSettings]="leafItemSettings">
    </ejs-treemap>
  `
})
export class TreeMapComponent {
  public data = signal([
    { Category: 'المنتجات', SubCategory: 'إلكترونيات', Item: 'الهاتف', Value: 12000 },
    { Category: 'المنتجات', SubCategory: 'إلكترونيات', Item: 'الحاسوب', Value: 18000 }
  ]);

  public levels = [
    { groupPath: 'Category', headerFormat: '${Category}' },
    { groupPath: 'SubCategory', headerFormat: '${SubCategory}' }
  ];

  public leafItemSettings = {
    labelPath: 'Item'
  };
}
```

**Corrected Definition:** Breadcrumb direction and text readability improve when `enableRtl` is enabled, but breadcrumb display still depends on your drilldown setup and connector choice.

## Best Practices

### DO: Test with RTL Languages

```typescript
data = [
  { Product: 'منتج عربي', Sales: 15000 }
];

[enableRtl]="true"
```

Always validate real RTL content, not only translated labels.

### DON'T: Mix RTL and LTR Without Testing

```typescript
[enableRtl]="true"
```

If the page mixes English product codes with Arabic labels, visually test the result before shipping.

### DO: Provide Locale Switcher

```typescript
<button type="button" (click)="setLocale('en-US')">English</button>
<button type="button" (click)="setLocale('de')">Deutsch</button>
<button type="button" (click)="setLocale('ar')">العربية</button>
```

A locale switcher is the cleanest way to validate formatting and RTL behavior.

### DO: Use Standard Format Codes

```typescript
format="n2"
format="c2"
format="p"
```

Prefer built-in global format strings over ad hoc formatting logic.

### DO: Verify Number/Currency Display

Check the following for every active locale:

- decimal separator
- grouping separator
- currency symbol
- RTL alignment
- tooltip readability
- legend readability

## Troubleshooting

**Issue:** Locale is not changing

**Solution:** Set the culture and, if needed, the component locale.

```typescript
setCulture('de');
setCurrencyCode('EUR');
this.currentLocale.set('de');
```

**Issue:** RTL text still looks left-to-right

**Solution:** Enable RTL explicitly on the TreeMap.

```typescript
[enableRtl]="true"
```

**Issue:** Numbers are not grouped correctly

**Solution:** Use a built-in format and enable grouping separators.

```typescript
format="n2"
[useGroupingSeparator]="true"
```

**Issue:** Currency symbol is wrong or missing

**Solution:** Set both culture and currency code.

```typescript
setCulture('de');
setCurrencyCode('EUR');
```

**Issue:** Tooltip text is not localized enough

**Solution:** Localize the surrounding text yourself and let TreeMap format the numeric value.

```typescript
public tooltipSettings = {
  visible: true,
  format: '${Product}<br/>Umsatz: ${Sales}'
};
```

# Labels, Tooltips, and Legend in Angular TreeMap

## Table of Contents

- [Data Labels](#data-labels)
  - [Enable Labels](#enable-labels)
  - [Label Positioning](#label-positioning)
- [Label Formatting](#label-formatting)
  - [Format String Syntax](#format-string-syntax)
  - [Number Formatting in Labels](#number-formatting-in-labels)
  - [Multi-Line Labels](#multi-line-labels)
- [Label Templates](#label-templates)
  - [Basic Label Template](#basic-label-template)
  - [Advanced Template with Styling](#advanced-template-with-styling)
  - [Template with Conditional Logic](#template-with-conditional-logic)
  - [Template Positioning](#template-positioning)
- [Handling Label Intersections](#handling-label-intersections)
  - [InterSectAction Options](#intersectaction-options)
  - [Trim Long Labels](#trim-long-labels)
  - [Wrap Text to Multiple Lines](#wrap-text-to-multiple-lines)
- [Tooltips](#tooltips)
  - [Enable Tooltips](#enable-tooltips)
  - [Default Tooltip Behavior](#default-tooltip-behavior)
- [Tooltip Formatting](#tooltip-formatting)
  - [Format with Multiple Fields](#format-with-multiple-fields)
  - [Format with Currency](#format-with-currency)
- [Tooltip Templates](#tooltip-templates)
  - [Custom Tooltip Template](#custom-tooltip-template)
  - [Tooltip with Images](#tooltip-with-images)
- [Legend Configuration](#legend-configuration)
  - [Enable Legend](#enable-legend)
  - [Legend Positioning](#legend-positioning)
  - [Legend with Title](#legend-with-title)
  - [Legend Item Styling](#legend-item-styling)
- [Legend and Item Synchronization](#legend-and-item-synchronization)
  - [Click Legend to Select Items](#click-legend-to-select-items)
  - [Highlight on Legend Hover](#highlight-on-legend-hover)
- [Complete Example with All Features](#complete-example-with-all-features)
- [Best Practices](#best-practices)
  - [DO: Use Clear Label Text](#do-use-clear-label-text)
  - [DON'T: Overcrowd Labels](#dont-overcrowd-labels)
  - [DO: Show Related Information in Tooltips](#do-show-related-information-in-tooltips)
  - [DO: Use Legend for Categorical Data](#do-use-legend-for-categorical-data)
  - [Troubleshooting](#troubleshooting)

## Data Labels

TreeMap data labels are configured through `leafItemSettings`. The main label options are `labelPath`, `showLabels`, `labelPosition`, `labelFormat`, `labelTemplate`, `templatePosition`, and `interSectAction`.

### Enable Labels

```typescript
import { Component, signal } from '@angular/core';
import { TreeMapModule } from '@syncfusion/ej2-angular-treemap';

@Component({
  selector: 'app-treemap',
  standalone: true,
  imports: [TreeMapModule],
  template: `
    <ejs-treemap
      id="treemap-container"
      [dataSource]="data()"
      weightValuePath="Sales"
      [leafItemSettings]="leafItemSettings">
    </ejs-treemap>
  `,
  styles: [`
    #treemap-container {
      display: block;
      width: 100%;
      height: 500px;
    }
  `]
})
export class TreeMapComponent {
  public data = signal([
    { Product: 'Laptop', Sales: 15000 },
    { Product: 'Phone', Sales: 12000 },
    { Product: 'Tablet', Sales: 8000 }
  ]);

  public leafItemSettings = {
    labelPath: 'Product',
    showLabels: true,
    gap: 4,
    border: { color: '#ffffff', width: 1 }
  };
}
```

**Built-in label properties:**

- `labelPath`: field used as the label text
- `showLabels`: shows or hides labels
- `labelPosition`: places the label inside the item
- `labelFormat`: formats label text
- `labelTemplate`: renders custom label content
- `templatePosition`: places template content inside the item
- `interSectAction`: controls label overflow behavior

### Label Positioning

Use `labelPosition` to place the label inside the item.

```typescript
public leafItemSettings = {
  labelPath: 'Product',
  showLabels: true,
  labelPosition: 'Center',
  gap: 4,
  border: { color: '#ffffff', width: 1 }
};
```

**Common positions:**

- `TopLeft`
- `TopCenter`
- `TopRight`
- `CenterLeft`
- `Center`
- `CenterRight`
- `BottomLeft`
- `BottomCenter`
- `BottomRight`

## Label Formatting

Use `labelFormat` when you want simple text composition. If you also want culture-aware number formatting, combine the TreeMap `format` property with the label text.

### Format String Syntax

```typescript
import { Component, signal } from '@angular/core';
import { TreeMapModule } from '@syncfusion/ej2-angular-treemap';

@Component({
  selector: 'app-treemap',
  standalone: true,
  imports: [TreeMapModule],
  template: `
    <ejs-treemap
      [dataSource]="data()"
      weightValuePath="Sales"
      [leafItemSettings]="leafItemSettings">
    </ejs-treemap>
  `
})
export class TreeMapComponent {
  public data = signal([
    { Product: 'Laptop', Sales: 15000 },
    { Product: 'Phone', Sales: 12000 }
  ]);

  public leafItemSettings = {
    labelPath: 'Product',
    showLabels: true,
    labelFormat: '${Product}: ${Sales}',
    gap: 4,
    border: { color: '#ffffff', width: 1 }
  };
}
```

### Number Formatting in Labels

Use the TreeMap `format` property for numeric formatting and keep the label text simple.

```typescript
import { Component, signal } from '@angular/core';
import { TreeMapModule } from '@syncfusion/ej2-angular-treemap';

@Component({
  selector: 'app-treemap',
  standalone: true,
  imports: [TreeMapModule],
  template: `
    <ejs-treemap
      [dataSource]="data()"
      weightValuePath="Sales"
      format="n2"
      [useGroupingSeparator]="true"
      [leafItemSettings]="leafItemSettings">
    </ejs-treemap>
  `
})
export class TreeMapComponent {
  public data = signal([
    { Product: 'Laptop', Sales: 15000.25 },
    { Product: 'Phone', Sales: 12000.5 }
  ]);

  public leafItemSettings = {
    labelPath: 'Product',
    showLabels: true,
    labelFormat: '${Product}: ${Sales}',
    gap: 4,
    border: { color: '#ffffff', width: 1 }
  };
}
```

### Multi-Line Labels

Use `labelTemplate` when you want predictable multi-line label layout.

```typescript
import { Component, signal } from '@angular/core';
import { TreeMapModule } from '@syncfusion/ej2-angular-treemap';

@Component({
  selector: 'app-treemap',
  standalone: true,
  imports: [TreeMapModule],
  template: `
    <ejs-treemap
      [dataSource]="data()"
      weightValuePath="Sales"
      [leafItemSettings]="leafItemSettings">
    </ejs-treemap>
  `
})
export class TreeMapComponent {
  public data = signal([
    { Product: 'Laptop', Sales: 15000 },
    { Product: 'Phone', Sales: 12000 }
  ]);

  public leafItemSettings = {
    labelPath: 'Product',
    showLabels: true,
    labelTemplate: `
      <div style="text-align:center; color:white; font-weight:600;">
        <div>\${Product}</div>
        <div>\${Sales}</div>
      </div>
    `,
    templatePosition: 'Center',
    gap: 4,
    border: { color: '#ffffff', width: 1 }
  };
}
```

## Label Templates

Use `labelTemplate` when you need custom markup or more control than `labelFormat` can provide.

### Basic Label Template

```typescript
import { Component, signal } from '@angular/core';
import { TreeMapModule } from '@syncfusion/ej2-angular-treemap';

@Component({
  selector: 'app-treemap',
  standalone: true,
  imports: [TreeMapModule],
  template: `
    <ejs-treemap
      [dataSource]="data()"
      weightValuePath="Sales"
      [leafItemSettings]="leafItemSettings">
    </ejs-treemap>
  `
})
export class TreeMapComponent {
  public data = signal([
    { Product: 'Laptop', Sales: 15000 },
    { Product: 'Phone', Sales: 12000 }
  ]);

  public leafItemSettings = {
    labelPath: 'Product',
    showLabels: true,
    labelTemplate: `<div style="color:white; font-weight:700;">\${Product}</div>`,
    templatePosition: 'Center',
    gap: 4,
    border: { color: '#ffffff', width: 1 }
  };
}
```

### Advanced Template with Styling

```typescript
public leafItemSettings = {
  labelPath: 'Product',
  showLabels: true,
  labelTemplate: `
    <div style="padding:8px; background:rgba(0,0,0,0.45); border-radius:6px; color:white;">
      <div style="font-size:14px; font-weight:700;">\${Product}</div>
      <div style="font-size:12px;">Sales: \${Sales}</div>
    </div>
  `,
  templatePosition: 'Center',
  gap: 4,
  border: { color: '#ffffff', width: 1 }
};
```

### Template with Conditional Logic

Prepare conditional values in the bound data and reference them inside the label template.

```typescript
import { Component, computed, signal } from '@angular/core';
import { TreeMapModule } from '@syncfusion/ej2-angular-treemap';

@Component({
  selector: 'app-treemap',
  standalone: true,
  imports: [TreeMapModule],
  template: `
    <ejs-treemap
      [dataSource]="dataWithStyles()"
      weightValuePath="Sales"
      [leafItemSettings]="leafItemSettings">
    </ejs-treemap>
  `
})
export class TreeMapComponent {
  public rawData = signal([
    { Product: 'Laptop', Sales: 15000 },
    { Product: 'Phone', Sales: 9000 }
  ]);

  public dataWithStyles = computed(() =>
    this.rawData().map((item) => ({
      ...item,
      LabelColor: item.Sales > 10000 ? 'green' : 'orange',
      LabelWeight: item.Sales > 10000 ? '700' : '400'
    }))
  );

  public leafItemSettings = {
    labelPath: 'Product',
    showLabels: true,
    labelTemplate: `
      <div style="color:\${LabelColor}; font-weight:\${LabelWeight};">
        \${Product}
      </div>
    `,
    templatePosition: 'Center',
    gap: 4,
    border: { color: '#ffffff', width: 1 }
  };
}
```

### Template Positioning

Use `templatePosition` to place label template content.

```typescript
public leafItemSettings = {
  labelPath: 'Product',
  showLabels: true,
  labelTemplate: `<div style="color:white;">\${Product}</div>`,
  templatePosition: 'Center',
  gap: 4,
  border: { color: '#ffffff', width: 1 }
};
```

**Common positions:**

- `Top`
- `Center`
- `Bottom`

## Handling Label Intersections

Use `interSectAction` to control how labels behave when space is limited.

### InterSectAction Options

```typescript
public leafItemSettings = {
  labelPath: 'Product',
  showLabels: true,
  interSectAction: 'Trim',
  gap: 4,
  border: { color: '#ffffff', width: 1 }
};
```

**Built-in actions:**

- `None`
- `Trim`
- `Wrap`
- `Hide`

### Trim Long Labels

```typescript
public leafItemSettings = {
  labelPath: 'Product',
  showLabels: true,
  interSectAction: 'Trim',
  gap: 4,
  border: { color: '#ffffff', width: 1 }
};
```

Use `Trim` when the item rectangle is too small for the full label.

### Wrap Text to Multiple Lines

```typescript
public leafItemSettings = {
  labelPath: 'Product',
  showLabels: true,
  interSectAction: 'Wrap',
  gap: 4,
  border: { color: '#ffffff', width: 1 }
};
```

Use `Wrap` when you want long labels to stay visible across multiple lines.

## Tooltips

Tooltips are configured through `tooltipSettings`. Include `TreeMapTooltipService` when tooltip behavior is enabled.

### Enable Tooltips

```typescript
import { Component, signal } from '@angular/core';
import {
  TreeMapModule,
  TreeMapTooltipService
} from '@syncfusion/ej2-angular-treemap';

@Component({
  selector: 'app-treemap',
  standalone: true,
  imports: [TreeMapModule],
  providers: [TreeMapTooltipService],
  template: `
    <ejs-treemap
      [dataSource]="data()"
      weightValuePath="Sales"
      [tooltipSettings]="tooltipSettings"
      [leafItemSettings]="leafItemSettings">
    </ejs-treemap>
  `
})
export class TreeMapComponent {
  public data = signal([
    { Product: 'Laptop', Sales: 15000 },
    { Product: 'Phone', Sales: 12000 }
  ]);

  public tooltipSettings = {
    visible: true
  };

  public leafItemSettings = {
    labelPath: 'Product'
  };
}
```

### Default Tooltip Behavior

When tooltip is enabled, TreeMap shows item-related information. If you want reliable, user-facing text, define a `format` or `template` explicitly.

## Tooltip Formatting

Use `tooltipSettings.format` when plain text with multiple fields is enough.

### Format with Multiple Fields

```typescript
import { Component, signal } from '@angular/core';
import {
  TreeMapModule,
  TreeMapTooltipService
} from '@syncfusion/ej2-angular-treemap';

@Component({
  selector: 'app-treemap',
  standalone: true,
  imports: [TreeMapModule],
  providers: [TreeMapTooltipService],
  template: `
    <ejs-treemap
      [dataSource]="data()"
      weightValuePath="Sales"
      [tooltipSettings]="tooltipSettings"
      [leafItemSettings]="leafItemSettings">
    </ejs-treemap>
  `
})
export class TreeMapComponent {
  public data = signal([
    { Product: 'Laptop', Sales: 15000, Category: 'Electronics' },
    { Product: 'Chair', Sales: 8000, Category: 'Furniture' }
  ]);

  public tooltipSettings = {
    visible: true,
    format: 'Product: ${Product}<br/>Sales: ${Sales}<br/>Category: ${Category}'
  };

  public leafItemSettings = {
    labelPath: 'Product'
  };
}
```

### Format with Currency

Combine the TreeMap `format` property with tooltip text when you want currency-aware values.

```typescript
import { Component, signal } from '@angular/core';
import {
  TreeMapModule,
  TreeMapTooltipService
} from '@syncfusion/ej2-angular-treemap';

@Component({
  selector: 'app-treemap',
  standalone: true,
  imports: [TreeMapModule],
  providers: [TreeMapTooltipService],
  template: `
    <ejs-treemap
      [dataSource]="data()"
      weightValuePath="Price"
      format="c2"
      [useGroupingSeparator]="true"
      [tooltipSettings]="tooltipSettings"
      [leafItemSettings]="leafItemSettings">
    </ejs-treemap>
  `
})
export class TreeMapComponent {
  public data = signal([
    { Product: 'Laptop', Price: 1200 },
    { Product: 'Phone', Price: 900 }
  ]);

  public tooltipSettings = {
    visible: true,
    format: '${Product}: ${Price}'
  };

  public leafItemSettings = {
    labelPath: 'Product'
  };
}
```

## Tooltip Templates

Use `tooltipSettings.template` when you need rich custom markup.

### Custom Tooltip Template

```typescript
import { Component, signal } from '@angular/core';
import {
  TreeMapModule,
  TreeMapTooltipService
} from '@syncfusion/ej2-angular-treemap';

@Component({
  selector: 'app-treemap',
  standalone: true,
  imports: [TreeMapModule],
  providers: [TreeMapTooltipService],
  template: `
    <ejs-treemap
      [dataSource]="data()"
      weightValuePath="Sales"
      [tooltipSettings]="tooltipSettings"
      [leafItemSettings]="leafItemSettings">
    </ejs-treemap>
  `
})
export class TreeMapComponent {
  public data = signal([
    { Product: 'Laptop', Sales: 15000, Profit: 25 },
    { Product: 'Phone', Sales: 12000, Profit: 18 }
  ]);

  public tooltipSettings = {
    visible: true,
    template: `
      <div style="background:#333; color:white; padding:10px; border-radius:6px;">
        <div style="font-weight:700;">\${Product}</div>
        <div>Sales: \${Sales}</div>
        <div>Profit: \${Profit}%</div>
      </div>
    `
  };

  public leafItemSettings = {
    labelPath: 'Product'
  };
}
```

### Tooltip with Images

Use fields from the bound data to render rich tooltip content such as images and descriptions.

```typescript
public tooltipSettings = {
  visible: true,
  template: `
    <div style="display:flex; gap:10px; align-items:center;">
      <img src="\${ImageUrl}" alt="\${Product}" style="width:40px; height:40px; object-fit:cover; border-radius:4px;" />
      <div>
        <div style="font-weight:700;">\${Product}</div>
        <div>\${Description}</div>
      </div>
    </div>
  `
};
```

## Legend Configuration

Legend support is built in. Include `TreeMapLegendService` when legend behavior is enabled.

### Enable Legend

```typescript
import { Component, signal } from '@angular/core';
import {
  TreeMapModule,
  TreeMapLegendService
} from '@syncfusion/ej2-angular-treemap';

@Component({
  selector: 'app-treemap',
  standalone: true,
  imports: [TreeMapModule],
  providers: [TreeMapLegendService],
  template: `
    <ejs-treemap
      [dataSource]="data()"
      weightValuePath="Sales"
      equalColorValuePath="Category"
      [legendSettings]="legendSettings"
      [leafItemSettings]="leafItemSettings">
    </ejs-treemap>
  `
})
export class TreeMapComponent {
  public data = signal([
    { Product: 'Laptop', Sales: 15000, Category: 'Electronics' },
    { Product: 'Chair', Sales: 8000, Category: 'Furniture' },
    { Product: 'Shirt', Sales: 5000, Category: 'Clothing' }
  ]);

  public legendSettings = {
    visible: true
  };

  public leafItemSettings = {
    labelPath: 'Product',
    colorMapping: [
      { value: 'Electronics', color: '#2563eb', label: 'Electronics' },
      { value: 'Furniture', color: '#16a34a', label: 'Furniture' },
      { value: 'Clothing', color: '#ea580c', label: 'Clothing' }
    ]
  };
}
```

### Legend Positioning

Use `legendSettings.position` to place the legend.

```typescript
public legendSettings = {
  visible: true,
  position: 'Top'
};
```

**Common positions:**

- `Top`
- `Bottom`
- `Left`
- `Right`

### Legend with Title

```typescript
public legendSettings = {
  visible: true,
  position: 'Bottom',
  title: 'Product Categories'
};
```

### Legend Item Styling

```typescript
public legendSettings = {
  visible: true,
  border: { color: '#333333', width: 1 },
  textStyle: {
    color: '#333333',
    fontFamily: 'Arial',
    size: '14px'
  }
};
```

## Legend and Item Synchronization

Legend interaction can be combined with selection and highlight features. Include the related services when these behaviors are enabled.

### Click Legend to Select Items

Enable selection and legend support together when you want legend interaction to affect the related TreeMap items.

```typescript
import { Component, signal } from '@angular/core';
import {
  TreeMapModule,
  TreeMapLegendService,
  TreeMapSelectionService
} from '@syncfusion/ej2-angular-treemap';

@Component({
  selector: 'app-treemap',
  standalone: true,
  imports: [TreeMapModule],
  providers: [TreeMapLegendService, TreeMapSelectionService],
  template: `
    <ejs-treemap
      [dataSource]="data()"
      weightValuePath="Sales"
      equalColorValuePath="Category"
      [legendSettings]="legendSettings"
      [selectionSettings]="selectionSettings"
      [leafItemSettings]="leafItemSettings">
    </ejs-treemap>
  `
})
export class TreeMapComponent {
  public data = signal([
    { Product: 'Laptop', Sales: 15000, Category: 'Electronics' },
    { Product: 'Chair', Sales: 8000, Category: 'Furniture' }
  ]);

  public legendSettings = {
    visible: true
  };

  public selectionSettings = {
    enable: true,
    fill: '#dbeafe',
    border: { color: '#1d4ed8', width: 1 }
  };

  public leafItemSettings = {
    labelPath: 'Product',
    colorMapping: [
      { value: 'Electronics', color: '#2563eb', label: 'Electronics' },
      { value: 'Furniture', color: '#16a34a', label: 'Furniture' }
    ]
  };
}
```

### Highlight on Legend Hover

Enable highlight and legend support together when you want legend hover to affect the related TreeMap items.

```typescript
import { Component, signal } from '@angular/core';
import {
  TreeMapModule,
  TreeMapLegendService,
  TreeMapHighlightService
} from '@syncfusion/ej2-angular-treemap';

@Component({
  selector: 'app-treemap',
  standalone: true,
  imports: [TreeMapModule],
  providers: [TreeMapLegendService, TreeMapHighlightService],
  template: `
    <ejs-treemap
      [dataSource]="data()"
      weightValuePath="Sales"
      equalColorValuePath="Category"
      [legendSettings]="legendSettings"
      [highlightSettings]="highlightSettings"
      [leafItemSettings]="leafItemSettings">
    </ejs-treemap>
  `
})
export class TreeMapComponent {
  public data = signal([
    { Product: 'Laptop', Sales: 15000, Category: 'Electronics' },
    { Product: 'Chair', Sales: 8000, Category: 'Furniture' }
  ]);

  public legendSettings = {
    visible: true
  };

  public highlightSettings = {
    enable: true,
    fill: '#fde68a',
    border: { color: '#d97706', width: 1 }
  };

  public leafItemSettings = {
    labelPath: 'Product',
    colorMapping: [
      { value: 'Electronics', color: '#2563eb', label: 'Electronics' },
      { value: 'Furniture', color: '#16a34a', label: 'Furniture' }
    ]
  };
}
```

## Complete Example with All Features

```typescript
import { Component, signal } from '@angular/core';
import {
  TreeMapModule,
  TreeMapTooltipService,
  TreeMapLegendService,
  TreeMapSelectionService,
  TreeMapHighlightService
} from '@syncfusion/ej2-angular-treemap';

@Component({
  selector: 'app-treemap',
  standalone: true,
  imports: [TreeMapModule],
  providers: [
    TreeMapTooltipService,
    TreeMapLegendService,
    TreeMapSelectionService,
    TreeMapHighlightService
  ],
  template: `
    <ejs-treemap
      id="treemap-container"
      [dataSource]="data()"
      weightValuePath="Sales"
      equalColorValuePath="Category"
      format="n0"
      [useGroupingSeparator]="true"
      [leafItemSettings]="leafItemSettings"
      [tooltipSettings]="tooltipSettings"
      [legendSettings]="legendSettings"
      [selectionSettings]="selectionSettings"
      [highlightSettings]="highlightSettings">
    </ejs-treemap>
  `,
  styles: [`
    #treemap-container {
      display: block;
      width: 100%;
      height: 560px;
    }
  `]
})
export class TreeMapComponent {
  public data = signal([
    {
      Product: 'Laptop',
      Sales: 15000,
      Category: 'Electronics',
      Profit: 25,
      Description: 'Portable computer',
      ImageUrl: 'assets/laptop.png'
    },
    {
      Product: 'Chair',
      Sales: 8000,
      Category: 'Furniture',
      Profit: 15,
      Description: 'Office chair',
      ImageUrl: 'assets/chair.png'
    },
    {
      Product: 'Shirt',
      Sales: 5000,
      Category: 'Clothing',
      Profit: 18,
      Description: 'Cotton shirt',
      ImageUrl: 'assets/shirt.png'
    }
  ]);

  public leafItemSettings = {
    labelPath: 'Product',
    showLabels: true,
    labelPosition: 'Center',
    interSectAction: 'Wrap',
    labelTemplate: `
      <div style="text-align:center; color:white; font-weight:600; padding:4px;">
        <div>\${Product}</div>
        <div style="font-size:11px;">\${Sales}</div>
      </div>
    `,
    templatePosition: 'Center',
    gap: 4,
    border: { color: '#ffffff', width: 1 },
    colorMapping: [
      { value: 'Electronics', color: '#2563eb', label: 'Electronics' },
      { value: 'Furniture', color: '#16a34a', label: 'Furniture' },
      { value: 'Clothing', color: '#ea580c', label: 'Clothing' }
    ]
  };

  public tooltipSettings = {
    visible: true,
    template: `
      <div style="display:flex; gap:10px; align-items:center; background:#111827; color:white; padding:10px; border-radius:8px;">
        <img src="\${ImageUrl}" alt="\${Product}" style="width:40px; height:40px; object-fit:cover; border-radius:4px;" />
        <div>
          <div style="font-weight:700;">\${Product}</div>
          <div>Sales: \${Sales}</div>
          <div>Category: \${Category}</div>
          <div>Profit: \${Profit}%</div>
        </div>
      </div>
    `
  };

  public legendSettings = {
    visible: true,
    position: 'Bottom',
    title: 'Product Categories',
    border: { color: '#d1d5db', width: 1 },
    textStyle: {
      color: '#111827',
      fontFamily: 'Arial',
      size: '13px'
    }
  };

  public selectionSettings = {
    enable: true,
    fill: '#dbeafe',
    border: { color: '#2563eb', width: 1 }
  };

  public highlightSettings = {
    enable: true,
    fill: '#fde68a',
    border: { color: '#d97706', width: 1 }
  };
}
```

## Best Practices

### DO: Use Clear Label Text

```typescript
public leafItemSettings = {
  labelPath: 'Product',
  labelFormat: '${Product}: ${Sales}'
};
```

Keep labels compact and understandable.

### DON'T: Overcrowd Labels

```typescript
public leafItemSettings = {
  labelPath: 'Product',
  labelFormat: '${Product} ${Sales} ${Category} ${Profit} ${Description}'
};
```

When too much information is packed into labels, readability drops quickly. Move secondary information into tooltips instead.

### DO: Show Related Information in Tooltips

```typescript
public tooltipSettings = {
  visible: true,
  format: 'Name: ${Product}<br/>Value: ${Sales}<br/>Category: ${Category}'
};
```

Tooltips are the best place for extra context that does not need to stay visible all the time.

### DO: Use Legend for Categorical Data

```typescript
equalColorValuePath="Category"
```

```typescript
public legendSettings = {
  visible: true
};
```

Legends are most helpful when color represents category meaning.

### Troubleshooting

**Issue:** Labels are not showing

**Solution:** Verify that `labelPath` matches a real field in the data source and that labels are enabled.

```typescript
public leafItemSettings = {
  labelPath: 'Product',
  showLabels: true
};
```

**Issue:** Tooltip is not showing on hover

**Solution:** Enable tooltip visibility and provide the tooltip service.

```typescript
providers: [TreeMapTooltipService]
```

```typescript
public tooltipSettings = {
  visible: true
};
```

**Issue:** Legend is not showing

**Solution:** Enable legend visibility, include the legend service, and make sure the TreeMap has a meaningful legend source such as category-based color mapping.

```typescript
providers: [TreeMapLegendService]
```

```typescript
public legendSettings = {
  visible: true
};
```

**Issue:** Legend interaction is not syncing with item states

**Solution:** Enable the related settings and providers explicitly.

```typescript
providers: [TreeMapSelectionService, TreeMapHighlightService]
```

```typescript
public selectionSettings = {
  enable: true
};

public highlightSettings = {
  enable: true
};
```

# Levels and Layout in Angular TreeMap

## Table of Contents

- [Configuring Multiple Hierarchy Levels](#configuring-multiple-hierarchy-levels)
- [Group Padding and Spacing](#group-padding-and-spacing)
  - [Customizing Item Gaps](#customizing-item-gaps)
- [Layout Types](#layout-types)
  - [Squarified Layout (Default)](#squarified-layout-default)
  - [SliceAndDiceVertical](#sliceanddicevertical)
  - [SliceAndDiceHorizontal](#sliceanddicehorizontal)
  - [SliceAndDiceAuto](#sliceanddiceauto)
- [Header Formatting and Styling](#header-formatting-and-styling)
  - [Header Format with Data Binding](#header-format-with-data-binding)
  - [Header Alignment](#header-alignment)
- [Header Height and Styling](#header-height-and-styling)
  - [Custom Header Height](#custom-header-height)
  - [Header Text Styling](#header-text-styling)
  - [Multi-Level Header Styling](#multi-level-header-styling)
- [Complete Hierarchical Example](#complete-hierarchical-example)
- [Best Practices](#best-practices)
  - [DO: Use Clear, Descriptive Group Paths](#do-use-clear-descriptive-group-paths)
  - [DON'T: Use Ambiguous Field Names](#dont-use-ambiguous-field-names)
  - [DO: Match Layout to Data Type](#do-match-layout-to-data-type)
  - [DO: Use Appropriate Header Heights](#do-use-appropriate-header-heights)
  - [DO: Limit Hierarchy Depth](#do-limit-hierarchy-depth)

## Configuring Multiple Hierarchy Levels

Use the `levels` collection to define grouped hierarchy in the TreeMap. Each level uses `groupPath` to group data from the outer level to the inner level, and the final visible items are configured through `leafItemSettings`.

```typescript
import { Component, signal } from '@angular/core';
import { TreeMapModule } from '@syncfusion/ej2-angular-treemap';

@Component({
  selector: 'app-treemap',
  standalone: true,
  imports: [TreeMapModule],
  template: `
    <ejs-treemap
      id="treemap-container"
      [dataSource]="data()"
      weightValuePath="Sales"
      [levels]="levels"
      [leafItemSettings]="leafItemSettings">
    </ejs-treemap>
  `,
  styles: [`
    #treemap-container {
      display: block;
      width: 100%;
      height: 520px;
    }
  `]
})
export class TreeMapComponent {
  public data = signal([
    { Continent: 'Asia', Country: 'India', City: 'Delhi', Sales: 15000 },
    { Continent: 'Asia', Country: 'India', City: 'Mumbai', Sales: 12000 },
    { Continent: 'Europe', Country: 'Germany', City: 'Berlin', Sales: 8000 }
  ]);

  public levels = [
    { groupPath: 'Continent' },
    { groupPath: 'Country' }
  ];

  public leafItemSettings = {
    labelPath: 'City',
    gap: 4,
    border: { color: '#ffffff', width: 1 }
  };
}
```

**How it works:**

- Level 0 with `groupPath: 'Continent'` creates the outer grouped blocks.
- Level 1 with `groupPath: 'Country'` creates the inner grouped blocks.
- `leafItemSettings.labelPath` shows the final leaf item text, such as `City`.

## Group Padding and Spacing

Use `groupGap` inside each level to control spacing between grouped blocks. Use `gap` inside `leafItemSettings` to control spacing between leaf rectangles.

```typescript
public levels = [
  {
    groupPath: 'Continent',
    groupGap: 8
  },
  {
    groupPath: 'Country',
    groupGap: 5
  }
];

public leafItemSettings = {
  labelPath: 'City',
  gap: 3,
  border: { color: '#ffffff', width: 1 }
};
```

### Customizing Item Gaps

```typescript
public levels = [
  {
    groupPath: 'Category',
    groupGap: 10
  }
];
```

Use larger values when you want stronger visual separation between hierarchy groups.

## Layout Types

Use the `layoutType` property to control how rectangles are arranged inside the TreeMap.

### Squarified Layout (Default)

`Squarified` produces more balanced rectangles and is usually the best choice for readability.

```typescript
<ejs-treemap
  [dataSource]="data()"
  weightValuePath="Sales"
  layoutType="Squarified"
  [levels]="levels"
  [leafItemSettings]="leafItemSettings">
</ejs-treemap>
```

**When to use it:**

- general-purpose dashboards
- better area comparison
- better label readability in many datasets

### SliceAndDiceVertical

`SliceAndDiceVertical` arranges items in vertical slices.

```typescript
<ejs-treemap
  [dataSource]="data()"
  weightValuePath="Sales"
  layoutType="SliceAndDiceVertical"
  [levels]="levels"
  [leafItemSettings]="leafItemSettings">
</ejs-treemap>
```

**When to use it:**

- when vertical segmentation is easier to scan
- when the container is relatively narrow

### SliceAndDiceHorizontal

`SliceAndDiceHorizontal` arranges items in horizontal slices.

```typescript
<ejs-treemap
  [dataSource]="data()"
  weightValuePath="Sales"
  layoutType="SliceAndDiceHorizontal"
  [levels]="levels"
  [leafItemSettings]="leafItemSettings">
</ejs-treemap>
```

**When to use it:**

- when horizontal segmentation is preferred
- when the container is relatively wide

### SliceAndDiceAuto

`SliceAndDiceAuto` automatically chooses the slice direction based on the available space.

```typescript
<ejs-treemap
  [dataSource]="data()"
  weightValuePath="Sales"
  layoutType="SliceAndDiceAuto"
  [levels]="levels"
  [leafItemSettings]="leafItemSettings">
</ejs-treemap>
```

`SliceAndDiceAuto` remains a slice-and-dice layout and adapts the slicing direction to the available area.

## Header Formatting and Styling

Level headers support text formatting and styling through properties such as `headerFormat`, `headerAlignment`, `headerHeight`, `headerStyle`, `fill`, and `border`.

### Header Format with Data Binding

Use `headerFormat` to display data fields inside the group header text.

```typescript
public levels = [
  {
    groupPath: 'Country',
    headerFormat: '${Country}'
  },
  {
    groupPath: 'Region',
    headerFormat: '${Region}'
  }
];
```

Use `${FieldName}` placeholders for fields that exist in the grouped data. If you want totals or aggregates in the header text, include those values in the data source before binding.

### Header Alignment

Use `headerAlignment` to control how the header text is placed inside the header area.

```typescript
public levels = [
  {
    groupPath: 'Region',
    headerFormat: '${Region}',
    headerAlignment: 'Center'
  }
];
```

**Common alignment values:**

- `Near`
- `Center`
- `Far`

## Header Height and Styling

### Custom Header Height

Use `headerHeight` to control the height reserved for a group header.

```typescript
public levels = [
  {
    groupPath: 'Category',
    headerHeight: 50
  }
];
```

Larger header heights are useful when the header is more important or when the header text needs more vertical space.

### Header Text Styling

Use `headerStyle` to control the header text appearance. Use `fill` to control the group background color.

```typescript
public levels = [
  {
    groupPath: 'Region',
    fill: '#2563eb',
    headerStyle: {
      color: '#ffffff',
      fontFamily: 'Arial',
      size: '14px',
      fontWeight: '600',
      opacity: 1
    }
  }
];
```

### Multi-Level Header Styling

Style each hierarchy level differently to make outer groups and inner groups easier to distinguish.

```typescript
public levels = [
  {
    groupPath: 'Continent',
    headerHeight: 50,
    fill: '#1d4ed8',
    headerStyle: {
      size: '18px',
      fontWeight: '700',
      color: '#ffffff'
    }
  },
  {
    groupPath: 'Country',
    headerHeight: 36,
    fill: '#dbeafe',
    headerStyle: {
      size: '13px',
      fontWeight: '500',
      color: '#111827'
    }
  }
];
```

This makes outer levels more prominent and inner levels more compact.

## Complete Hierarchical Example

```typescript
import { Component, signal } from '@angular/core';
import { TreeMapModule } from '@syncfusion/ej2-angular-treemap';

@Component({
  selector: 'app-treemap',
  standalone: true,
  imports: [TreeMapModule],
  template: `
    <ejs-treemap
      id="treemap-container"
      [dataSource]="hierarchicalData()"
      weightValuePath="Sales"
      layoutType="Squarified"
      [levels]="levels"
      [leafItemSettings]="leafItemSettings">
    </ejs-treemap>
  `,
  styles: [`
    #treemap-container {
      display: block;
      width: 100%;
      height: 560px;
    }
  `]
})
export class TreeMapComponent {
  public hierarchicalData = signal([
    { Region: 'Asia', Country: 'India', Product: 'Software', Sales: 15000 },
    { Region: 'Asia', Country: 'China', Product: 'Hardware', Sales: 18000 },
    { Region: 'Asia', Country: 'Japan', Product: 'Services', Sales: 12000 },
    { Region: 'Europe', Country: 'Germany', Product: 'Services', Sales: 12000 },
    { Region: 'Europe', Country: 'France', Product: 'Software', Sales: 10000 },
    { Region: 'Europe', Country: 'Italy', Product: 'Hardware', Sales: 13000 }
  ]);

  public levels = [
    {
      groupPath: 'Region',
      groupGap: 8,
      headerFormat: '${Region}',
      headerHeight: 46,
      fill: '#1d4ed8',
      headerStyle: {
        color: '#ffffff',
        size: '14px',
        fontWeight: '700'
      }
    },
    {
      groupPath: 'Country',
      groupGap: 5,
      headerFormat: '${Country}',
      headerHeight: 34,
      fill: '#dbeafe',
      headerStyle: {
        color: '#111827',
        size: '12px',
        fontWeight: '500'
      }
    }
  ];

  public leafItemSettings = {
    labelPath: 'Product',
    showLabels: true,
    labelPosition: 'Center',
    gap: 4,
    border: { color: '#ffffff', width: 1 }
  };
}
```

## Best Practices

### DO: Use Clear, Descriptive Group Paths

```typescript
public levels = [
  { groupPath: 'Department' },
  { groupPath: 'Category' },
  { groupPath: 'Region' }
];
```

Use field names that clearly describe the hierarchy level.

### DON'T: Use Ambiguous Field Names

```typescript
public levels = [
  { groupPath: 'D' },
  { groupPath: 'Cat' }
];
```

Avoid unclear abbreviations because they make the TreeMap harder to maintain and debug.

### DO: Match Layout to Data Type

```typescript
layoutType="Squarified"
```

Use `Squarified` when balanced rectangles and readability matter most.

```typescript
layoutType="SliceAndDiceVertical"
```

Use slice-and-dice layouts when you want a stronger directional visual grouping.

### DO: Use Appropriate Header Heights

```typescript
public levels = [
  {
    groupPath: 'Category',
    headerHeight: 50
  },
  {
    groupPath: 'SubCategory',
    headerHeight: 35
  }
];
```

Outer hierarchy levels can usually justify larger headers than inner levels.

### DO: Limit Hierarchy Depth

```typescript
public levels = [
  { groupPath: 'L1' },
  { groupPath: 'L2' },
  { groupPath: 'L3' }
];
```

Three levels are usually easier to scan than very deep hierarchies. Use more levels only when the grouping remains clear and readable.

# Print, Export, and Accessibility in Angular TreeMap

## Table of Contents

- [Print Functionality](#print-functionality)
  - [Enable Print](#enable-print)
  - [Print Options](#print-options)
- [Image Export](#image-export)
  - [Export as PNG](#export-as-png)
  - [Export as JPEG](#export-as-jpeg)
  - [Export as SVG](#export-as-svg)
  - [Export to Base64](#export-to-base64)
  - [Export Configuration](#export-configuration)
- [PDF Export](#pdf-export)
  - [Enable PDF Export](#enable-pdf-export)
  - [PDF Orientation](#pdf-orientation)
  - [Multiple Exports](#multiple-exports)
- [Complete Export Example](#complete-export-example)
- [Accessibility Overview](#accessibility-overview)
  - [Accessibility Standards](#accessibility-standards)
- [WCAG Compliance](#wcag-compliance)
  - [Semantic HTML](#semantic-html)
  - [Color Contrast](#color-contrast)
- [Screen Reader Support](#screen-reader-support)
  - [ARIA Labels](#aria-labels)
  - [Custom Accessibility Labels](#custom-accessibility-labels)
- [Color Contrast Best Practices](#color-contrast-best-practices)
  - [DO: Use High Contrast Colors](#do-use-high-contrast-colors)
  - [DON'T: Use Low Contrast Combinations](#dont-use-low-contrast-combinations)
  - [Accessible Color Palette](#accessible-color-palette)
- [Complete Accessible TreeMap](#complete-accessible-treemap)
- [Accessibility Checklist](#accessibility-checklist)
- [Testing for Accessibility](#testing-for-accessibility)
  - [Browser DevTools](#browser-devtools)
  - [Screen Reader Testing](#screen-reader-testing)
- [Troubleshooting](#troubleshooting)

## Print Functionality

Syncfusion Angular TreeMap supports built-in printing through the `allowPrint` property and the `print()` instance method.

### Enable Print

```typescript
import { Component, signal, ViewChild } from '@angular/core';
import {
  TreeMapModule,
  TreeMapComponent as SyncTreeMapComponent,
  PrintService
} from '@syncfusion/ej2-angular-treemap';

@Component({
  selector: 'app-treemap',
  standalone: true,
  imports: [TreeMapModule],
  providers: [PrintService],
  template: `
    <div class="toolbar">
      <button type="button" (click)="printTreeMap()">Print</button>
    </div>

    <ejs-treemap
      #treemap
      id="treemap-container"
      [dataSource]="data()"
      weightValuePath="Sales"
      [allowPrint]="true"
      [leafItemSettings]="leafItemSettings">
    </ejs-treemap>
  `,
  styles: [`
    :host {
      display: block;
      padding: 12px;
      box-sizing: border-box;
      font-family: Arial, Helvetica, sans-serif;
    }

    .toolbar {
      margin-bottom: 12px;
    }

    button {
      padding: 8px 12px;
      border: 1px solid #cbd5e1;
      background: #ffffff;
      border-radius: 8px;
      cursor: pointer;
    }

    #treemap-container {
      display: block;
      width: 100%;
      height: 520px;
    }
  `]
})
export class TreeMapComponent {
  @ViewChild('treemap')
  public treemap?: SyncTreeMapComponent;

  public data = signal([
    { Product: 'Laptop', Sales: 15000 },
    { Product: 'Phone', Sales: 12000 }
  ]);

  public leafItemSettings = {
    labelPath: 'Product',
    gap: 4,
    border: { color: '#ffffff', width: 1 }
  };

  public printTreeMap(): void {
    this.treemap?.print();
  }
}
```

**Key Properties:**

- `allowPrint`: Enables print capability.
- `print()`: Opens the browser print flow for the TreeMap.

### Print Options

Use the `print()` method on the TreeMap instance to print the rendered TreeMap.

```typescript
public printTreeMap(): void {
  this.treemap?.print();
}
```

## Image Export

TreeMap supports built-in image export through `allowImageExport` and the `export()` instance method.

### Export as PNG

```typescript
import { Component, signal, ViewChild } from '@angular/core';
import {
  TreeMapModule,
  TreeMapComponent as SyncTreeMapComponent,
  ImageExportService
} from '@syncfusion/ej2-angular-treemap';

@Component({
  selector: 'app-treemap',
  standalone: true,
  imports: [TreeMapModule],
  providers: [ImageExportService],
  template: `
    <button type="button" (click)="exportPNG()">Export PNG</button>

    <ejs-treemap
      #treemap
      [dataSource]="data()"
      weightValuePath="Sales"
      [allowImageExport]="true"
      [leafItemSettings]="leafItemSettings">
    </ejs-treemap>
  `
})
export class TreeMapComponent {
  @ViewChild('treemap')
  public treemap?: SyncTreeMapComponent;

  public data = signal([
    { Product: 'Laptop', Sales: 15000 },
    { Product: 'Phone', Sales: 12000 }
  ]);

  public leafItemSettings = {
    labelPath: 'Product'
  };

  public exportPNG(): void {
    this.treemap?.export('PNG', 'treemap');
  }
}
```

### Export as JPEG

```typescript
public exportJPEG(): void {
  this.treemap?.export('JPEG', 'treemap');
}
```

### Export as SVG

```typescript
public exportSVG(): void {
  this.treemap?.export('SVG', 'treemap');
}
```

### Export to Base64

Use `allowDownload = false` when you want the exported result programmatically. Base64 export is useful for image workflows such as preview, upload, or storage. Use `PNG` or `JPEG` for this pattern.

```typescript
public async exportBase64(): Promise<void> {
  if (!this.treemap) {
    return;
  }

  const base64Data = await this.treemap.export(
    'PNG',
    'treemap',
    undefined,
    false
  );

  console.log(base64Data);
}
```

### Export Configuration

```typescript
export(
  type: 'PNG' | 'JPEG' | 'SVG' | 'PDF',
  fileName: string,
  orientation?: PdfPageOrientation,
  allowDownload?: boolean
)
```

- `orientation` is used for PDF export.
- `allowDownload` can be set to `false` when you want the result programmatically instead of downloading immediately.

## PDF Export

TreeMap supports built-in PDF export through `allowPdfExport` and the `export()` instance method.

### Enable PDF Export

```typescript
import { Component, signal, ViewChild } from '@angular/core';
import {
  TreeMapModule,
  TreeMapComponent as SyncTreeMapComponent,
  PdfExportService
} from '@syncfusion/ej2-angular-treemap';

@Component({
  selector: 'app-treemap',
  standalone: true,
  imports: [TreeMapModule],
  providers: [PdfExportService],
  template: `
    <button type="button" (click)="exportPDF()">Export PDF</button>

    <ejs-treemap
      #treemap
      [dataSource]="data()"
      weightValuePath="Sales"
      [allowPdfExport]="true"
      [leafItemSettings]="leafItemSettings">
    </ejs-treemap>
  `
})
export class TreeMapComponent {
  @ViewChild('treemap')
  public treemap?: SyncTreeMapComponent;

  public data = signal([
    { Product: 'Laptop', Sales: 15000 },
    { Product: 'Phone', Sales: 12000 }
  ]);

  public leafItemSettings = {
    labelPath: 'Product'
  };

  public exportPDF(): void {
    this.treemap?.export('PDF', 'treemap');
  }
}
```

### PDF Orientation

Use `PdfPageOrientation.Portrait` or `PdfPageOrientation.Landscape` when exporting PDF.

```typescript
import { PdfPageOrientation } from '@syncfusion/ej2-pdf-export';

public exportPDFPortrait(): void {
  this.treemap?.export('PDF', 'treemap', PdfPageOrientation.Portrait);
}

public exportPDFLandscape(): void {
  this.treemap?.export('PDF', 'treemap', PdfPageOrientation.Landscape);
}
```

### Multiple Exports

Each export call produces a separate export action.

```typescript
import { PdfPageOrientation } from '@syncfusion/ej2-pdf-export';

public exportAll(): void {
  this.treemap?.export('PNG', 'treemap');
  this.treemap?.export('JPEG', 'treemap');
  this.treemap?.export('SVG', 'treemap');
  this.treemap?.export('PDF', 'treemap', PdfPageOrientation.Landscape);
}
```

## Complete Export Example

```typescript
import { Component, signal, ViewChild } from '@angular/core';
import {
  TreeMapModule,
  TreeMapComponent as SyncTreeMapComponent,
  PrintService,
  ImageExportService,
  PdfExportService
} from '@syncfusion/ej2-angular-treemap';
import { PdfPageOrientation } from '@syncfusion/ej2-pdf-export';

@Component({
  selector: 'app-treemap',
  standalone: true,
  imports: [TreeMapModule],
  providers: [PrintService, ImageExportService, PdfExportService],
  template: `
    <div class="toolbar">
      <button type="button" (click)="exportPNG()">PNG</button>
      <button type="button" (click)="exportJPEG()">JPEG</button>
      <button type="button" (click)="exportSVG()">SVG</button>
      <button type="button" (click)="exportPDF()">PDF</button>
      <button type="button" (click)="printTreeMap()">Print</button>
    </div>

    <ejs-treemap
      #treemap
      id="treemap-container"
      [dataSource]="data()"
      weightValuePath="Sales"
      [allowPrint]="true"
      [allowImageExport]="true"
      [allowPdfExport]="true"
      [leafItemSettings]="leafItemSettings">
    </ejs-treemap>
  `,
  styles: [`
    :host {
      display: block;
      padding: 12px;
      box-sizing: border-box;
      font-family: Arial, Helvetica, sans-serif;
    }

    .toolbar {
      display: flex;
      gap: 8px;
      margin-bottom: 12px;
      flex-wrap: wrap;
    }

    .toolbar button {
      padding: 8px 12px;
      border: 1px solid #cbd5e1;
      background: #ffffff;
      border-radius: 8px;
      cursor: pointer;
    }

    #treemap-container {
      display: block;
      width: 100%;
      height: 520px;
    }
  `]
})
export class TreeMapExportComponent {
  @ViewChild('treemap')
  public treemap?: SyncTreeMapComponent;

  public data = signal([
    { Product: 'Laptop', Sales: 15000 },
    { Product: 'Phone', Sales: 12000 },
    { Product: 'Tablet', Sales: 8000 }
  ]);

  public leafItemSettings = {
    labelPath: 'Product',
    gap: 4,
    border: { color: '#ffffff', width: 1 }
  };

  public exportPNG(): void {
    this.treemap?.export('PNG', 'treemap');
  }

  public exportJPEG(): void {
    this.treemap?.export('JPEG', 'treemap');
  }

  public exportSVG(): void {
    this.treemap?.export('SVG', 'treemap');
  }

  public exportPDF(): void {
    this.treemap?.export('PDF', 'treemap', PdfPageOrientation.Portrait);
  }

  public printTreeMap(): void {
    this.treemap?.print();
  }
}
```

## Accessibility Overview

Syncfusion Angular TreeMap includes built-in accessibility support and follows common accessibility guidance.

### Accessibility Standards

TreeMap accessibility support aligns with commonly referenced standards such as:

- WCAG 2.2
- Section 508
- ADA
- WAI-ARIA patterns

## WCAG Compliance

### Semantic HTML

TreeMap renders accessibility roles and labels for its own structure.

**Built-in TreeMap accessibility patterns include:**

- `role="region"` for non-interactive TreeMap areas
- `role="button"` for interactive areas such as selection or highlight capable items
- `aria-label` for title, subtitle, data labels, legend title, and legend item labels

### Color Contrast

Color contrast depends on the fill, palette, template styling, and label colors you choose.

```typescript
public leafItemSettings = {
  labelPath: 'Product',
  fill: '#0066cc',
  labelStyle: {
    color: '#ffffff'
  }
};
```

Use high-contrast text over each fill color, especially when labels remain visible inside leaf rectangles.

## Screen Reader Support

TreeMap supports screen reader announcements for visible and named TreeMap content.

### ARIA Labels

TreeMap automatically exposes accessible labels for:

- data labels
- title
- subtitle
- legend title
- legend item labels

### Custom Accessibility Labels

Use meaningful TreeMap text such as a clear title, readable labels, descriptive tooltips, legends, and an optional `description` value.

```typescript
import { Component, signal } from '@angular/core';
import {
  TreeMapModule,
  TreeMapTooltipService,
  TreeMapLegendService
} from '@syncfusion/ej2-angular-treemap';

@Component({
  selector: 'app-treemap',
  standalone: true,
  imports: [TreeMapModule],
  providers: [TreeMapTooltipService, TreeMapLegendService],
  template: `
    <ejs-treemap
      [dataSource]="data()"
      weightValuePath="Sales"
      [description]="'Product sales distribution by category'"
      [titleSettings]="titleSettings"
      [leafItemSettings]="leafItemSettings"
      [tooltipSettings]="tooltipSettings"
      [legendSettings]="legendSettings">
    </ejs-treemap>
  `
})
export class TreeMapComponent {
  public data = signal([
    { Product: 'Laptop', Sales: 15000, Category: 'Electronics' },
    { Product: 'Chair', Sales: 8000, Category: 'Furniture' }
  ]);

  public titleSettings = {
    text: 'Product Sales by Category'
  };

  public leafItemSettings = {
    labelPath: 'Product'
  };

  public tooltipSettings = {
    visible: true,
    format: 'Product: ${Product}<br/>Sales: ${Sales}<br/>Category: ${Category}'
  };

  public legendSettings = {
    visible: true
  };
}
```

## Color Contrast Best Practices

### DO: Use High Contrast Colors

```typescript
public leafItemSettings = {
  fill: '#0066cc',
  labelStyle: {
    color: '#ffffff'
  }
};
```

Dark fill with light text is generally safer for readability.

### DON'T: Use Low Contrast Combinations

```typescript
public leafItemSettings = {
  fill: '#0066dd',
  labelStyle: {
    color: '#0055cc'
  }
};
```

Avoid similar foreground and background colors because labels become hard to read.

### Accessible Color Palette

Use clearly separated colors for categories and keep label contrast readable.

```typescript
public palette = [
  '#0066cc',
  '#006600',
  '#cc0000',
  '#ffcc00'
];
```

## Complete Accessible TreeMap

```typescript
import { Component, signal } from '@angular/core';
import {
  TreeMapModule,
  TreeMapTooltipService,
  TreeMapLegendService
} from '@syncfusion/ej2-angular-treemap';

@Component({
  selector: 'app-treemap',
  standalone: true,
  imports: [TreeMapModule],
  providers: [TreeMapTooltipService, TreeMapLegendService],
  template: `
    <ejs-treemap
      id="treemap-container"
      [dataSource]="data()"
      weightValuePath="Sales"
      [description]="'Accessible treemap showing product sales grouped by category'"
      [titleSettings]="titleSettings"
      [tabIndex]="0"
      [leafItemSettings]="leafItemSettings"
      [tooltipSettings]="tooltipSettings"
      [legendSettings]="legendSettings">
    </ejs-treemap>
  `,
  styles: [`
    #treemap-container {
      display: block;
      width: 100%;
      height: 520px;
    }
  `]
})
export class TreeMapAccessibleComponent {
  public data = signal([
    { Product: 'Laptop', Sales: 15000, Category: 'Electronics' },
    { Product: 'Chair', Sales: 8000, Category: 'Furniture' },
    { Product: 'Shirt', Sales: 5000, Category: 'Clothing' }
  ]);

  public titleSettings = {
    text: 'Product Sales by Category'
  };

  public leafItemSettings = {
    labelPath: 'Product',
    showLabels: true,
    labelFormat: '${Product}: ${Sales}',
    fill: '#0066cc',
    labelStyle: {
      color: '#ffffff'
    },
    gap: 4,
    border: { color: '#ffffff', width: 1 }
  };

  public tooltipSettings = {
    visible: true,
    format: 'Product: ${Product}<br/>Sales: ${Sales}<br/>Category: ${Category}'
  };

  public legendSettings = {
    visible: true
  };
}
```

## Accessibility Checklist

- use a meaningful TreeMap title
- provide readable data labels
- use strong text-to-fill contrast
- provide tooltip context when labels are short
- provide a legend when color carries meaning
- avoid using color as the only indicator
- set `tabIndex` if focus order matters in the page
- provide clear surrounding controls for print and export workflows
- test with real assistive technologies

## Testing for Accessibility

### Browser DevTools

Use browser accessibility inspection tools to validate:

- contrast
- focusability
- ARIA names
- semantic structure

### Screen Reader Testing

Test with common screen readers and confirm that the TreeMap title, data labels, and legend content are spoken clearly.

Recommended practical test flow:

1. verify the title is announced
2. verify visible labels are announced
3. verify legend item labels are announced
4. verify tooltip-only information is also available somewhere meaningful if it is essential

## Troubleshooting

**Issue:** Print button does nothing

**Solution:** Make sure `allowPrint` is enabled, `PrintService` is provided, and the TreeMap instance is available through `@ViewChild`.

```typescript
providers: [PrintService]
```

```typescript
[allowPrint]="true"
```

```typescript
@ViewChild('treemap')
public treemap?: SyncTreeMapComponent;
```

**Issue:** Image export is not working

**Solution:** Make sure `allowImageExport` is enabled and `ImageExportService` is provided.

```typescript
providers: [ImageExportService]
```

```typescript
[allowImageExport]="true"
```

**Issue:** PDF export is not working

**Solution:** Make sure `allowPdfExport` is enabled and `PdfExportService` is provided.

```typescript
providers: [PdfExportService]
```

```typescript
[allowPdfExport]="true"
```

**Issue:** Base64 export is undefined

**Solution:** Check that the TreeMap instance exists before calling `export(...)`, and use `allowDownload = false`.

```typescript
public async exportBase64(): Promise<void> {
  if (!this.treemap) {
    return;
  }

  const base64Data = await this.treemap.export(
    'PNG',
    'treemap',
    undefined,
    false
  );

  console.log(base64Data);
}
```

**Issue:** Screen reader output feels unclear

**Solution:** Provide meaningful title, description, labels, and legend text.

```typescript
public titleSettings = {
  text: 'Product Sales by Category'
};
```

```typescript
[description]="'Accessible treemap showing product sales grouped by category'"
```

**Issue:** Focus order is not clear in the page

**Solution:** Use `tabIndex` to place the TreeMap in the page focus flow.

```typescript
[tabIndex]="0"
```

# Selection and Interactivity in Angular TreeMap

## Table of Contents 

- [Selection Configuration](#selection-configuration)
- [Selection Customization](#selection-customization)
  - [Selection Color](#selection-color)
  - [Selection Border Styling](#selection-border-styling)
  - [Opacity for Selected Items](#opacity-for-selected-items)
- [Highlight Effects](#highlight-effects)
- [Click Events and Selection](#click-events-and-selection)
  - [Handle Item Click](#handle-item-click)
  - [Event Properties](#event-properties)
  - [Programmatic Selection](#programmatic-selection)
- [Legend Interaction](#legend-interaction)
  - [Selection via Legend](#selection-via-legend)
  - [Highlight via Legend Hover](#highlight-via-legend-hover)
- [Double-Click Interaction](#double-click-interaction)
  - [Handle Double-Click](#handle-double-click)
- [Right-Click Context Menu](#right-click-context-menu)
  - [Handle Right-Click](#handle-right-click)
- [Group Selection](#group-selection)
  - [Select by Group](#select-by-group)
- [Clear Selection](#clear-selection)
  - [Deselect All Items](#deselect-all-items)
- [Complete Interactive Example](#complete-interactive-example)
- [Best Practices](#best-practices)
  - [DO: Provide Visual Feedback for Selection](#do-provide-visual-feedback-for-selection)
  - [DON'T: Use Similar Colors for Selection and Highlight](#dont-use-similar-colors-for-selection-and-highlight)
  - [DO: Show Count of Selected Items](#do-show-count-of-selected-items)
  - [DO: Provide Clear Selection Actions](#do-provide-clear-selection-actions)
  - [DO: Handle Multiple Selection Properly](#do-handle-multiple-selection-properly)
  - [Troubleshooting](#troubleshooting)

## Selection Configuration

Syncfusion Angular TreeMap supports built-in item selection through `selectionSettings` and hover interaction through `highlightSettings`. Use `selectItem(levelOrder, isSelected?)` when you need programmatic selection or deselection.

```typescript
import { Component, signal } from '@angular/core';
import {
  TreeMapModule,
  TreeMapSelectionService
} from '@syncfusion/ej2-angular-treemap';

@Component({
  selector: 'app-treemap',
  standalone: true,
  imports: [TreeMapModule],
  providers: [TreeMapSelectionService],
  template: `
    <ejs-treemap
      id="treemap-container"
      [dataSource]="data()"
      weightValuePath="Sales"
      [selectionSettings]="selectionSettings"
      [leafItemSettings]="leafItemSettings">
    </ejs-treemap>
  `,
  styles: [`
    #treemap-container {
      display: block;
      width: 100%;
      height: 500px;
    }
  `]
})
export class TreeMapComponent {
  public data = signal([
    { Product: 'Laptop', Sales: 15000 },
    { Product: 'Phone', Sales: 12000 },
    { Product: 'Tablet', Sales: 8000 }
  ]);

  public selectionSettings = {
    enable: true,
    fill: '#0066cc',
    border: { color: '#000000', width: 2 }
  };

  public leafItemSettings = {
    labelPath: 'Product',
    gap: 4,
    border: { color: '#ffffff', width: 1 }
  };
}
```

**Key Properties:**

- `enable`: Enables or disables selection.
- `fill`: Applies the selection color.
- `border`: Defines the border color and width for selected items.

## Selection Customization

Selection appearance is controlled through the `selectionSettings` object.

### Selection Color

```typescript
public selectionSettings = {
  enable: true,
  fill: '#ff6600',
  border: { color: '#333333', width: 2 }
};
```

### Selection Border Styling

```typescript
public selectionSettings = {
  enable: true,
  fill: '#0066cc',
  border: { color: '#333333', width: 3 }
};
```

### Opacity for Selected Items

Use an RGBA color in `fill` when you want a semi-transparent selection style.

```typescript
public selectionSettings = {
  enable: true,
  fill: 'rgba(0, 102, 204, 0.7)',
  border: { color: '#003366', width: 2 }
};
```

## Highlight Effects

Use `highlightSettings` to apply hover-based highlighting.

```typescript
import { Component, signal } from '@angular/core';
import {
  TreeMapModule,
  TreeMapHighlightService
} from '@syncfusion/ej2-angular-treemap';

@Component({
  selector: 'app-treemap',
  standalone: true,
  imports: [TreeMapModule],
  providers: [TreeMapHighlightService],
  template: `
    <ejs-treemap
      [dataSource]="data()"
      weightValuePath="Sales"
      [highlightSettings]="highlightSettings"
      [leafItemSettings]="leafItemSettings">
    </ejs-treemap>
  `
})
export class TreeMapComponent {
  public data = signal([
    { Product: 'Laptop', Sales: 15000 },
    { Product: 'Phone', Sales: 12000 },
    { Product: 'Tablet', Sales: 8000 }
  ]);

  public highlightSettings = {
    enable: true,
    fill: '#ffcc00',
    border: { color: '#ff9900', width: 2 }
  };

  public leafItemSettings = {
    labelPath: 'Product'
  };
}
```

## Click Events and Selection

TreeMap provides interaction events such as `itemClick`, `itemSelected`, `doubleClick`, and `rightClick`. Use these events to update surrounding Angular UI, show the selected item, or trigger application logic.

### Handle Item Click

```typescript
import { Component, signal } from '@angular/core';
import {
  TreeMapModule,
  IItemClickEventArgs
} from '@syncfusion/ej2-angular-treemap';

@Component({
  selector: 'app-treemap',
  standalone: true,
  imports: [TreeMapModule],
  template: `
    <ejs-treemap
      [dataSource]="data()"
      weightValuePath="Sales"
      [leafItemSettings]="leafItemSettings"
      (itemClick)="onItemClick($event)">
    </ejs-treemap>

    <p>{{ lastAction() }}</p>
  `
})
export class TreeMapComponent {
  public data = signal([
    { Product: 'Laptop', Sales: 15000 },
    { Product: 'Phone', Sales: 12000 }
  ]);

  public leafItemSettings = {
    labelPath: 'Product'
  };

  public lastAction = signal('No interaction yet.');

  public onItemClick(args: IItemClickEventArgs): void {
    const eventArgs = args as {
      name?: string;
      item?: { name?: string };
    };

    const itemName =
      eventArgs.item?.name ||
      eventArgs.name ||
      'Unknown item';

    this.lastAction.set(`Item clicked: ${itemName}`);
  }
}
```

### Event Properties

Use the event object to read the clicked item information. A practical approach is to read the display name, group name, and level-order information, then derive your own selection key from the grouped data.

```typescript
public onItemClick(args: IItemClickEventArgs): void {
  const eventArgs = args as {
    name?: string;
    groupName?: string;
    item?: {
      name?: string;
      groupName?: string;
      levelOrderName?: string;
    };
  };

  const itemName =
    eventArgs.item?.name ||
    eventArgs.name ||
    'Unknown item';

  const groupName =
    eventArgs.item?.groupName ||
    eventArgs.groupName ||
    '';

  const levelOrderName =
    eventArgs.item?.levelOrderName ||
    '';

  this.lastAction.set(
    `Item: ${itemName} | Group: ${groupName || 'N/A'} | Level Order: ${levelOrderName || 'N/A'}`
  );
}
```

### Programmatic Selection

Use `selectItem(levelOrder, isSelected?)` for programmatic selection and deselection.

```typescript
import { Component, signal, ViewChild } from '@angular/core';
import {
  TreeMapModule,
  TreeMapComponent as SyncTreeMapComponent,
  TreeMapSelectionService
} from '@syncfusion/ej2-angular-treemap';

@Component({
  selector: 'app-treemap',
  standalone: true,
  imports: [TreeMapModule],
  providers: [TreeMapSelectionService],
  template: `
    <button type="button" (click)="selectKnownItem()">Select Known Item</button>

    <ejs-treemap
      #treemap
      [dataSource]="data()"
      weightValuePath="Sales"
      [selectionSettings]="selectionSettings"
      [levels]="levels"
      [leafItemSettings]="leafItemSettings">
    </ejs-treemap>
  `
})
export class TreeMapComponent {
  @ViewChild('treemap')
  public treemap?: SyncTreeMapComponent;

  public data = signal([
    { Category: 'Electronics', Product: 'Laptop', Sales: 15000 },
    { Category: 'Electronics', Product: 'Phone', Sales: 12000 },
    { Category: 'Furniture', Product: 'Chair', Sales: 8000 }
  ]);

  public levels = [
    { groupPath: 'Category' }
  ];

  public leafItemSettings = {
    labelPath: 'Product'
  };

  public selectionSettings = {
    enable: true,
    fill: '#0066cc',
    border: { color: '#000000', width: 2 }
  };

  public selectKnownItem(): void {
    const levelOrder = ['Electronics', 'Laptop'];
    this.treemap?.selectItem(levelOrder, true);
  }
}
```

**Important:** `selectItem(...)` requires the level-order path of the group or item being selected.

## Legend Interaction

TreeMap selection and highlight can work together with legend interaction.

### Selection via Legend

When selection is enabled and the legend is visible, interacting with legend items can select the related TreeMap items.

```typescript
import { Component, signal } from '@angular/core';
import {
  TreeMapModule,
  TreeMapLegendService,
  TreeMapSelectionService
} from '@syncfusion/ej2-angular-treemap';

@Component({
  selector: 'app-treemap',
  standalone: true,
  imports: [TreeMapModule],
  providers: [TreeMapLegendService, TreeMapSelectionService],
  template: `
    <ejs-treemap
      [dataSource]="data()"
      weightValuePath="Sales"
      equalColorValuePath="Category"
      [legendSettings]="legendSettings"
      [selectionSettings]="selectionSettings"
      [leafItemSettings]="leafItemSettings">
    </ejs-treemap>
  `
})
export class TreeMapComponent {
  public data = signal([
    { Product: 'Laptop', Sales: 15000, Category: 'Electronics' },
    { Product: 'Phone', Sales: 12000, Category: 'Electronics' },
    { Product: 'Chair', Sales: 8000, Category: 'Furniture' }
  ]);

  public legendSettings = {
    visible: true
  };

  public selectionSettings = {
    enable: true,
    fill: '#0066cc',
    border: { color: '#000000', width: 2 }
  };

  public leafItemSettings = {
    labelPath: 'Product',
    colorMapping: [
      { value: 'Electronics', color: '#2563eb', label: 'Electronics' },
      { value: 'Furniture', color: '#16a34a', label: 'Furniture' }
    ]
  };
}
```

### Highlight via Legend Hover

When highlight is enabled and the legend is visible, hovering related legend items can highlight the matching TreeMap items.

```typescript
import { Component, signal } from '@angular/core';
import {
  TreeMapModule,
  TreeMapLegendService,
  TreeMapHighlightService
} from '@syncfusion/ej2-angular-treemap';

@Component({
  selector: 'app-treemap',
  standalone: true,
  imports: [TreeMapModule],
  providers: [TreeMapLegendService, TreeMapHighlightService],
  template: `
    <ejs-treemap
      [dataSource]="data()"
      weightValuePath="Sales"
      equalColorValuePath="Category"
      [legendSettings]="legendSettings"
      [highlightSettings]="highlightSettings"
      [leafItemSettings]="leafItemSettings">
    </ejs-treemap>
  `
})
export class TreeMapComponent {
  public data = signal([
    { Product: 'Laptop', Sales: 15000, Category: 'Electronics' },
    { Product: 'Chair', Sales: 8000, Category: 'Furniture' }
  ]);

  public legendSettings = {
    visible: true
  };

  public highlightSettings = {
    enable: true,
    fill: '#ffcc00',
    border: { color: '#ff9900', width: 2 }
  };

  public leafItemSettings = {
    labelPath: 'Product',
    colorMapping: [
      { value: 'Electronics', color: '#2563eb', label: 'Electronics' },
      { value: 'Furniture', color: '#16a34a', label: 'Furniture' }
    ]
  };
}
```

## Double-Click Interaction

Use the `doubleClick` event to handle double-click interactions.

### Handle Double-Click

```typescript
import { Component, signal } from '@angular/core';
import {
  TreeMapModule,
  IDoubleClickEventArgs
} from '@syncfusion/ej2-angular-treemap';

@Component({
  selector: 'app-treemap',
  standalone: true,
  imports: [TreeMapModule],
  template: `
    <ejs-treemap
      [dataSource]="data()"
      weightValuePath="Sales"
      [leafItemSettings]="leafItemSettings"
      (doubleClick)="onDoubleClick($event)">
    </ejs-treemap>

    <p>{{ lastAction() }}</p>
  `
})
export class TreeMapComponent {
  public data = signal([
    { Product: 'Laptop', Sales: 15000 },
    { Product: 'Phone', Sales: 12000 }
  ]);

  public leafItemSettings = {
    labelPath: 'Product'
  };

  public lastAction = signal('No interaction yet.');

  public onDoubleClick(args: IDoubleClickEventArgs): void {
    const eventArgs = args as {
      name?: string;
      item?: { name?: string };
    };

    const itemName =
      eventArgs.item?.name ||
      eventArgs.name ||
      'Unknown item';

    this.lastAction.set(`TreeMap double-clicked: ${itemName}`);
  }
}
```

## Right-Click Context Menu

Use the `rightClick` event to handle context-menu style interactions.

### Handle Right-Click

```typescript
import { Component, signal } from '@angular/core';
import {
  TreeMapModule,
  IMouseMoveEventArgs
} from '@syncfusion/ej2-angular-treemap';

@Component({
  selector: 'app-treemap',
  standalone: true,
  imports: [TreeMapModule],
  template: `
    <ejs-treemap
      [dataSource]="data()"
      weightValuePath="Sales"
      [leafItemSettings]="leafItemSettings"
      (rightClick)="onRightClick($event)">
    </ejs-treemap>

    <p>{{ lastAction() }}</p>
  `
})
export class TreeMapComponent {
  public data = signal([
    { Product: 'Laptop', Sales: 15000 },
    { Product: 'Phone', Sales: 12000 }
  ]);

  public leafItemSettings = {
    labelPath: 'Product'
  };

  public lastAction = signal('No interaction yet.');

  public onRightClick(args: IMouseMoveEventArgs): void {
    const eventArgs = args as {
      name?: string;
      item?: { name?: string };
    };

    const itemName =
      eventArgs.item?.name ||
      eventArgs.name ||
      'Unknown item';

    this.lastAction.set(`TreeMap right-clicked: ${itemName}`);
  }
}
```

## Group Selection

TreeMap supports selecting groups and items through `selectItem(...)`.

### Select by Group

```typescript
import { Component, signal, ViewChild } from '@angular/core';
import {
  TreeMapModule,
  TreeMapComponent as SyncTreeMapComponent,
  TreeMapSelectionService
} from '@syncfusion/ej2-angular-treemap';

@Component({
  selector: 'app-treemap',
  standalone: true,
  imports: [TreeMapModule],
  providers: [TreeMapSelectionService],
  template: `
    <button type="button" (click)="selectElectronicsGroup()">Select Electronics Group</button>

    <ejs-treemap
      #treemap
      [dataSource]="data()"
      weightValuePath="Sales"
      [selectionSettings]="selectionSettings"
      [levels]="levels"
      [leafItemSettings]="leafItemSettings">
    </ejs-treemap>
  `
})
export class TreeMapComponent {
  @ViewChild('treemap')
  public treemap?: SyncTreeMapComponent;

  public data = signal([
    { Category: 'Electronics', Product: 'Laptop', Sales: 15000 },
    { Category: 'Electronics', Product: 'Phone', Sales: 12000 },
    { Category: 'Furniture', Product: 'Chair', Sales: 8000 }
  ]);

  public levels = [
    { groupPath: 'Category' }
  ];

  public selectionSettings = {
    enable: true,
    fill: '#0066cc',
    border: { color: '#000000', width: 2 }
  };

  public leafItemSettings = {
    labelPath: 'Product'
  };

  public selectElectronicsGroup(): void {
    const groupLevelOrder = ['Electronics'];
    this.treemap?.selectItem(groupLevelOrder, true);
  }
}
```

## Clear Selection

Clear selection by deselecting the tracked level-order paths that you maintain in application state.

### Deselect All Items

```typescript
import { Component, signal, ViewChild } from '@angular/core';
import {
  TreeMapModule,
  TreeMapComponent as SyncTreeMapComponent,
  TreeMapSelectionService
} from '@syncfusion/ej2-angular-treemap';

type TreeMapEventDetails = {
  name?: string;
  groupName?: string;
  levelOrderName?: string;
  item?: {
    name?: string;
    groupName?: string;
    levelOrderName?: string;
  };
};

@Component({
  selector: 'app-treemap',
  standalone: true,
  imports: [TreeMapModule],
  providers: [TreeMapSelectionService],
  template: `
    <button type="button" (click)="clearSelection()">Clear Selection</button>

    <ejs-treemap
      #treemap
      id="treemap-container"
      [dataSource]="data()"
      weightValuePath="Sales"
      [selectionSettings]="selectionSettings"
      [levels]="levels"
      [leafItemSettings]="leafItemSettings"
      (itemClick)="onItemClick($event)">
    </ejs-treemap>
  `,
  styles: [`
    #treemap-container {
      display: block;
      width: 100%;
      height: 500px;
      margin-top: 12px;
    }
  `]
})
export class TreeMapComponent {
  @ViewChild('treemap')
  public treemap?: SyncTreeMapComponent;

  public data = signal([
    { Category: 'Electronics', Product: 'Laptop', Sales: 15000 },
    { Category: 'Electronics', Product: 'Phone', Sales: 12000 },
    { Category: 'Furniture', Product: 'Chair', Sales: 8000 }
  ]);

  public levels = [
    { groupPath: 'Category' }
  ];

  public selectionSettings = {
    enable: true,
    fill: '#0066cc',
    border: { color: '#000000', width: 2 }
  };

  public leafItemSettings = {
    labelPath: 'Product'
  };

  public selectedLevelOrders = signal<string[][]>([]);

  public onItemClick(args: any): void {
    const levelOrder = this.getLevelOrder(args);

    if (!levelOrder) {
      return;
    }

    if (this.hasLevelOrder(levelOrder)) {
      this.selectedLevelOrders.update((items) =>
        items.filter(
          (existing) =>
            !(
              existing.length === levelOrder.length &&
              existing.every((value, index) => value === levelOrder[index])
            )
        )
      );
    } else {
      this.selectedLevelOrders.update((items) => [...items, levelOrder]);
    }
  }

  public clearSelection(): void {
    for (const levelOrder of this.selectedLevelOrders()) {
      this.treemap?.selectItem(levelOrder, false);
    }

    this.selectedLevelOrders.set([]);
  }

  private getEventDetails(args: any): TreeMapEventDetails {
    return args as TreeMapEventDetails;
  }

  private getLevelOrder(args: any): string[] | null {
    const details = this.getEventDetails(args);
    const levelOrderName = details.levelOrderName || details.item?.levelOrderName;

    if (levelOrderName) {
      return levelOrderName
        .split('#')
        .map((part) => part.trim())
        .filter(Boolean);
    }

    const groupName = details.item?.groupName || details.groupName;
    const itemName = details.item?.name || details.name;

    if (groupName && itemName && groupName !== itemName) {
      return [groupName, itemName];
    }

    if (groupName) {
      return [groupName];
    }

    if (itemName) {
      return [itemName];
    }

    return null;
  }

  private hasLevelOrder(levelOrder: string[]): boolean {
    return this.selectedLevelOrders().some(
      (existing) =>
        existing.length === levelOrder.length &&
        existing.every((value, index) => value === levelOrder[index])
    );
  }
}
```

## Complete Interactive Example

```typescript
import { Component, signal, computed, ViewChild } from '@angular/core';
import {
  TreeMapModule,
  TreeMapComponent as SyncTreeMapComponent,
  TreeMapLegendService,
  TreeMapSelectionService,
  TreeMapHighlightService,
  IItemClickEventArgs,
  IDoubleClickEventArgs,
  IMouseMoveEventArgs
} from '@syncfusion/ej2-angular-treemap';

type TreeMapEventDetails = {
  name?: string;
  groupName?: string;
  levelOrderName?: string;
  item?: {
    name?: string;
    groupName?: string;
    levelOrderName?: string;
  };
};

@Component({
  selector: 'app-treemap',
  standalone: true,
  imports: [TreeMapModule],
  providers: [
    TreeMapLegendService,
    TreeMapSelectionService,
    TreeMapHighlightService
  ],
  template: `
    <div class="toolbar">
      <button type="button" (click)="selectElectronicsGroup()">Select Electronics Group</button>
      <button type="button" (click)="clearSelection()">Clear</button>
      <span class="status">Tracked selections: {{ selectedCount() }}</span>
    </div>

    <ejs-treemap
      #treemap
      id="treemap-container"
      [dataSource]="data()"
      weightValuePath="Sales"
      equalColorValuePath="Category"
      [selectionSettings]="selectionSettings"
      [highlightSettings]="highlightSettings"
      [legendSettings]="legendSettings"
      [levels]="levels"
      [leafItemSettings]="leafItemSettings"
      (itemClick)="onItemClick($event)"
      (doubleClick)="onDoubleClick($event)"
      (rightClick)="onRightClick($event)">
    </ejs-treemap>

    <div class="event-panel">
      <h3>Last Interaction</h3>
      <p>{{ lastAction() }}</p>

      <h3 class="selected-title">Tracked Level Orders</h3>
      @if (selectedLevelOrders().length > 0) {
        <ul class="selected-list">
          @for (item of selectedLevelOrders(); track item.join(' > ')) {
            <li>{{ item.join(' > ') }}</li>
          }
        </ul>
      } @else {
        <p>No tracked selections.</p>
      }
    </div>
  `,
  styles: [`
    :host {
      display: block;
      padding: 12px;
      box-sizing: border-box;
      font-family: Arial, Helvetica, sans-serif;
    }

    .toolbar {
      display: flex;
      gap: 8px;
      align-items: center;
      flex-wrap: wrap;
      margin-bottom: 12px;
    }

    .toolbar button {
      padding: 8px 12px;
      border: 1px solid #cbd5e1;
      background: #ffffff;
      border-radius: 8px;
      cursor: pointer;
    }

    .status {
      margin-left: 8px;
      color: #374151;
    }

    #treemap-container {
      display: block;
      width: 100%;
      height: 520px;
    }

    .event-panel {
      margin-top: 16px;
      border: 1px solid #d1d5db;
      border-radius: 10px;
      padding: 12px;
      background: #f9fafb;
    }

    .event-panel h3 {
      margin: 0 0 8px;
      font-size: 16px;
    }

    .event-panel p {
      margin: 0 0 8px;
      color: #111827;
    }

    .selected-title {
      margin-top: 12px !important;
    }

    .selected-list {
      margin: 0;
      padding-left: 18px;
    }

    .selected-list li {
      margin-bottom: 6px;
    }
  `]
})
export class TreeMapComponent {
  @ViewChild('treemap')
  public treemap?: SyncTreeMapComponent;

  public data = signal([
    { Category: 'Electronics', Product: 'Laptop', Sales: 15000 },
    { Category: 'Electronics', Product: 'Phone', Sales: 12000 },
    { Category: 'Furniture', Product: 'Chair', Sales: 8000 },
    { Category: 'Clothing', Product: 'Shirt', Sales: 5000 }
  ]);

  public levels = [
    { groupPath: 'Category' }
  ];

  public selectionSettings = {
    enable: true,
    fill: '#0066cc',
    border: { color: '#000000', width: 2 }
  };

  public highlightSettings = {
    enable: true,
    fill: '#ffcc00',
    border: { color: '#ff9900', width: 2 }
  };

  public legendSettings = {
    visible: true
  };

  public leafItemSettings = {
    labelPath: 'Product',
    gap: 4,
    border: { color: '#ffffff', width: 1 },
    colorMapping: [
      { value: 'Electronics', color: '#2563eb', label: 'Electronics' },
      { value: 'Furniture', color: '#16a34a', label: 'Furniture' },
      { value: 'Clothing', color: '#ea580c', label: 'Clothing' }
    ]
  };

  public selectedLevelOrders = signal<string[][]>([]);
  public selectedCount = computed(() => this.selectedLevelOrders().length);
  public lastAction = signal('No interaction yet.');

  public onItemClick(args: IItemClickEventArgs): void {
    const itemName = this.getItemName(args);
    const levelOrder = this.getLevelOrder(args);

    if (levelOrder) {
      this.toggleTrackedLevelOrder(levelOrder);
    }

    this.lastAction.set(`Item clicked: ${itemName}`);
  }

  public onDoubleClick(args: IDoubleClickEventArgs): void {
    const itemName = this.getItemName(args);
    this.lastAction.set(`TreeMap double-clicked: ${itemName}`);
  }

  public onRightClick(args: IMouseMoveEventArgs): void {
    const itemName = this.getItemName(args);
    this.lastAction.set(`TreeMap right-clicked: ${itemName}`);
  }

  public selectElectronicsGroup(): void {
    const groupLevelOrder = ['Electronics'];
    this.treemap?.selectItem(groupLevelOrder, true);

    if (!this.hasLevelOrder(groupLevelOrder)) {
      this.selectedLevelOrders.update((items) => [...items, groupLevelOrder]);
    }

    this.lastAction.set('Selected group: Electronics');
  }

  public clearSelection(): void {
    for (const levelOrder of this.selectedLevelOrders()) {
      this.treemap?.selectItem(levelOrder, false);
    }

    this.selectedLevelOrders.set([]);
    this.lastAction.set('Selections cleared');
  }

  private getEventDetails(
    args: IItemClickEventArgs | IDoubleClickEventArgs | IMouseMoveEventArgs
  ): TreeMapEventDetails {
    return args as unknown as TreeMapEventDetails;
  }

  private getItemName(
    args: IItemClickEventArgs | IDoubleClickEventArgs | IMouseMoveEventArgs
  ): string {
    const details = this.getEventDetails(args);

    return (
      details.item?.name ||
      details.name ||
      details.item?.groupName ||
      details.groupName ||
      'Unknown item'
    );
  }

  private getLevelOrder(
    args: IItemClickEventArgs | IDoubleClickEventArgs | IMouseMoveEventArgs
  ): string[] | null {
    const details = this.getEventDetails(args);
    const levelOrderName = details.levelOrderName || details.item?.levelOrderName;

    if (levelOrderName) {
      return levelOrderName
        .split('#')
        .map((part) => part.trim())
        .filter(Boolean);
    }

    const groupName = details.item?.groupName || details.groupName;
    const itemName = details.item?.name || details.name;

    if (groupName && itemName && groupName !== itemName) {
      return [groupName, itemName];
    }

    if (groupName) {
      return [groupName];
    }

    if (itemName) {
      return [itemName];
    }

    return null;
  }

  private toggleTrackedLevelOrder(levelOrder: string[]): void {
    if (this.hasLevelOrder(levelOrder)) {
      this.selectedLevelOrders.update((items) =>
        items.filter(
          (existing) =>
            !(
              existing.length === levelOrder.length &&
              existing.every((value, index) => value === levelOrder[index])
            )
        )
      );
    } else {
      this.selectedLevelOrders.update((items) => [...items, levelOrder]);
    }
  }

  private hasLevelOrder(levelOrder: string[]): boolean {
    return this.selectedLevelOrders().some(
      (existing) =>
        existing.length === levelOrder.length &&
        existing.every((value, index) => value === levelOrder[index])
    );
  }
}
```

## Best Practices

### DO: Provide Visual Feedback for Selection

Use clearly distinct `fill` and `border` values in `selectionSettings` so selected items stand out immediately.

```typescript
public selectionSettings = {
  enable: true,
  fill: '#0066cc',
  border: { color: '#000000', width: 2 }
};
```

### DON'T: Use Similar Colors for Selection and Highlight

Selection and hover highlight should look different enough that users can tell whether an item is merely hovered or actually selected.

```typescript
public selectionSettings = {
  enable: true,
  fill: '#0066cc',
  border: { color: '#000000', width: 2 }
};

public highlightSettings = {
  enable: true,
  fill: '#ffcc00',
  border: { color: '#ff9900', width: 2 }
};
```

### DO: Show Count of Selected Items

Maintain a signal or derived state value and update the selected count from your application selection flow.

```typescript
public selectedCount = computed(() => this.selectedLevelOrders().length);
```

### DO: Provide Clear Selection Actions

Provide clear Angular actions such as “Select group” and “Clear selection”.

```typescript
<button type="button" (click)="selectElectronicsGroup()">Select Electronics Group</button>
<button type="button" (click)="clearSelection()">Clear</button>
```

### DO: Handle Multiple Selection Properly

Track selected level-order paths in application state and update them through your click and programmatic selection logic.

### Troubleshooting

**Issue:** Selection is not working

**Solution:** Ensure selection is enabled and use the `selectionSettings` binding.

```typescript
public selectionSettings = {
  enable: true,
  fill: '#0066cc',
  border: { color: '#000000', width: 2 }
};
```

**Issue:** Highlight and selection look too similar

**Solution:** Use clearly contrasting colors for `selectionSettings.fill` and `highlightSettings.fill`.

```typescript
public selectionSettings = {
  enable: true,
  fill: '#0066cc'
};

public highlightSettings = {
  enable: true,
  fill: '#ffcc00'
};
```

**Issue:** Click or selection-related event is not firing

**Solution:** Use the event names `itemClick`, `doubleClick`, and `rightClick`.

```typescript
(itemClick)="onItemClick($event)"
(doubleClick)="onDoubleClick($event)"
(rightClick)="onRightClick($event)"
```

**Issue:** Programmatic selection code is not selecting the expected item

**Solution:** Use the correct level-order path with `selectItem(levelOrder, isSelected?)`.

```typescript
this.treemap?.selectItem(['Electronics', 'Laptop'], true);
```

---
name: syncfusion-angular-treemap
description: Create and customize Syncfusion Angular TreeMap components for hierarchical data visualization. Use this skill when you need to implement a TreeMap, visualize hierarchical data structures, configure multi-level layouts, apply color mapping, enable drilldown navigation, add labels and tooltips, configure legends, handle selection and highlight, export to images or PDF, print, or customize internationalization and accessibility. Covers installation, data binding, layout types, levels, color mapping, labels, tooltips, legends, drilldown, interactivity, print/export, RTL, locale formatting, and accessibility.
metadata:
  author: "Syncfusion Inc"
  version: "34.1.29"
  category: "Data Visualization"
---

# Implementing Syncfusion Angular TreeMap

The TreeMap component visualizes hierarchical or grouped data as nested rectangles. Each rectangle represents a data item, and its size is determined by a numeric field mapped through `weightValuePath`. TreeMaps are useful for displaying structures such as product categories, regional breakdowns, market segments, or any grouped dataset where relative magnitude matters.

## When to Use This Skill

- **Visualizing hierarchical data**: Display grouped or multi-level data such as regions, departments, or product categories
- **Multi-level data visualization**: Show parent-child relationships using `levels` and `groupPath`
- **Creating drill-down interfaces**: Enable interactive navigation through hierarchy levels
- **Color-coding data**: Use range, equal, desaturation, palette, or direct color binding
- **Adding interactive features**: Implement selection, highlight, click, double-click, and right-click interactions
- **Customizing appearance**: Modify layout, colors, borders, labels, headers, legends, and templates
- **Displaying supplementary information**: Add labels, tooltips, legends, and formatted values
- **Exporting visualizations**: Print or export as PNG, JPEG, SVG, or PDF
- **International support**: Enable RTL, locale-specific number formatting, and culture-aware display
- **Accessibility**: Improve screen reader support, ARIA naming, contrast, and focus behavior

## Documentation and Navigation Guide

Choose your reference based on what you need to accomplish:

### API Reference
📄 **Read:** `references/api-reference.md`

### Getting Started
📄 **Read:** `references/getting-started.md`
- Installation and npm package setup
- Importing `TreeMapModule`
- Creating your first TreeMap component
- Theme and style configuration
- Basic component with simple data

### Data Binding
📄 **Read:** `references/data-binding.md`
- Binding flat collections
- Grouping data with `levels`
- Mapping data source properties to TreeMap fields
- Configuring `weightValuePath` for item sizing
- Dynamic data updates and state-driven binding

### Color Mapping
📄 **Read:** `references/color-mapping.md`
- Range color mapping for numeric values
- Equal color mapping for category-based colors
- Desaturation color mapping with opacity
- Palette-based coloring
- Direct color binding with `colorValuePath`
- Gradient colors with `leafItemSettings.colorMapping`

### Drilldown and Navigation
📄 **Read:** `references/drilldown-and-navigation.md`
- Enabling drilldown functionality
- Parent-child navigation with `levels`
- `drillDownView` behavior
- Breadcrumb navigation
- Drill events (`drillStart`, `drillEnd`)
- Resetting to root through application state when needed

### Levels and Layout
📄 **Read:** `references/levels-and-layout.md`
- Configuring multiple hierarchy levels
- `groupPath` and grouped rendering
- Layout types (`Squarified`, `SliceAndDiceVertical`, `SliceAndDiceHorizontal`, `SliceAndDiceAuto`)
- Group spacing and leaf gaps
- Header formatting and styling
- Header templates and header sizing

### Labels, Tooltips, and Legend
📄 **Read:** `references/labels-tooltips-legend.md`
- Data label configuration and formatting
- Label templates and template positioning
- Handling label intersections and overflow
- Tooltip visibility and formatting
- Custom tooltip templates
- Legend display and configuration
- Coordinating legend with color mapping, selection, and highlight

### Selection and Interactivity
📄 **Read:** `references/selection-interactivity.md`
- Enabling selection and highlight
- Customizing selection colors and borders
- Legend-based selection and hover interaction
- Click, item-selected, double-click, and right-click events
- Programmatic selection with `selectItem(...)`
- Managing single-item or multi-item workflows in application state

### Print, Export, and Accessibility
📄 **Read:** `references/print-export-accessibility.md`
- Print functionality
- Image export (PNG, JPEG, SVG)
- PDF export with orientation options
- Base64 export handling
- WCAG accessibility support
- Screen reader support and ARIA labels
- Contrast and focus considerations

### Internationalization
📄 **Read:** `references/internationalization.md`
- Right-to-left (RTL) rendering
- Locale configuration and number formatting
- Globalization for labels and tooltips
- Render direction configuration
- Multi-language data binding
- Cultural customization with `setCulture()` and `setCurrencyCode()`

## Quick Start

```typescript
import { Component, signal } from '@angular/core';
import { TreeMapModule } from '@syncfusion/ej2-angular-treemap';

@Component({
  selector: 'app-treemap',
  standalone: true,
  imports: [TreeMapModule],
  template: `
    <ejs-treemap
      id="treemap-container"
      [dataSource]="data()"
      weightValuePath="Size"
      [levels]="levels"
      [leafItemSettings]="leafItemSettings">
    </ejs-treemap>
  `,
  styles: [`
    #treemap-container {
      display: block;
      width: 100%;
      height: 500px;
    }
  `]
})
export class TreeMapComponent {
  public data = signal([
    { Category: 'Electronics', Item: 'Laptops', Size: 150 },
    { Category: 'Electronics', Item: 'Phones', Size: 200 },
    { Category: 'Furniture', Item: 'Chairs', Size: 100 },
    { Category: 'Furniture', Item: 'Tables', Size: 120 }
  ]);

  public levels = [
    { groupPath: 'Category' }
  ];

  public leafItemSettings = {
    labelPath: 'Item',
    gap: 4,
    border: { color: '#ffffff', width: 1 }
  };
}
```

## Common Patterns

### Pattern 1: Basic Hierarchical Visualization

Display grouped hierarchical data using `levels` and `groupPath`.

```typescript
public levels = [
  { groupPath: 'Region', headerFormat: '${Region}' },
  { groupPath: 'Country', headerFormat: '${Country}' }
];

public leafItemSettings = {
  labelPath: 'Country'
};
```

### Pattern 2: Color-Mapped Values

Use range color mapping through `rangeColorValuePath` and `leafItemSettings.colorMapping`.

```typescript
<ejs-treemap
  [dataSource]="data()"
  weightValuePath="Value"
  rangeColorValuePath="Value"
  [leafItemSettings]="leafItemSettings">
</ejs-treemap>
```

```typescript
public leafItemSettings = {
  labelPath: 'Name',
  colorMapping: [
    { from: 0, to: 50, color: '#3498db' },
    { from: 50, to: 100, color: '#e74c3c' }
  ]
};
```

### Pattern 3: Interactive Drilldown

Enable drilldown with breadcrumb navigation for exploring grouped levels.

```typescript
<ejs-treemap
  [dataSource]="data()"
  weightValuePath="Value"
  [enableDrillDown]="true"
  [enableBreadcrumb]="true"
  breadcrumbConnector=" / "
  [levels]="levels"
  [leafItemSettings]="leafItemSettings">
</ejs-treemap>
```

## Key Props and Configuration

| Property | Type | Purpose |
|----------|------|---------|
| `dataSource` | `object[]` | Data collection for TreeMap items |
| `weightValuePath` | `string` | Numeric field used to size each item |
| `leafItemSettings` | `object` | Leaf item configuration such as labels, borders, templates, and color mapping |
| `levels` | `object[]` | Hierarchy configuration using `groupPath` and header settings |
| `layoutType` | `'Squarified' \| 'SliceAndDiceVertical' \| 'SliceAndDiceHorizontal' \| 'SliceAndDiceAuto'` | Rectangle arrangement algorithm |
| `colorValuePath` | `string` | Data field used for direct item color assignment |
| `equalColorValuePath` | `string` | Data field used for category-based color mapping |
| `rangeColorValuePath` | `string` | Data field used for numeric range color mapping |
| `enableDrillDown` | `boolean` | Enables drilldown navigation through grouped levels |
| `enableBreadcrumb` | `boolean` | Displays breadcrumb navigation during drilldown |
| `legendSettings` | `object` | Legend display and styling configuration |
| `tooltipSettings` | `object` | Tooltip visibility, formatting, and template configuration |
| `selectionSettings` | `object` | Selection appearance and behavior configuration |
| `highlightSettings` | `object` | Hover highlight appearance configuration |
| `enableRtl` | `boolean` | Enables right-to-left rendering |
| `locale` | `string` | Overrides the component culture |
| `format` | `string` | Applies numeric formatting such as `n2`, `c`, or `p` |
| `useGroupingSeparator` | `boolean` | Enables culture-aware number grouping separators |
| `allowPrint` | `boolean` | Enables print support |
| `allowImageExport` | `boolean` | Enables image export support |
| `allowPdfExport` | `boolean` | Enables PDF export support |
| `description` | `string` | Adds descriptive accessibility text for the component |
| `tabIndex` | `number` | Controls focus order for the TreeMap container |

## Implementation Notes

- Prefer `TreeMapModule` for focused standalone Angular components.
- Use `TreeMapLegendService`, `TreeMapTooltipService`, `TreeMapSelectionService`, `TreeMapHighlightService`, `PrintService`, `ImageExportService`, and `PdfExportService` only when the corresponding features are enabled.
- For color mapping, configure `leafItemSettings.colorMapping` and pair it with `equalColorValuePath` or `rangeColorValuePath` when needed.
- For programmatic selection, use `selectItem(levelOrder, isSelected?)` rather than unsupported helper methods.
- For accessibility, rely on TreeMap’s built-in ARIA support, meaningful titles, labels, legends, descriptions, and strong color contrast.
- For keyboard and advanced interaction workflows, provide surrounding Angular controls where needed rather than assuming extra undocumented TreeMap keyboard APIs.