Syncfusion.AspNetCore.TreeMap
34.1.31
Prefix Reserved
dotnet add package Syncfusion.AspNetCore.TreeMap --version 34.1.31
NuGet\Install-Package Syncfusion.AspNetCore.TreeMap -Version 34.1.31
This command is intended to be used within the Package Manager Console in Visual Studio, as it uses the NuGet module's version of Install-Package.
<PackageReference Include="Syncfusion.AspNetCore.TreeMap" Version="34.1.31" />
For projects that support PackageReference, copy this XML node into the project file to reference the package.
<PackageVersion Include="Syncfusion.AspNetCore.TreeMap" Version="34.1.31" />
<PackageReference Include="Syncfusion.AspNetCore.TreeMap" />
For projects that support Central Package Management (CPM), copy this XML node into the solution Directory.Packages.props file to version the package.
paket add Syncfusion.AspNetCore.TreeMap --version 34.1.31
The NuGet Team does not provide support for this client. Please contact its maintainers for support.
#r "nuget: Syncfusion.AspNetCore.TreeMap, 34.1.31"
#r directive can be used in F# Interactive and Polyglot Notebooks. Copy this into the interactive tool or source code of the script to reference the package.
#:package Syncfusion.AspNetCore.TreeMap@34.1.31
#:package directive can be used in C# file-based apps starting in .NET 10 preview 4. Copy this into a .cs file before any lines of code to reference the package.
#addin nuget:?package=Syncfusion.AspNetCore.TreeMap&version=34.1.31
#tool nuget:?package=Syncfusion.AspNetCore.TreeMap&version=34.1.31
The NuGet Team does not provide support for this client. Please contact its maintainers for support.
Syncfusion® ASP.NET Core TreeMap Component
A hierarchical data visualization component that displays hierarchical data as a set of nested rectangles, where the size and color of each rectangle represent specific data values, enabling easy identification of patterns and relationships.
Key Features
- Multiple Layout Algorithms: Squarified, SliceAndDice (Horizontal, Vertical, Alternate) for flexible hierarchy visualization
- Multi-Level Hierarchy: Support for hierarchical data with drill-down capabilities for exploring nested data
- Color Mapping: Range-based, equal-distribution, and desaturation color mapping strategies
- Interactive Features: Tooltips and selection for detailed data exploration
- Legend Support: Legend for color range identification and filtering
- Data Labels: Customizable labels with trimming and intersection handling
- Export Capabilities: Export to PNG, JPEG, SVG, and PDF formats
- Responsive Design: Adapts to different screen sizes and devices
- Performance: Efficient rendering for large hierarchical datasets
- Accessibility: Full keyboard navigation and screen reader support
Common Setup
1. Install NuGet Package
Install-Package Syncfusion.AspNetCore.TreeMap
2. Register Tag Helper
Add to ~/Pages/_ViewImports.cshtml or ~/Views/_ViewImports.cshtml:
@addTagHelper *, Syncfusion.AspNetCore.TreeMap
3. Add Stylesheet & Script References
In your layout file:
<head>
<link rel="stylesheet" href="_content/Syncfusion.AspNetCore.Themes/styles/fluent2.css" />
<script src="_content/Syncfusion.AspNetCore.TreeMap/scripts/sf-treemap.min.js"></script>
</head>
4. Register Script Manager
<ejs-scripts></ejs-scripts>
Quick Start
Step 1: ~/Pages/Index.cshtml.cs
public class IndexModel : PageModel
{
public List<TreeMapData> TreeMapDataList { get; set; }
public void OnGet()
{
TreeMapDataList = new List<TreeMapData>
{
new TreeMapData { Company = "Apple", Revenue = 275000 },
new TreeMapData { Company = "Microsoft", Revenue = 198000 },
new TreeMapData { Company = "Google", Revenue = 180000 },
new TreeMapData { Company = "Amazon", Revenue = 150000 },
new TreeMapData { Company = "Meta", Revenue = 117000 }
};
}
}
public class TreeMapData
{
public string Company { get; set; }
public double Revenue { get; set; }
}
Step 2:~/Pages/Index.cshtml
<ejs-treemap id="treemap"
dataSource="@Model.TreeMapDataList"
weightValuePath="Revenue"
leafItemSettings='new { labelPath = "Company" }'>
<e-treemap-legendsettings visible="true"></e-treemap-legendsettings>
</ejs-treemap>
Run the Application
Press Ctrl+F5 to run the application in your browser.
Documentation
Support
License
This is a commercial product and requires a paid license for possession or use. Review the Syncfusion® EULA
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
Desktop: WinForms | WPF | WinUI
Learn more at www.syncfusion.com
sales@syncfusion.com | Toll Free: 1-888-9-DOTNET
| Product | Versions Compatible and additional computed target framework versions. |
|---|---|
| .NET | net8.0 is compatible. net8.0-android was computed. net8.0-browser was computed. net8.0-ios was computed. net8.0-maccatalyst was computed. net8.0-macos was computed. net8.0-tvos was computed. net8.0-windows was computed. net9.0 is compatible. net9.0-android was computed. net9.0-browser was computed. net9.0-ios was computed. net9.0-maccatalyst was computed. net9.0-macos was computed. net9.0-tvos was computed. net9.0-windows was computed. net10.0 is compatible. net10.0-android was computed. net10.0-browser was computed. net10.0-ios was computed. net10.0-maccatalyst was computed. net10.0-macos was computed. net10.0-tvos was computed. net10.0-windows was computed. |
Compatible target framework(s)
Included target framework(s) (in package)
Learn more about Target Frameworks and .NET Standard.
-
net10.0
- Newtonsoft.Json (>= 13.0.4)
- Syncfusion.AspNetCore.Base (>= 34.1.31)
- Syncfusion.AspNetCore.Charts (>= 34.1.31)
- Syncfusion.Licensing (>= 34.1.31)
-
net8.0
- Newtonsoft.Json (>= 13.0.4)
- Syncfusion.AspNetCore.Base (>= 34.1.31)
- Syncfusion.AspNetCore.Charts (>= 34.1.31)
- Syncfusion.Licensing (>= 34.1.31)
-
net9.0
- Newtonsoft.Json (>= 13.0.4)
- Syncfusion.AspNetCore.Base (>= 34.1.31)
- Syncfusion.AspNetCore.Charts (>= 34.1.31)
- Syncfusion.Licensing (>= 34.1.31)
NuGet packages
This package is not used by any NuGet packages.
GitHub repositories
This package is not used by any popular GitHub repositories.