TreemapChart

The TreemapChart widget is a rectangular tile chart that expresses each item as an area, so you can see how values are weighted at a glance.
Use it to show both the magnitude of a value and its rise or fall (by color), like a stock market heat map.

Definition and role

The TreemapChart widget draws a treemap — a heat map — that encodes hierarchical data as areas. Each tile's size maps to its value (value), and its color maps to a change value (colorValue). Set the cell spacing, the corner radius, and whether to animate; click a tile and its click action runs.

• Category: Contents
• Default size: 300 × 200
• Sample stock data appears on the editing (design) screen.

Features

Feature	Description
Area-based visualization	Expresses each item's value (value) as a tile area so you can compare weights.
Color (change) display	Maps a tile's color to a positive or negative color range based on its change value (colorValue).
Data replacement	Replace the data as JSON from a script to refresh the chart.
Tooltips and group summaries	Configure the fields shown in item tooltips and group summaries.
Click interaction	Click a tile to run the action connected to it.
Appearance settings	Adjust the cell spacing, the corner radius, and whether to animate.

How to use

1. Open the Contents category in the left widget palette.
2. Drag and drop the TreemapChart item onto the canvas.
3. In the properties panel on the right, adjust the cell spacing (spacing), the corner radius (borderRadius), and the animation (useAnimation).
4. To load real data, pass the data as JSON from a script.
5. If you need a reaction when a tile is clicked, connect a click action.

note

Screenshot needed: dragging the TreemapChart item from the left widget palette onto the canvas

Properties

Property	Description	Default	Value / Type
bgColor	Chart background color — this doesn't work in the current version.	Not set	Color
spacing	Spacing between tiles (cells)	2	Number (0 or greater)
borderRadius	Corner radius of a tile	0	Number (0 or greater)
useAnimation	Whether to animate cells as they appear	false	true / false

Notes and tips

tip

Sample stock data appears on the editing (design) screen. Real data shows up only once you feed it in from a script.

note

A tile's color maps to a positive or negative color range based on the value's rise or fall (colorValue). Change the color ranges and the currency unit ('원' / '달러') from a script.

Learn more

tip

For the full set of Widget Controls (Property, Method, and Event) that let you drive this widget from a script, see TreemapChart Widget Control.