Treemap
Nested rectangles by value. What the treemap is for, the data it needs and every option it has.
4 min read
On this page
Nested rectangles by value. It sits in the Part-of-whole group of the widget library.
When to use it#
Use a treemap to show how a total splits across many categories, with each rectangle sized by its share. It suits more categories than a pie can hold, such as spending by merchant, or spending by category and then merchant when you add a second level.
When to pick something else#
- Just a few categories? A Pie chart or Donut chart reads faster.
- Need exact comparisons between categories? Use a Bar chart; areas are hard to compare precisely.
- Want the levels drawn as rings? Use a Sunburst.
The data it needs#
Pick these in the Data tab of the inspector. BankSync suggests a column for each when your source has an obvious match.
| Field | Needed | Pick | Notes |
|---|---|---|---|
| Category | Yes | a category | |
| Value | Yes | a number |
Each row is drawn as it is, so shape the rows first if you need totals. See Shaping data.
Treemap options#
Set these on the Style tab of the inspector. "Automatic" means BankSync picks a value from the chart's size and data.
| Option | What it does | Values | New charts start with |
|---|---|---|---|
| Tile layout | How tiles are arranged. Squarify keeps tiles close to square; slice and dice cut the space into strips. | Squarify, Binary, Slice, Dice, Slice dice | Squarify |
| Gap between tiles | Space between neighbouring tiles, in pixels. | Number, 0 or more | Automatic |
| Group padding | Space around each group of tiles, in pixels. Applies when the chart has more than one level. | Number, 0 or more | Automatic |
| Tile corner radius | Rounds the corners of each tile, in pixels. | Number, 0 or more | Automatic |
| Show labels | Write each tile’s name and value on it when it fits. | On or off | Automatic |
| Smallest labelled tile | Skip labels on tiles narrower or shorter than this many pixels, to keep small tiles clean. | Number, 0 or more | Automatic |
| Label size | Text size of the tile labels, in pixels (kept between 9.5 and 12). | Number | Automatic |
| Label colour | Colour of the label text. Leave empty for an automatic, readable colour. | Colour | Automatic |
Needs history#
Show a note instead of the chart until the rows cover enough periods, so a first week never reads as a trend.
| Option | What it does | Values | New charts start with |
|---|---|---|---|
| Date field | The date column whose distinct periods are counted. | Text | Automatic |
| Period | What counts as one period: a day, week, month, quarter or year. | Day, Week, Month, Quarter, Year | Automatic |
| Periods needed | How many distinct periods the rows must cover before the chart draws (2 to 60). | Whole number, 2 to 60 | Automatic |
| Waiting message | Shown until there is enough history. Leave empty for a message naming the periods. | Text, up to 120 characters | Automatic |
Shared chart styling#
Every chart also has the shared styling options. These apply to this one:
- Legend: position, layout and which series show.
- Axes: titles, tick labels and number format.
- Grid, title, padding and background.
- Value labels on the marks.
- Categories and labels: top N with "Other", sort order, readable labels, the handwritten callout.
- Style: corner radius, line width, opacity and animation.
- Tooltip on hover.
- Click to filter: clicking a mark can filter the rest of the dashboard. See Filters and cross-filtering.
- Colours: follow the dashboard palette or pick one for this chart.
Messy data#
- Rows with the same path are added together. A blank category shows as "(blank)".
- Negative values and non-numbers count as zero and are not drawn; the tooltip says how many were left out. If all values are negative you see "Only negative values; nothing to show".
- Past eight top-level groups, the smaller ones are gathered into a grey "Other" group. Their tiles are still drawn inside it.
- Small tiles get no label; hover or tap to see the name, value and share.
On a phone#
A treemap fills a narrow cell well. Labels only appear on tiles big enough to hold them, so on a phone expect names on the large tiles only; with two levels, a legend of the top-level groups sits below.
Related charts#
- Pie chart: Categorical share
- Donut chart: Pie with center label
- Sunburst: Hierarchical radial wedges
- Nightingale: Radial polar pie
- Radial bar: Polar bar chart
- Mosaic: Marimekko tiled cells
- Waffle: 100-unit grid share
- Funnel: Conversion stage flow
- Pyramid: Inverted funnel
Use this page with your AI assistant
Every BankSync doc is available as plain Markdown for agents and LLMs.