Treemap

Hierarchical series without axes. Data is nested via children; a node's value is the leaf's sizeField or the sum of its descendants.

Treemap

Squarify layout: nested rectangles, groups with headers.

config.ts

import { getData } from './data';
import type { ChartOptions } from 'grafit-charts';

export function createOptions(): ChartOptions {
  return {
    data: getData(),
    title: { text: 'Lines of code by module' },
    series: [{ type: 'treemap', labelField: 'label', sizeField: 'size' }],
    legend: { enabled: false },
  };
}

data.ts

export function getData() {
  return [
    {
      label: 'Frontend',
      children: [
        { label: 'app', size: 420 },
        { label: 'widgets', size: 180 },
        { label: 'shared', size: 310 },
      ],
    },
    {
      label: 'Backend',
      children: [
        { label: 'api', size: 540 },
        { label: 'workers', size: 230 },
        { label: 'db', size: 160 },
      ],
    },
    {
      label: 'Infra',
      children: [
        { label: 'ci', size: 90 },
        { label: 'deploy', size: 140 },
      ],
    },
  ];
}

Tile labels and padding

label — same as for heatmap: placement (9 positions), formatter, font; the color is chosen by auto-contrast against the tile. itemPadding — the gap between tiles:

config.ts

import { getData } from './data';
import type { ChartOptions } from 'grafit-charts';

export function createOptions(): ChartOptions {
  return {
    data: getData(),
    title: { text: 'Tile labels and padding' },
    series: [
      {
        type: 'treemap',
        labelField: 'label',
        sizeField: 'size',
        itemPadding: 5,
        label: {
          enabled: true,
          placement: 'top-left',
          formatter: ({ label, value }) => `${label} · ${value}`,
          fontSize: 12,
          fontWeight: 'bold',
        },
      },
    ],
    legend: { enabled: false },
  };
}

data.ts

export function getData() {
  return [
    {
      label: 'Frontend',
      children: [
        { label: 'App', size: 34 },
        { label: 'Widgets', size: 22 },
        { label: 'UI Kit', size: 18 },
        { label: 'Utils', size: 8 },
      ],
    },
    {
      label: 'Backend',
      children: [
        { label: 'API', size: 28 },
        { label: 'Jobs', size: 14 },
        { label: 'Auth', size: 9 },
      ],
    },
    {
      label: 'Infra',
      children: [
        { label: 'CI', size: 12 },
        { label: 'IaC', size: 10 },
      ],
    },
  ];
}

Options

Options common to all series (name, showInLegend, tooltip.renderer, …) are covered in Common series options.

Option	Series	Default	Description
groupHeaderHeight	treemap	18	group header height
fills	all	palette	branch/layer colors
itemPadding	treemap	2	gap between tiles
labelField	treemap	label/size/children	hierarchy keys
sizeField	treemap	label/size/children	hierarchy keys
childrenField	treemap	label/size/children	hierarchy keys
label.enabled	boolean	true	show value labels
label.placement	center, edges and corners (9 positions)	'center'	label position
label.formatter	({ datum, label, value }) => string	the value	label content
label.fontSize	Pixels	11	label font size
label.fontWeight	string | number	normal	font weight
label.fontFamily	string	theme font	font family
label.color	ColorValue	foreground; auto-contrast when inside	text color