# Text treemaps for hierarchical budgets and totals

Use `glyphChartTreemap(data, channels?, options?)`. Its default channels are `{ id: "id", parent: "parent", value: "value", label: "label" }`.

## Engineering allocation

These illustrative budget units form one root with three teams and six leaves. Branch totals come from children; assign magnitudes to leaves.



```ts
import { renderGlyphChart } from "@glyphcss/charts";

const { text } = renderGlyphChart({
  type: "treemap",
  data: [
    {
      id: "root",
      parent: null,
      label: "Engineering"
    },
    {
      id: "Product",
      parent: "root",
      label: "Product"
    },
    {
      id: "Portal",
      parent: "Product",
      label: "Portal",
      value: 22
    },
    {
      id: "Mobile",
      parent: "Product",
      label: "Mobile",
      value: 18
    },
    {
      id: "Platform",
      parent: "root",
      label: "Platform"
    },
    {
      id: "Cloud",
      parent: "Platform",
      label: "Cloud",
      value: 20
    },
    {
      id: "Security",
      parent: "Platform",
      label: "Security",
      value: 15
    },
    {
      id: "Delivery",
      parent: "root",
      label: "Delivery"
    },
    {
      id: "CI",
      parent: "Delivery",
      label: "CI",
      value: 13
    },
    {
      id: "QA",
      parent: "Delivery",
      label: "QA",
      value: 12
    }
  ],
  channels: {
    id: "id",
    parent: "parent",
    value: "value",
    label: "label"
  }
}, {
  target: "chat",
  width: 64,
  height: 16
});
console.log(text);
```

```text
┌──────────────────────────────────────────────────────────────┐
│ Engineering                                                  │
├──────────────────────────────────────────────┬───────────────┤
│ Product                                      │ Delivery      │
├─────────────────────────┬────────────────────┼───────────────┤
│ Portal                  │ Mobile             │ CI            │
│ 22                      │ 18                 │ 13            │
│                         │                    │               │
│                         │                    │               │
├─────────────────────────┴────────────────────┤               │
│ Platform                                     ├───────────────┤
├──────────────────────────┬───────────────────┤ QA            │
│ Cloud                    │ Security          │ 12            │
│ 20                       │ 15                │               │
│                          │                   │               │
└──────────────────────────┴───────────────────┴───────────────┘
```



```ts
import { glyphChartTreemap, renderGlyphChart } from "@glyphcss/charts";
const result = renderGlyphChart(
  glyphChartTreemap([
    { id: "root", parent: null, label: "Engineering" },
    { id: "Product", parent: "root", label: "Product" },
    { id: "Portal", parent: "Product", label: "Portal", value: 22 },
    { id: "Mobile", parent: "Product", label: "Mobile", value: 18 },
    { id: "Platform", parent: "root", label: "Platform" },
    { id: "Cloud", parent: "Platform", label: "Cloud", value: 20 },
    { id: "Security", parent: "Platform", label: "Security", value: 15 },
    { id: "Delivery", parent: "root", label: "Delivery" },
    { id: "CI", parent: "Delivery", label: "CI", value: 13 },
    { id: "QA", parent: "Delivery", label: "QA", value: 12 },
  ]),
  { target: "chat", width: 64, height: 16 },
);
```

Ids must be unique, parents must exist, and the hierarchy must be acyclic. Use null or an empty parent for roots. Leaves require finite, nonnegative values. Invalid hierarchy rejects with `treemap-hierarchy`.

Tiles share borders. Labels and leaf values need interior space; small tiles or whole labels that do not fit are omitted with `treemap-omitted`. Increase dimensions or aggregate tiny categories before rendering. Treemap rejects x/y scales and transforms.

For indented source syntax, see [Mermaid treemaps](/charts/mermaid/#treemap). For entity relationships rather than weighted areas, use [ER diagrams](/diagrams/er/).