syncfusion-react-treemaps

Install @syncfusion/ej2-react-treemap, then render TreeMapComponent with dataSource, weightValuePath for sizing, and leafItemSettings.labelPath for labels. Set a height like 350px and the TreeMap renders rectangles sized proportionally to your numeric values.

Set enableDrillDown={true} and define hierarchy levels with LevelsDirective and LevelDirective groupPath entries. Clicking an item drills into the next level, and drillStart/drillEnd events let you customize or cancel navigation.

TreeMap supports three color mapping types: range mapping for value intervals, equal mapping for exact categorical values, and desaturation mapping using minOpacity and maxOpacity on a single color. Configure them via leafItemSettings.colorMapping with rangeColorValuePath or equalColorValuePath.

Yes, set allowImageExport or allowPrint to true and inject the ImageExport or Print services. Then call the export method with PNG, JPEG, SVG, or PDF, or call print on the component instance via a ref.

Rectangle sizes come from weightValuePath, which must reference a numeric property. Non-numeric values, missing fields, or undefined entries default to zero, so convert values with Number() and verify every record contains the weight property.

Avoid TreeMap for simple flat data with few items, time-series data, or relationship graphs. Use bar or column charts for small flat datasets, line charts for trends over time, and diagram components for entity relationships.