# Treemap

> Size as area: market caps by sector, revenue by channel, colored by change.

Source: https://82chart.com/en/docs/treemap/

`type: 'treemap'` splits the area by value (a squarified layout, tiles as close to square as the data allows). Tiles with room show the name and the value inside; narrow ones get an ellipsis or no label. Tiles keep a 2px gap.

## One level of groups, colored by change

Each series is a group (a sector) and its points are `{ x: name, y: size, change: percent }`. `colorBy: 'change'` colors tiles by `change`: gray at zero, one hue for up and another for down, darker as the change grows. `deltaColors: 'korea'` is red up / blue down as in Korean stock apps; the default `'semantic'` is good green / bad red (`deltaUpIsGood: false` swaps them).

```js
createChart('#chart', {
  type: 'treemap',
  title: 'Market cap by sector',
  subtitle: 'Daily change · sample data',
  colorBy: 'change',
  deltaColors: 'korea',
  numberFormat: 'compact',
  prefix: '$',
  data: {
    series: [
      { name: 'Chips', data: [{ x: 'Samsung', y: 320e9, change: 1.8 }, { x: 'SK hynix', y: 105e9, change: 3.2 }, { x: 'Hanmi', y: 9e9, change: -2.1 }] },
      { name: 'Autos', data: [{ x: 'Hyundai', y: 39e9, change: -0.6 }, { x: 'Kia', y: 31e9, change: -1.4 }, { x: 'Mobis', y: 17e9, change: 0.4 }] },
      { name: 'Bio', data: [{ x: 'Samsung Bio', y: 44e9, change: 0.9 }, { x: 'Celltrion', y: 29e9, change: -2.7 }] },
      { name: 'Banks', data: [{ x: 'KB', y: 24e9, change: 0.2 }, { x: 'Shinhan', y: 19e9, change: 0 }, { x: 'Hana', y: 13e9, change: -0.3 }] },
    ],
  },
});
```

The largest |change| gets the strongest color; `treemap: { range: 3 }` saturates at ±3% like a market map. The color key below shows the range. Group names sit at the top of each group; the tooltip shows the group, name, value, share of the whole and change.

## Without groups

Labels and one array of numbers are enough. Tiles take the default palette in order (gray past eight).

```js
createChart('#chart', {
  type: 'treemap',
  title: 'Revenue by channel',
  prefix: '$',
  data: {
    labels: ['Search', 'Social', 'Direct', 'Partners', 'Email', 'Other'],
    series: [{ name: 'Revenue', data: [52000, 31000, 22000, 12000, 6000, 2000] }],
  },
});
```

| Option | Default | What it does |
| --- | --- | --- |
| `colorBy` | 'series' | `'series'`: a color per group (per tile without groups). `'change'`: two hues around a gray zero |
| `deltaColors` | 'semantic' | `'korea'`: red up, blue down |
| `deltaUpIsGood` | true | With semantic colors, is a rise good? |
| `treemap.range` | largest \|change\| | The change (%) that gets the strongest color |
| `heatmap.legend` | true | The color key of `colorBy: 'change'` |

> The legend appears only with two or more groups and `colorBy: 'series'`; its buttons switch groups off and on.