M ChartM Chart
Users
Highcharts
Developers
Download
GitHub
Users
Highcharts
Developers
Download
GitHub
  • User Guide

    • User Guide
    • Libraries
    • Types of Charts
    • Creating a Chart
    • Multiple Sheets
    • Scatter & Bubble Charts
    • Radar & Radar Area Charts
    • Treemap Charts
    • Boxplots & Violin Charts
    • Chart Shortcode
    • Block Editor
    • CSV Import & Export
    • Settings
    • Chart Units
    • Themes
    • Duplicating Charts
    • Example Charts

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.

Sales4500
Marketing2200
Engineering8300
Support1500

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.

DepartmentSales
NorthMarketing2200
NorthEngineering8300
SouthMarketing1100
SouthEngineering6500

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:

NorthMarketing2200
NorthEngineering8300
SouthMarketing1100
SouthEngineering6500

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.
Last Updated: 5/21/26, 12:29 AM
Contributors: Jamie Poitra
Prev
Radar & Radar Area Charts
Next
Boxplots & Violin Charts