jQuery Tree Map Control

We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

Black Friday Offer The Black Friday Deal for 2024 is now live! Get 25% OFF on 5 or 10-member team licenses now! Get the deal now

Syncfusion jQuery no longer in active development. Switch to our pure JavaScript based next generation Essential JS 2 .

Switch Now

Visualize both hierarchical and flat collection data.
Drill-down the tree map to get a clear look at each node in a huge collection of data.
Customize the look and feel of the tree map by using built-in features like color mapping, legend, label template, etc.

Trusted by the world’s leading companies

jQuery tree map

VIEW DEMOS

Overview

Tree map control provides a simple but effective way to visualize flat or hierarchical data as clustered rectangles with a specific weighted attribute determining the size of the rectangle.

High Performance

The tree map control has been optimized for visualizing large amounts of flat or hierarchical data.

Tree map with large data

Grouping tree map

Grouping

It is also possible to group data to provide a top level view of the data.

Interactive Legends

Display legends to enhance the readability of data.

Tree map with interactive legend

Layout Options

Layout data using one of the available algorithms like Squarified, SliceAndDiceAuto, SliceAndDiceHorizontal, and SliceAndDiceVertical for visualizing the relative weight of hierarchical data relationships at more than one level.

Squarified

SliceAndDiceAuto

Slice and Dice Auto

SliceAndDiceHorizontal

Slice and Dice Horizontal

SliceAndDiceVertical

Slice and Dice Vertical

ALL WIDGETS

GRIDS

DataGrid

Tree Grid

Spreadsheet

DATA VISUALIZATION

Charts

Diagram

Maps

Tree Map

HeatMap

Scheduler

Circular Gauge

Linear Gauge

Digital Gauge

Bullet Graph

Gantt

Range Selector

Sparkline

Sunburst Chart

Barcode

Tag Cloud

Kanban Board

LAYOUT

Splitter

Dialog

File Explorer

ListView

Tile View

Tooltip

EDITORS

TextBox

Autocomplete

Rich Text Editor

Mask Edit

Rating

Slider

ComboBox

DropDown List

DropDown Tree

File Upload

Button

Toggle Button

Split Button

Checkbox

Radio Button

Color Picker

DatePicker

Date Range Picker

Time Picker

DateTime Picker

Radial Slider

Signature

SpellChecker

NAVIGATION

Accordion

TreeView

Toolbar

Ribbon

Tabs

Rotator

Navigation Drawer

Scroller

ListBox

Radial Menu

Pager

NOTIFICATION

Waiting Popup

ProgressBar

FRAMEWORK

Data Manager

MISCELLANEOUS

Calculation Engine

Theme Studio

BUSINESS INTELLIGENCE

Pivot Grid

Pivot Chart

Pivot Client

Pivot Gauge

Pivot TreeMap

REPORTING

Report Viewer

Report Designer (Preview)

FILE FORMAT LIBRARY

PDF Viewer

Media

Media Player

Integrates with Top Frameworks

Built-in integration with the most popular third-party frameworks, like Angular 2+, and React.

Angular

ReactJS

Aurelia

EmberJS

PHP

JSP

Our Customers Love Us

Having an excellent set of tools and a great support team, Syncfusion reduces customers’ development time.
Here are some of their experiences.

We're using the file formats and Windows/JavaScript list controls a lot. They're fast, easy to use, and the documentation is good and contains examples. Tickets with questions or suggestions were answered within a day, so we're happy to use the Syncfusion libraries.

Daniel Persidok,

wpd onshore GmbH & Co. KG

Using Syncfusion Angular and JavaScript controls makes front-end web development a piece of cake. Each component has many properties that can be configured as per your desire, methods that can be used to interact with the element, and a lot of events that trigger at different stages, which makes modifying your components according to the state of the application an easy task. Also, their support is amazing! They always offer a sample working project, which makes it very simple to solve your question about your code.

Carlos Rodriguez Garcia,

Vistatec