Treemap Charts
A treemap visualizes part-to-whole relationships using nested rectangles whose area is proportional to a value. They work well for budget breakdowns, file-system-style hierarchies, and any category-by-subcategory totals where you want the largest groups to read at a glance.
Chart.js library required
Treemap charts are rendered by a Chart.js plugin and only work when M Chart is set to use Chart.js as its library. If your site is currently set to Highcharts, switch in Settings before creating a treemap.
Data Format
Treemap charts are single-sheet only — the sheet tab bar does not appear when this chart type is selected. Two layouts are supported and M Chart picks between them automatically based on how many columns of data you enter.
Flat layout (two columns)
The simplest layout: one row per leaf, with a label and a value.
| Sales | 4500 |
| Marketing | 2200 |
| Engineering | 8300 |
| Support | 1500 |
Hierarchical layout (three or more columns)
Add a third column (or more) to nest groups. The rightmost column is always the value; every column to its left is a grouping level — leftmost is the top-level group, the column just before the value column is the leaf. Hierarchy depth is unlimited.
To label the columns, leave the top-left cell empty and put column headers in the rest of row 1. This is the same convention multi-series chart types like Line and Bar use, as described in Creating a Chart.
| Department | Sales | |
| North | Marketing | 2200 |
| North | Engineering | 8300 |
| South | Marketing | 1100 |
| South | Engineering | 6500 |
The top-level group column (leftmost) is unnamed in this layout — its column header would land in the corner cell, which is the marker that turns header detection on. If you don't need column headers, fill the top-left cell with data and the entire first row will be treated as data:
| North | Marketing | 2200 |
| North | Engineering | 8300 |
| South | Marketing | 1100 |
| South | Engineering | 6500 |
Display Options
These appear in the Chart meta box for treemap charts:
Show labels— when on, each rectangle prints its category label inside. On by default.Color per data point— only shown for the flat layout. With it checked, each rectangle gets a different palette color; unchecked, all rectangles share a single base color and are alpha-shaded by their value (largest = solid, smaller = more transparent). On hierarchical data the toggle is hidden — each top-level group automatically gets its own palette color, and descendants are alpha shades of that group color so siblings under the same parent read as related.Show legend— permanently disabled for treemap. Each rectangle already carries its own label, so a legend would be redundant.
Limits and gotchas
- Treemap charts are single-sheet only — the sheet tab bar does not appear.
- The hierarchical layout needs at least two rows of data; sheets with fewer fall back to the flat layout or render nothing.
- Rows with a blank intermediate group cell are skipped silently.
- Rows whose value cell isn't numeric are skipped silently.
- Treemap has no axes, so axis title and unit options don't apply.
