ChartForge

ChartForge

Charts
Theme
Log in Register
Back to Gallery

TreeMap Chart

Visualize hierarchical data with nested rectangles

Hierarchical Data Market Share Portfolio Analysis

Interactive TreeMap Demo

Explore TreeMap features with live customization

0px 2px 10px
500ms 1500ms 3000ms
Syncs with app theme

Key Features

Customizable Design

Choose from default, modern, minimalistic, cyberpunk, professional themes, or use a custom theme with many configurable options for font, border, grid, text, and full custom color control.

Hierarchical Visualization

Supports nested data with squarified layout for clear proportion display

Custom Rectangle Padding

Adjust padding between rectangles in Treemap charts, from small to large

Interactive Tooltips

Detailed hover information with percentage and value breakdown

Dynamic Labels

Auto-scaling labels with contrast optimization for readability

Value Formatting (K/M/B/T)

Shortens large numbers for clarity (e.g., 125000 → 125K)

Perfect For

Portfolio Analysis

Asset allocation across sectors and holdings

Market Share

Company or product share by industry

Budget Breakdown

Expense categories and subcategories

File Systems

Directory and file size visualization

Configuration Options

Option Type Default Description
design string default Chart design preset ('default', 'modern', 'minimalistic', 'cyberpunk', 'professional', 'custom')
background string transparent Background color or gradient when design is custom (e.g., '#hex', 'transparent', 'linear-gradient(...)')
textColor string #111827 Text color when design is custom (e.g., '#hex')
gridColor string #E5E7EB Grid line color when design is custom (e.g., '#hex')
borderColor string #D1D5DB Border color when design is custom (e.g., '#hex')
borderRadius number 8 Border radius in pixels when design is custom (0-20)
shadowBlur number 10 Shadow blur radius in pixels when design is custom (0-30)
shadowOffset number 2 Shadow offset in pixels when design is custom (0-10)
fontSize number 12 Font size in pixels when design is custom (8-18)
fontFamily string Inter, system-ui, sans-serif Font family when design is custom (e.g., 'Inter, system-ui, sans-serif')
fontWeight string normal Font weight when design is custom ('normal', '500', '600', 'bold')
customColor boolean false Enable custom colors for rectangles (specified in data objects)
rectPadding number 2 Padding between rectangles in pixels (0-10)
colorIntensity number 0.8 Color intensity for value-based coloring (0.3-1.0)
minLabelSize number 30 Minimum rectangle size for displaying labels in pixels (20-50)
showTooltip boolean true Show tooltips on hover
showLabels boolean true Show labels on rectangles
showValues boolean true Show values and percentages on rectangles
animations boolean true Enable drawing animations
animationDuration number 1500 Animation duration in milliseconds (500-3000)
glowEffect boolean false Enable glow effect on rectangles
useKFormat boolean false Enable K/M/B/T formatting for rectangle values (e.g., 1000 as 1.0K, 1000000 as 1.0M)
valuePrefix string '' Prefix for rectangle values (e.g., '$')
valueAfterfix string '' Suffix for rectangle values (e.g., ' USD')

Data Format

Flat Data Structure

treemap.setData([
                    { name: 'Stocks', value: 250000, category: 'Equity', color: '#8B5CF6' },
                    { name: 'Bonds', value: 150000, category: 'Fixed Income', color: '#10B981' },
                    { name: 'Real Estate', value: 100000, category: 'Alternative', color: '#F59E0B' },
                    { name: 'Commodities', value: 75000, category: 'Alternative', color: '#EF4444' },
                    { name: 'Cash', value: 25000, category: 'Liquid', color: '#3B82F6' }
                ]);

Hierarchical Data Structure

treemap.setData([
                    {
                        name: 'Technology',
                        value: 120000,
                        children: [
                            { name: 'Apple', value: 50000, color: '#8B5CF6' },
                            { name: 'Microsoft', value: 40000, color: '#EC4899' },
                            { name: 'Google', value: 30000, color: '#10B981' }
                        ]
                    },
                    {
                        name: 'Healthcare',
                        value: 85000,
                        children: [
                            { name: 'Pfizer', value: 45000, color: '#3B82F6' },
                            { name: 'J&J', value: 40000, color: '#F59E0B' }
                        ]
                    },
                    {
                        name: 'Finance',
                        value: 95000,
                        children: [
                            { name: 'JPMorgan', value: 55000, color: '#EF4444' },
                            { name: 'Goldman Sachs', value: 40000, color: '#D97706' }
                        ]
                    }
                ]);

Data Structure

Each item requires name and value. Hierarchical data includes children. Include color for custom styling when customColor: true, or category for category-based coloring.

Ready to Visualize Hierarchical Data?

Download ChartForge and start creating stunning TreeMap charts

Download Full Library 200KB

Or download individual components:

Core Library TreeMap Component

📊 Perfect for: Portfolio analysis, market share, budget breakdowns, and file system visualization

Previous: Bubble Chart Next: Radialbar Chart