ProductFeaturesDocs
Built InUI ComponentsAdmin ConsoleDatabaseBackendStorageAIRAGAuthSecurity
CompanyStoryAboutPricingBlogRoadmap
Install FLIN

TreemapChart

CSS-based treemap visualization for displaying hierarchical data as proportional rectangles.

Default Treemap

Standard treemap with four blocks using default proportions and colors.

40%
25%
20%
15%

Department Allocation

Labeled treemap showing budget distribution across business departments.

40%
25%
20%
15%
SalesMarketingEngineeringSupport

Browser Market Share

Custom-colored treemap for market share comparison with labels.

35%
30%
20%
15%
ChromeFirefoxSafariOther

Disk Usage

Storage allocation visualization showing how disk space is distributed.

45%
20%
20%
15%
DocumentsMediaCodeSystem

Usage

<TreemapChart /><TreemapChart data="40,25,20,15" labels="Sales,Marketing,Engineering,Support" /><TreemapChart data="35,30,20,15" labels="Chrome,Firefox,Safari,Other" colors="#c9952c,#dc3545,#17a2b8,#6c757d" />

Props

PropTypeDefaultDescription
datatext"40,25,20,15"Comma-separated percentages for each block
labelstext""Comma-separated labels for each block
colorstext"#c9952c,#17a2b8,#28a745,#6c757d"Comma-separated hex colors for each block