👁 Image
Syncfusion.Blazor.TreeMap 33.2.13

Syncfusion® Blazor TreeMap Component

The Syncfusion® Blazor TreeMap Component visualizes hierarchical and flat data using nested rectangles with customizable colors, labels, and legends. Perfect for displaying complex data structures and hierarchies in modern Blazor applications.

Key features

• Hierarchical & Flat Data Visualization - Visualize hierarchical or flat datasets using nested, size‑proportional rectangles, enabling clear insight into relationships and distribution.
• Advanced Color Mapping Options - Apply range‑based, equal‑value, or desaturation color mapping to quickly distinguish values or categories.
• Rich Labeling & Templates - Display labels with trimming, wrapping, or hiding options, or use full HTML templates to provide richly styled node labels.
• Legends & Interactive Tooltips - Use default or interactive legends to interpret categories and ranges, and enable tooltips to reveal detailed node information on hover.
• Drill‑Down Navigation - Explore data hierarchies more deeply by drilling into parent nodes to reveal child content interactively.
• Multiple Layout Algorithms - Choose from several layout modes, including Squarified, Horizontal Slice‑and‑Dice, Vertical Slice‑and‑Dice, and Auto layouts to best represent your data.
• Interactive Selection & Highlighting - Highlight or select specific nodes on hover or click to focus user attention on key items.
• Responsive & Mobile‑Friendly Design - Automatically adapts to all screen sizes with optimized rendering across desktops, tablets, and mobile devices.
• Export & Print Support - Export TreeMaps as PNG, JPEG, or SVG, or print them directly for reporting and presentations.
• Accessibility & RTL Support - Includes ARIA accessibility, keyboard navigation, screen‑reader compatibility, and full right‑to‑left layout support.

Add script references

• For Blazor Server App / Blazor Web App, add these to Components/App.razor or App.razor file.
• For Blazor WebAssembly App, add these to wwwroot/index.html file.

<script src="_content/Syncfusion.Blazor.Core/scripts/syncfusion-blazor.min.js" type="text/javascript"></script>

Quick Start

1. Register the Syncfusion® Blazor services in Program.cs:

using Syncfusion.Blazor;

builder.Services.AddSyncfusionBlazor();

2. Add the Blazor TreeMap component in a Razor page:

<SfTreeMap DataSource="GrowthReport"
 WeightValuePath="GDP"
 TValue="Country">
 <TreeMapLeafItemSettings LabelPath="Name" Fill="lightgray"></TreeMapLeafItemSettings>
</SfTreeMap>

@code {
 public class Country
 {
 public string Name { get; set; }
 public double GDP { get; set; }
 }
 public List<Country> GrowthReport = new List<Country> {
 new Country {Name="United States", GDP=17946 },
 new Country {Name="China", GDP=10866 },
 new Country {Name="Japan", GDP=4123 },
 new Country {Name="Germany", GDP=3355 }
 };
}

Documentation

• Getting Started with Blazor Web App
• Getting Started with Blazor WASM App
• Feature Overview
• Live Demos
• API Reference

Support

• Support portal
• Community forums
• Feature requests

License

This is a commercial product and requires a paid license for possession or use. Review the Syncfusion® EULA.

• Purchase License
• Start a 30-day free trial

About Syncfusion®

Syncfusion® provides 1600+ UI components and frameworks for web, mobile, and desktop development across multiple platforms:

Web: Blazor | ASP.NET Core | ASP.NET MVC | JavaScript | Angular | React | Vue

Mobile: Flutter | MAUI | UWP

Desktop: WinForms | WPF | WinUI

Learn more at www.syncfusion.com.

| Toll Free: 1-888-9-DOTNET