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.
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.
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
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.
