M ChartM Chart
Users
Pro
Developers
Download
GitHub
Users
Pro
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
    • Venn & Euler Charts
    • Chart Shortcode
    • Block Editor
    • CSV Import & Export
    • Settings
    • Chart Units
    • Themes
    • Accessibility
    • Duplicating Charts
    • Example Charts

Treemap Charts

A treemap visualizes part-to-whole relationships using nested rectangles whose area is proportional to a value. Common uses: budget breakdowns and file-system-style hierarchies, or any data where the largest groups should be obvious immediately.

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, because 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: 8/22/26, 9:30 PM
Contributors: Jamie Poitra
Prev
Radar & Radar Area Charts
Next
Boxplots & Violin Charts