--- title: "Treemap" description: "Nested rectangles by value. What the treemap is for, the data it needs and every option it has." section: "Widgets" canonical: "https://banksync.io/docs/widgets/chart-treemap" specs: ["dashboards"] operationBindings: [{"capability":"dashboards","operation":"dashboards.author"}] --- Nested rectangles by value. It sits in the **Part-of-whole** group of the widget library. ![Example treemap on a BankSync dashboard](https://cdn.banksync.io/screenshots/docs/charts/treemap.84bac3e077c2428e.png) ## 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](/docs/dashboards/dashboards-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](/docs/widgets/chart-styling#legend): position, layout and which series show. - [Axes](/docs/widgets/chart-styling#axes): titles, tick labels and number format. - [Grid](/docs/widgets/chart-styling#grid), [title](/docs/widgets/chart-styling#title), [padding](/docs/widgets/chart-styling#padding) and [background](/docs/widgets/chart-styling#background). - [Value labels](/docs/widgets/chart-styling#value-labels) on the marks. - [Categories and labels](/docs/widgets/chart-styling#categories-and-labels): top N with "Other", sort order, readable labels, the handwritten callout. - [Style](/docs/widgets/chart-styling#style): corner radius, line width, opacity and animation. - [Tooltip](/docs/widgets/chart-styling#tooltip) on hover. - Click to filter: clicking a mark can filter the rest of the dashboard. See [Filters and cross-filtering](/docs/dashboards/filters-and-cross-filtering). - [Colours](/docs/widgets/chart-styling#palette): 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](/docs/widgets/chart-pie): Categorical share - [Donut chart](/docs/widgets/chart-donut): Pie with center label - [Sunburst](/docs/widgets/chart-sunburst): Hierarchical radial wedges - [Nightingale](/docs/widgets/chart-nightingale): Radial polar pie - [Radial bar](/docs/widgets/chart-radial-bar): Polar bar chart - [Mosaic](/docs/widgets/chart-mosaic): Marimekko tiled cells - [Waffle](/docs/widgets/chart-waffle): 100-unit grid share - [Funnel](/docs/widgets/chart-funnel): Conversion stage flow - [Pyramid](/docs/widgets/chart-pyramid): Inverted funnel