---
title: "Treemap Series"
enterprise: true
framework: react
version: "14.1.0"
---

# Treemap Series

A Treemap Series is used to render hierarchical data structures or trees. Each node in the tree is represented by a rectangle, with the area of the rectangle representing the value.

## Simple Treemap

#### Simple Treemap

```tsx
import React, { useState } from "react";
import { createRoot } from "react-dom/client";
import { AgCharts } from "ag-charts-react";
import {
  AgChartOptions,
  AnimationModule,
  ContextMenuModule,
  CrosshairModule,
  LegendModule,
  ModuleRegistry,
  TreemapSeriesModule,
} from "ag-charts-enterprise";
import { data } from "./data";

ModuleRegistry.registerModules([
  AnimationModule,
  CrosshairModule,
  LegendModule,
  TreemapSeriesModule,
  ContextMenuModule,
]);

const ChartExample = () => {
  const [options, setOptions] = useState<AgChartOptions>({
    data,
    series: [
      {
        type: "treemap",
        labelKey: "title",
      },
    ],
    title: {
      text: "UK Government Budget",
    },
    subtitle: {
      text: "2024",
    },
  });

  return <AgCharts options={options} />;
};

const root = createRoot(document.getElementById("root")!);
root.render(<ChartExample />);
```

[Live example: Simple Treemap](https://www.ag-grid.com/charts/reactFunctionalTs/treemap-series/examples/simple-treemap)

The Treemap Series is designed to display a single series and is created using the `treemap` series type.

```js
{
    series: [
        {
            type: 'treemap',
            labelKey: 'title',
        },
    ],
}
```

The data passed in should be an array of nodes, with each node optionally containing children.

```js
let data = [
    {
        title: 'Pensions',
        children: [
            { title: 'Sickness and disability', total: 61.2, change: 8.7 },
            { title: 'Old age', total: 141.8, change: 17.9 },
            { title: 'Survivors', total: 1.4, change: 0 },
        ],
    },
    {
        title: 'Health Care',
        // ...
    },
    // ...
];
```

The `labelKey` defines what will appear as the title for each tile.

## Sizing

By default, each leaf node's rectangle will have approximately the same area.

However, the Treemap Series is best suited to providing size values to provide relative sizing between these rectangles.

#### Custom Sizing

```tsx
import React, { useState } from "react";
import { createRoot } from "react-dom/client";
import { AgCharts } from "ag-charts-react";
import {
  AgChartOptions,
  AnimationModule,
  ContextMenuModule,
  CrosshairModule,
  LegendModule,
  ModuleRegistry,
  TreemapSeriesModule,
} from "ag-charts-enterprise";
import { data } from "./data";

ModuleRegistry.registerModules([
  AnimationModule,
  CrosshairModule,
  LegendModule,
  TreemapSeriesModule,
  ContextMenuModule,
]);

const ChartExample = () => {
  const [options, setOptions] = useState<AgChartOptions>({
    data: data,
    series: [
      {
        type: "treemap",
        labelKey: "title",
        sizeKey: "total",
        sizeName: "Total",
      },
    ],
    title: {
      text: "UK Government Budget",
    },
    subtitle: {
      text: "2024",
    },
  });

  return <AgCharts options={options} />;
};

const root = createRoot(document.getElementById("root")!);
root.render(<ChartExample />);
```

[Live example: Custom Sizing](https://www.ag-grid.com/charts/reactFunctionalTs/treemap-series/examples/sizing)

The `sizeKey` can be used to provide a numeric value to adjust the relative sizing. Additionally, the optional `sizeName` property can be set to set the title that appears next to the value in tooltips.

```js
{
    series: [
        {
            type: 'treemap',
            labelKey: 'title',
            sizeKey: 'total',
            sizeName: 'Total',
        },
    ],
}
```

Only the sizes of leaf nodes will be accounted for when computing the relative sizes. When sizes are used, the nodes will be re-ordered so larger nodes appear towards the top left corner.

## Colour Scale

Use `colorScale` to control how `colorKey` values map to colours.

#### Colour Scale

```tsx
import React, { useState, Fragment } from "react";
import { createRoot } from "react-dom/client";
import { AgCharts } from "ag-charts-react";
import {
  AgStandaloneChartOptions,
  AgTreemapSeriesOptions,
  GradientLegendModule,
  LegendModule,
  ModuleRegistry,
  TreemapSeriesModule,
} from "ag-charts-enterprise";
import { data } from "./data";
import clone from "clone";

ModuleRegistry.registerModules([
  GradientLegendModule,
  LegendModule,
  TreemapSeriesModule,
]);

const ChartExample = () => {
  const [options, setOptions] = useState<AgStandaloneChartOptions>({
    data,
    series: [
      {
        type: "treemap",
        labelKey: "title",
        colorKey: "change",
        colorName: "Change",
        colorScale: {
          fills: [
            { color: "tomato" },
            { color: "gold" },
            { color: "seagreen" },
          ],
          domain: [-40, 40],
        },
      },
    ],
    legend: {
      enabled: false,
    },
    gradientLegend: {
      enabled: true,
    },
    title: {
      text: "UK Government Budget",
    },
    subtitle: {
      text: "2024 — Change from previous year",
    },
  });

  const toggleMode = (mode: "stops" | "gradient") => {
    const nextOptions = clone(options);

    const series = nextOptions.series![0] as AgTreemapSeriesOptions;
    if (mode === "stops") {
      series.colorScale = {
        mode: "discrete",
        fills: [
          { color: "tomato", stop: -0.1, name: "Decline" },
          { color: "gold", stop: 0.1, name: "Flat" },
          { color: "seagreen", name: "Growth" },
        ],
      };
      nextOptions.legend = { enabled: true };
      nextOptions.gradientLegend = { enabled: false };
    } else {
      series.colorScale = {
        fills: [{ color: "tomato" }, { color: "gold" }, { color: "seagreen" }],
        domain: [-40, 40],
      };
      nextOptions.legend = { enabled: false };
      nextOptions.gradientLegend = { enabled: true };
    }

    setOptions(nextOptions);
  };

  return (
    <Fragment>
      <div className="example-controls">
        <div className="controls-row">
          Mode:
          <button onClick={() => toggleMode("stops")}>Named Stops</button>
          <button onClick={() => toggleMode("gradient")}>Gradient</button>
        </div>
      </div>
      <AgCharts options={options} />
    </Fragment>
  );
};

const root = createRoot(document.getElementById("root")!);
root.render(<ChartExample />);
```

[Live example: Colour Scale](https://www.ag-grid.com/charts/reactFunctionalTs/treemap-series/examples/gradient-legend)

```js
{
    series: [
        {
            type: 'treemap',
            labelKey: 'title',
            colorKey: 'change',
            colorName: 'Change',
            colorScale: {
                mode: 'discrete',
                fills: [
                    { color: 'tomato', stop: -0.1, name: 'Decline' },
                    { color: 'gold', stop: 0.1, name: 'Flat' },
                    { color: 'seagreen', name: 'Growth' },
                ],
            },
        },
    ],
}
```

In this example:

- Use the toggle to switch between discrete mode with named stops shown in a category legend, and a continuous gradient shown in a gradient legend.

See the [Colour Scale](https://www.ag-grid.com/charts/react/colour-scale/) page for the full range of colour scale options including discrete mode, named stops, fixed domains, missing data, and gradient legend customisation.

## Other Colours

It's possible to override the default colours, or the colours on a group or tile basis.

#### Other Colours

```tsx
import React, { useState } from "react";
import { createRoot } from "react-dom/client";
import { AgCharts } from "ag-charts-react";
import {
  AgChartOptions,
  AnimationModule,
  ContextMenuModule,
  CrosshairModule,
  LegendModule,
  ModuleRegistry,
  TreemapSeriesModule,
} from "ag-charts-enterprise";
import { data } from "./data";

ModuleRegistry.registerModules([
  AnimationModule,
  CrosshairModule,
  LegendModule,
  TreemapSeriesModule,
  ContextMenuModule,
]);

const ChartExample = () => {
  const [options, setOptions] = useState<AgChartOptions>({
    data: data,
    series: [
      {
        type: "treemap",
        labelKey: "title",
        sizeKey: "total",
        sizeName: "Total",
        fills: [
          "#E64A19",
          "#F57C00",
          "#FFA000",
          "#FBC02D",
          "#AFB42B",
          "#689F38",
          "#388E3C",
          "#00796B",
          "#0097A7",
          "#0288D1",
        ],
        strokes: [
          "#D84315",
          "#EF6C00",
          "#FF8F00",
          "#F9A825",
          "#9E9D24",
          "#558B2F",
          "#2E7D32",
          "#00695C",
          "#00838F",
          "#0277BD",
        ],
      },
    ],
    title: {
      text: "UK Government Budget",
    },
    subtitle: {
      text: "2024",
    },
  });

  return <AgCharts options={options} />;
};

const root = createRoot(document.getElementById("root")!);
root.render(<ChartExample />);
```

[Live example: Other Colours](https://www.ag-grid.com/charts/reactFunctionalTs/treemap-series/examples/other-colors)

```js
{
    series: [
        {
            type: 'treemap',
            labelKey: 'title',
            sizeKey: 'total',
            sizeName: 'Total',
            fills: ['#E64A19', '#F57C00', '#FFA000', '#FBC02D', '#AFB42B', '#689F38', '#388E3C', '#00796B', '#0097A7', '#0288D1'],
            strokes: ['#D84315', '#EF6C00', '#FF8F00', '#F9A825', '#9E9D24', '#558B2F', '#2E7D32', '#00695C', '#00838F', '#0277BD'],
        },
    ],
}
```

In this configuration:

- `fills` and `strokes` are an array of colours to use for the fills and strokes, where node receives the colour indexed by the index of its root node

> **Note**
>
> When `colorScale.fills` is used, the `fills` and `strokes` arrays are ignored.

## Labels

Both the labels for leaf and non-leaf nodes can be customised.

For leaf nodes only, they can contain secondary labels, and their labels can also be shrunk to fit in the available space.

#### Custom Labels

```tsx
import React, { useState } from "react";
import { createRoot } from "react-dom/client";
import { AgCharts } from "ag-charts-react";
import {
  AgChartOptions,
  AnimationModule,
  ContextMenuModule,
  CrosshairModule,
  LegendModule,
  ModuleRegistry,
  TreemapSeriesModule,
} from "ag-charts-enterprise";
import { data } from "./data";

ModuleRegistry.registerModules([
  AnimationModule,
  CrosshairModule,
  LegendModule,
  TreemapSeriesModule,
  ContextMenuModule,
]);

const ChartExample = () => {
  const [options, setOptions] = useState<AgChartOptions>({
    data: data,
    series: [
      {
        type: "treemap",
        labelKey: "title",
        secondaryLabelKey: "total",
        sizeKey: "total",
        sizeName: "Total",
        group: {
          label: {
            fontSize: 18,
            spacing: 2,
          },
        },
        tile: {
          label: {
            fontSize: 24,
            minimumFontSize: 9,
            spacing: 8,
          },
          secondaryLabel: {
            formatter: (params) => `£${params.value.toFixed(1)}bn`,
          },
        },
      },
    ],
    title: {
      text: "UK Government Budget",
    },
    subtitle: {
      text: "2024",
    },
  });

  return <AgCharts options={options} />;
};

const root = createRoot(document.getElementById("root")!);
root.render(<ChartExample />);
```

[Live example: Custom Labels](https://www.ag-grid.com/charts/reactFunctionalTs/treemap-series/examples/labels)

Labels can be customised through the `group` and `tile` properties for non-leaf nodes and leaf nodes, respectively.

```js
{
    series: [
        {
            type: 'treemap',
            labelKey: 'title',
            secondaryLabelKey: 'total',
            sizeKey: 'total',
            sizeName: 'Total',
            group: {
                label: {
                    fontSize: 18,
                    spacing: 2,
                },
            },
            tile: {
                label: {
                    fontSize: 24,
                    minimumFontSize: 9,
                    spacing: 8,
                },
                secondaryLabel: {
                    formatter: (params) => `£${params.value.toFixed(1)}bn`,
                },
            },
        },
    ],
}
```

In this configuration:

- `fontSize` sets the size of the font
- `minimumFontSize` will enable the font size to shrink down to the given value if there is not enough space (tiles only)
- `spacing` controls the amount of space below a label
- `padding` adds space between the edge of a group or tile and its contents
- `formatter` allows customising the value of a label using a function

## Layout

Various spacing values can be adjusted to tweak the layout of the chart.

#### Custom Layout

```tsx
import React, { useState } from "react";
import { createRoot } from "react-dom/client";
import { AgCharts } from "ag-charts-react";
import {
  AgChartOptions,
  AnimationModule,
  ContextMenuModule,
  CrosshairModule,
  LegendModule,
  ModuleRegistry,
  TreemapSeriesModule,
} from "ag-charts-enterprise";
import { data } from "./data";

ModuleRegistry.registerModules([
  AnimationModule,
  CrosshairModule,
  LegendModule,
  TreemapSeriesModule,
  ContextMenuModule,
]);

const ChartExample = () => {
  const [options, setOptions] = useState<AgChartOptions>({
    data: data,
    series: [
      {
        type: "treemap",
        labelKey: "title",
        sizeKey: "total",
        sizeName: "Total",
        group: {
          padding: 12,
          gap: 5,
        },
        tile: {
          padding: 10,
          gap: 2,
        },
      },
    ],
    title: {
      text: "UK Government Budget",
    },
    subtitle: {
      text: "2024",
    },
  });

  return <AgCharts options={options} />;
};

const root = createRoot(document.getElementById("root")!);
root.render(<ChartExample />);
```

[Live example: Custom Layout](https://www.ag-grid.com/charts/reactFunctionalTs/treemap-series/examples/layout)

```js
{
    series: [
        {
            type: 'treemap',
            labelKey: 'title',
            sizeKey: 'total',
            sizeName: 'Total',
            group: {
                padding: 12,
                gap: 5,
            },
            tile: {
                padding: 10,
                gap: 2,
            },
        },
    ],
}
```

In this configuration:

- `group.padding` adjusts the padding between the edge of the group, its title, and the inner nodes
- `group.gap` adjusts the gap between adjacent tiles where one or more nodes in the parent node are group nodes
- `tile.padding` adjusts the padding between the edge of the tile and its labels
- `tile.gap` adjusts the gap between adjacent tiles where all nodes in the parent node are leaf nodes

## Hierarchy Levels

Treemap Series supports multiple levels within a hierarchy.

#### Nesting

```tsx
import React, { useState } from "react";
import { createRoot } from "react-dom/client";
import { AgCharts } from "ag-charts-react";
import {
  AgChartOptions,
  AnimationModule,
  ContextMenuModule,
  CrosshairModule,
  LegendModule,
  ModuleRegistry,
  TreemapSeriesModule,
} from "ag-charts-enterprise";
import { data } from "./data";

ModuleRegistry.registerModules([
  AnimationModule,
  CrosshairModule,
  LegendModule,
  TreemapSeriesModule,
  ContextMenuModule,
]);

const ChartExample = () => {
  const [options, setOptions] = useState<AgChartOptions>({
    data,
    series: [
      {
        type: "treemap",
        labelKey: "name",
      },
    ],
    title: {
      text: "Organisational Chart",
    },
  });

  return <AgCharts options={options} />;
};

const root = createRoot(document.getElementById("root")!);
root.render(<ChartExample />);
```

[Live example: Nesting](https://www.ag-grid.com/charts/reactFunctionalTs/treemap-series/examples/nesting)

## Highlighting

#### Highlighting

```tsx
import React, { useState } from "react";
import { createRoot } from "react-dom/client";
import { AgCharts } from "ag-charts-react";
import {
  AgChartOptions,
  AnimationModule,
  ContextMenuModule,
  CrosshairModule,
  LegendModule,
  ModuleRegistry,
  TreemapSeriesModule,
} from "ag-charts-enterprise";
import { salesPerformance } from "./data";

ModuleRegistry.registerModules([
  AnimationModule,
  CrosshairModule,
  LegendModule,
  TreemapSeriesModule,
  ContextMenuModule,
]);

const ChartExample = () => {
  const [options, setOptions] = useState<AgChartOptions>({
    data: salesPerformance,
    title: {
      text: "Sales Highlighting",
    },
    subtitle: {
      text: "Branch-aware highlight states",
    },
    series: [
      {
        type: "treemap",
        labelKey: "name",
        sizeKey: "value",
        group: {
          highlight: {
            highlightedItem: { stroke: "lightgreen", strokeWidth: 4 },
            unhighlightedItem: { opacity: 0.1 },
          },
        },
        tile: {
          highlight: {
            highlightedItem: { stroke: "green" },
            highlightedBranch: { strokeWidth: 2 },
            unhighlightedBranch: { fill: "grey" },
          },
        },
      },
    ],
  });

  return <AgCharts options={options} />;
};

const root = createRoot(document.getElementById("root")!);
root.render(<ChartExample />);
```

[Live example: Highlighting](https://www.ag-grid.com/charts/reactFunctionalTs/treemap-series/examples/highlight)

Treemaps leaf tiles are configured via `tile.highlight`, while group rectangles use `group.highlight`.

The leaf tiles support the following states:

- `highlightedItem` – styles applied to the hovered tile.
- `unhighlightedItem` – styles applied to other nodes within the same branch.
- `highlightedBranch` – styles inherited by every node that shares the hovered root.
- `unhighlightedBranch` – styles applied to nodes in other branches.

The groups support the following states:

- `highlightedItem` – styles applied to the hovered group.
- `unhighlightedItem` – styles applied to other groups.

When a group is hovered, its `fillOpacity` and `strokeOpacity` styles are inherited by its child leaf tiles.

```js
{
    series: [
        {
            type: 'treemap',
            labelKey: 'title',
            sizeKey: 'total',
            group: {
                highlight: {
                    highlightedItem: { stroke: 'lightgreen', strokeWidth: 4 },
                    unhighlightedItem: { opacity: 0.1 },
                },
            },
            tile: {
                highlight: {
                    highlightedItem: { stroke: 'green' },
                    highlightedBranch: { strokeWidth: 2 },
                    unhighlightedBranch: { fill: 'grey' },
                },
            },
        },
    ],
}
```

In this configuration:

- `group.highlight` only affects the group rectangles.
- `tile.highlight` controls the tiles themselves. When a group is hovered, only the `fillOpacity` and `strokeOpacity` styles are inherited by its tiles.
- Providing `fill`/`stroke` overrides allows highlight colours to take precedence over colour scales.

## API Reference

#### Treemap Series

| Property | Type | Default | Description |
| --- | --- | --- | --- |
| type (required) | 'treemap' |  | Configuration for the Treemap Series. |
| id | string | auto-generated value | Primary identifier for the series. This is provided as `seriesId` in user callbacks to differentiate multiple series. Auto-generated ids are subject to future change without warning, if your callbacks need to vary behaviour by series please supply your own unique `id` value. |
| context | ContextDefault |  | Context object to use in callbacks. |
| data | DatumDefault[] |  | The data to use when rendering the series. If this is not supplied, data must be set on the chart instead. |
| visible | boolean |  | Whether to display the series. |
| cursor | string |  | The cursor to use for hovered markers. This config is identical to the CSS `cursor` property. |
| nodeClickRange | PixelSize \| 'exact' \| 'nearest' \| 'area' |  | Range from a node that a click triggers the listener. |
| listeners | AgSeriesListeners |  | A map of event names to event listeners. |
| listeners.seriesNodeClick | Listener |  | The listener to call when a node (marker, column, bar, tile or a pie sector) in the series is clicked. |
| listeners.seriesNodeDoubleClick | Listener |  | The listener to call when a node (marker, column, bar, tile or a pie sector) in the series is double-clicked. |
| labelKey | string |  | The name of the node key containing the label. |
| secondaryLabelKey | string |  | The name of the node key containing a secondary label. |
| childrenKey | string |  | The name of the node key containing the children. Defaults to `children`. |
| sizeKey | string |  | The name of the node key containing the size value. |
| colorKey | string |  | The name of the node key containing the colour value. This value (along with `colorScale` config) will be used to determine the tile colour. |
| sizeName | string |  | A human-readable description of the size values. If supplied, this will be shown in the default tooltip and passed to the tooltip renderer as one of the parameters. |
| colorName | string |  | A human-readable description of the colour values. If supplied, this will be shown in the default tooltip and passed to the tooltip renderer as one of the parameters. |
| fills | Array<CssColor \| AgColorRef \| AgColorRefMixOnto \| AgColorRefMixOntoColor \| AgGradientColor \| AgPatternColor \| AgImageFill> |  | The colours to cycle through for the fills of the groups and tiles. An array of colour strings, or fill objects for gradients, patterns, or images. |
| strokes | CssColor[] |  | The colours to cycle through for the strokes of the groups and tiles. |
| colorScale | AgColorScale |  | Configuration for colour scale with fills, domain, and mode. |
| colorScale.fills | AgColorScaleColorStop[] |  | Configuration for two or more colours, and the values they are rendered at. |
| colorScale.fills.color (required) | CssColor \| AgColorRef \| AgColorRefMixOnto \| AgColorRefMixOntoColor |  | Colour at this position. |
| colorScale.fills.stop | number \| bigint |  | Position of this colour in the data domain. In continuous mode, the colour appears exactly at this value. In discrete mode, this is the first value of the next bin. |
| colorScale.fills.name | string |  | Display name for this bin, used in legend and tooltip labels. |
| colorScale.domain | [AgNumericValue, AgNumericValue] |  | Fixed domain for the colour scale. If unset, the domain is derived from the data extent. |
| colorScale.mode | 'continuous' \| 'discrete' | continuous | Whether the fills should be rendered as a continuous gradient or discrete bins. |
| colorScale.missingDataFill | CssColor |  | Fill colour for datums with no `colorKey` value. If unset, each series preserves its default behaviour for missing data. |
| group | AgTreemapSeriesGroupOptions |  | Options for group nodes (i.e. nodes WITH children). |
| group.cornerRadius | PixelSize |  | Apply rounded corners to each group. |
| group.highlight | AgTreemapSeriesGroupHighlightOptions |  | Highlight overrides for groups. |
| group.highlight.enabled | boolean | true | Whether highlighting is enabled for groups. |
| group.highlight.highlightedItem | AgTreemapSeriesGroupHighlightStyle |  | Style for the hovered group. |
| group.highlight.highlightedItem.opacity | Opacity |  | Opacity to apply to the group tile and its child tiles. |
| group.highlight.highlightedItem.fill | CssColor \| AgColorRef \| AgColorRefMixOnto \| AgColorRefMixOntoColor \| AgGradientColor \| AgPatternColor \| AgImageFill |  | The colour for filling shapes. A colour string, or an object for a gradient, pattern, or image fill. |
| group.highlight.highlightedItem.fillOpacity | Opacity |  | The opacity of the fill colour. |
| group.highlight.highlightedItem.stroke | CssColor \| AgColorRef \| AgColorRefMixOnto \| AgColorRefMixOntoColor |  | The colour for the stroke. |
| group.highlight.highlightedItem.strokeWidth | PixelSize |  | The width of the stroke in pixels. |
| group.highlight.highlightedItem.strokeOpacity | Opacity |  | The opacity of the stroke colour. |
| group.highlight.unhighlightedItem | AgTreemapSeriesGroupHighlightStyle |  | Style for groups that are not hovered when another group is active. |
| group.highlight.unhighlightedItem.opacity | Opacity |  | Opacity to apply to the group tile and its child tiles. |
| group.highlight.unhighlightedItem.fill | CssColor \| AgColorRef \| AgColorRefMixOnto \| AgColorRefMixOntoColor \| AgGradientColor \| AgPatternColor \| AgImageFill |  | The colour for filling shapes. A colour string, or an object for a gradient, pattern, or image fill. |
| group.highlight.unhighlightedItem.fillOpacity | Opacity |  | The opacity of the fill colour. |
| group.highlight.unhighlightedItem.stroke | CssColor \| AgColorRef \| AgColorRefMixOnto \| AgColorRefMixOntoColor |  | The colour for the stroke. |
| group.highlight.unhighlightedItem.strokeWidth | PixelSize |  | The width of the stroke in pixels. |
| group.highlight.unhighlightedItem.strokeOpacity | Opacity |  | The opacity of the stroke colour. |
| group.fill | CssColor \| AgColorRef \| AgColorRefMixOnto \| AgColorRefMixOntoColor \| AgGradientColor \| AgPatternColor \| AgImageFill |  | The colour for filling shapes. A colour string, or an object for a gradient, pattern, or image fill. |
| group.fillOpacity | Opacity |  | The opacity of the fill colour. |
| group.stroke | CssColor \| AgColorRef \| AgColorRefMixOnto \| AgColorRefMixOntoColor |  | The colour for the stroke. |
| group.strokeWidth | PixelSize |  | The width of the stroke in pixels. |
| group.strokeOpacity | Opacity |  | The opacity of the stroke colour. |
| group.label | AgTreemapSeriesGroupLabelOptions |  | Options for the label in a group. |
| group.label.spacing | PixelSize |  | The distance between the tiles and the title. |
| group.label.formatter | RichFormatter |  | A custom formatting function used to convert data values into text for display by labels. |
| group.label.format | string |  | Format string used when rendering labels. |
| group.label.itemStyler | Styler |  | Function used to style individual datum labels. |
| group.label.enabled | boolean |  | Whether the associated elements and properties should be used in the chart. |
| group.label.color | CssColor \| AgColorRef \| AgColorRefMixOnto \| AgColorRefMixOntoColor |  | The colour for text elements. A colour string, or a theme-colour reference object. |
| group.label.fontSize | FontSize |  | The size of the font in pixels for text elements. |
| group.label.fontFamily | FontFamily |  | The font family for text elements. |
| group.label.fontStyle | FontStyle |  | The style to use for text elements. |
| group.label.fontWeight | FontWeight |  | The font weight to use for text elements. |
| group.label.border | BorderOptions |  | Stroke options for the box border. |
| group.label.border.enabled | boolean |  | Whether the associated elements and properties should be used in the chart. |
| group.label.border.stroke | CssColor \| AgColorRef \| AgColorRefMixOnto \| AgColorRefMixOntoColor |  | The colour for the stroke. |
| group.label.border.strokeWidth | PixelSize |  | The width of the stroke in pixels. |
| group.label.border.strokeOpacity | Opacity |  | The opacity of the stroke colour. |
| group.label.cornerRadius | PixelSize |  | Apply rounded corners to the label box. |
| group.label.padding | PixelSize \| PaddingOptions |  | Distance between the label text and the border. A number applies uniform padding; an object sets each side. |
| group.label.fill | CssColor \| AgColorRef \| AgColorRefMixOnto \| AgColorRefMixOntoColor \| AgGradientColor \| AgPatternColor \| AgImageFill |  | The colour for filling shapes. A colour string, or an object for a gradient, pattern, or image fill. |
| group.label.fillOpacity | Opacity |  | The opacity of the fill colour. |
| group.textAlign | 'left' \| 'center' \| 'right' |  | Horizontal position of the label. |
| group.padding | PixelSize |  | The distance between the edges of the outer-most title to the edges of the group. |
| group.gap | PixelSize |  | Gap between adjacent groups. |
| group.interactive | boolean |  | Whether the group can be highlighted. |
| tile | AgTreemapSeriesTileOptions |  | Options for leaf nodes (i.e. nodes WITHOUT children). |
| tile.cornerRadius | PixelSize |  | Apply rounded corners to each tile. |
| tile.highlight | AgTreemapSeriesTileHighlightOptions |  | Highlight overrides for tiles. |
| tile.highlight.enabled | boolean | true | Whether highlighting is enabled for tiles. |
| tile.highlight.highlightedBranch | AgTreemapSeriesTileHighlightStyle |  | Style for tiles within the hovered branch. |
| tile.highlight.highlightedBranch.opacity | Opacity |  | Opacity to apply to the tile and its labels. |
| tile.highlight.highlightedBranch.fill | CssColor \| AgColorRef \| AgColorRefMixOnto \| AgColorRefMixOntoColor \| AgGradientColor \| AgPatternColor \| AgImageFill |  | The colour for filling shapes. A colour string, or an object for a gradient, pattern, or image fill. |
| tile.highlight.highlightedBranch.fillOpacity | Opacity |  | The opacity of the fill colour. |
| tile.highlight.highlightedBranch.stroke | CssColor \| AgColorRef \| AgColorRefMixOnto \| AgColorRefMixOntoColor |  | The colour for the stroke. |
| tile.highlight.highlightedBranch.strokeWidth | PixelSize |  | The width of the stroke in pixels. |
| tile.highlight.highlightedBranch.strokeOpacity | Opacity |  | The opacity of the stroke colour. |
| tile.highlight.highlightedItem | AgTreemapSeriesTileHighlightStyle |  | Style for the directly hovered tile. |
| tile.highlight.highlightedItem.opacity | Opacity |  | Opacity to apply to the tile and its labels. |
| tile.highlight.highlightedItem.fill | CssColor \| AgColorRef \| AgColorRefMixOnto \| AgColorRefMixOntoColor \| AgGradientColor \| AgPatternColor \| AgImageFill |  | The colour for filling shapes. A colour string, or an object for a gradient, pattern, or image fill. |
| tile.highlight.highlightedItem.fillOpacity | Opacity |  | The opacity of the fill colour. |
| tile.highlight.highlightedItem.stroke | CssColor \| AgColorRef \| AgColorRefMixOnto \| AgColorRefMixOntoColor |  | The colour for the stroke. |
| tile.highlight.highlightedItem.strokeWidth | PixelSize |  | The width of the stroke in pixels. |
| tile.highlight.highlightedItem.strokeOpacity | Opacity |  | The opacity of the stroke colour. |
| tile.highlight.unhighlightedItem | AgTreemapSeriesTileHighlightStyle |  | Style for other tiles within the hovered branch. |
| tile.highlight.unhighlightedItem.opacity | Opacity |  | Opacity to apply to the tile and its labels. |
| tile.highlight.unhighlightedItem.fill | CssColor \| AgColorRef \| AgColorRefMixOnto \| AgColorRefMixOntoColor \| AgGradientColor \| AgPatternColor \| AgImageFill |  | The colour for filling shapes. A colour string, or an object for a gradient, pattern, or image fill. |
| tile.highlight.unhighlightedItem.fillOpacity | Opacity |  | The opacity of the fill colour. |
| tile.highlight.unhighlightedItem.stroke | CssColor \| AgColorRef \| AgColorRefMixOnto \| AgColorRefMixOntoColor |  | The colour for the stroke. |
| tile.highlight.unhighlightedItem.strokeWidth | PixelSize |  | The width of the stroke in pixels. |
| tile.highlight.unhighlightedItem.strokeOpacity | Opacity |  | The opacity of the stroke colour. |
| tile.highlight.unhighlightedBranch | AgTreemapSeriesTileHighlightStyle |  | Style for tiles outside of the hovered branch. |
| tile.highlight.unhighlightedBranch.opacity | Opacity |  | Opacity to apply to the tile and its labels. |
| tile.highlight.unhighlightedBranch.fill | CssColor \| AgColorRef \| AgColorRefMixOnto \| AgColorRefMixOntoColor \| AgGradientColor \| AgPatternColor \| AgImageFill |  | The colour for filling shapes. A colour string, or an object for a gradient, pattern, or image fill. |
| tile.highlight.unhighlightedBranch.fillOpacity | Opacity |  | The opacity of the fill colour. |
| tile.highlight.unhighlightedBranch.stroke | CssColor \| AgColorRef \| AgColorRefMixOnto \| AgColorRefMixOntoColor |  | The colour for the stroke. |
| tile.highlight.unhighlightedBranch.strokeWidth | PixelSize |  | The width of the stroke in pixels. |
| tile.highlight.unhighlightedBranch.strokeOpacity | Opacity |  | The opacity of the stroke colour. |
| tile.selection | AgSelectionOptions |  | Selection overrides for tiles. |
| tile.selection.enabled | boolean |  | Set to `true` to enable the data-selection on this series. |
| tile.selection.containment | 'any' \| 'all' | chart.selection.containment | Override the drag-to-select containment rule for this series. |
| tile.selection.selectedItem | AgSelectionStyleOptions |  | Styling options for selected items. |
| tile.selection.selectedItem.opacity | Opacity |  | The opacity of the whole series (line, fill, labels and markers, if any) |
| tile.selection.selectedItem.stroke | CssColor \| AgColorRef \| AgColorRefMixOnto \| AgColorRefMixOntoColor |  | The colour for the stroke. |
| tile.selection.selectedItem.strokeWidth | PixelSize |  | The width of the stroke in pixels. |
| tile.selection.selectedItem.strokeOpacity | Opacity |  | The opacity of the stroke colour. |
| tile.selection.selectedItem.lineDash | PixelSize[] |  | An array specifying the length in pixels of alternating dashes and gaps. |
| tile.selection.selectedItem.lineDashOffset | PixelSize |  | The initial offset of the dashed line in pixels. |
| tile.selection.selectedItem.fill | CssColor \| AgColorRef \| AgColorRefMixOnto \| AgColorRefMixOntoColor \| AgGradientColor \| AgPatternColor \| AgImageFill |  | The colour for filling shapes. A colour string, or an object for a gradient, pattern, or image fill. |
| tile.selection.selectedItem.fillOpacity | Opacity |  | The opacity of the fill colour. |
| tile.selection.unselectedItem | AgSelectionStyleOptions |  | Styling options for unselected items. |
| tile.selection.unselectedItem.opacity | Opacity |  | The opacity of the whole series (line, fill, labels and markers, if any) |
| tile.selection.unselectedItem.stroke | CssColor \| AgColorRef \| AgColorRefMixOnto \| AgColorRefMixOntoColor |  | The colour for the stroke. |
| tile.selection.unselectedItem.strokeWidth | PixelSize |  | The width of the stroke in pixels. |
| tile.selection.unselectedItem.strokeOpacity | Opacity |  | The opacity of the stroke colour. |
| tile.selection.unselectedItem.lineDash | PixelSize[] |  | An array specifying the length in pixels of alternating dashes and gaps. |
| tile.selection.unselectedItem.lineDashOffset | PixelSize |  | The initial offset of the dashed line in pixels. |
| tile.selection.unselectedItem.fill | CssColor \| AgColorRef \| AgColorRefMixOnto \| AgColorRefMixOntoColor \| AgGradientColor \| AgPatternColor \| AgImageFill |  | The colour for filling shapes. A colour string, or an object for a gradient, pattern, or image fill. |
| tile.selection.unselectedItem.fillOpacity | Opacity |  | The opacity of the fill colour. |
| tile.selection.unselectedSeries | AgSelectionStyleOptions |  | Styling options for series with no selections when there is at least one other selected series. |
| tile.selection.unselectedSeries.opacity | Opacity |  | The opacity of the whole series (line, fill, labels and markers, if any) |
| tile.selection.unselectedSeries.stroke | CssColor \| AgColorRef \| AgColorRefMixOnto \| AgColorRefMixOntoColor |  | The colour for the stroke. |
| tile.selection.unselectedSeries.strokeWidth | PixelSize |  | The width of the stroke in pixels. |
| tile.selection.unselectedSeries.strokeOpacity | Opacity |  | The opacity of the stroke colour. |
| tile.selection.unselectedSeries.lineDash | PixelSize[] |  | An array specifying the length in pixels of alternating dashes and gaps. |
| tile.selection.unselectedSeries.lineDashOffset | PixelSize |  | The initial offset of the dashed line in pixels. |
| tile.selection.unselectedSeries.fill | CssColor \| AgColorRef \| AgColorRefMixOnto \| AgColorRefMixOntoColor \| AgGradientColor \| AgPatternColor \| AgImageFill |  | The colour for filling shapes. A colour string, or an object for a gradient, pattern, or image fill. |
| tile.selection.unselectedSeries.fillOpacity | Opacity |  | The opacity of the fill colour. |
| tile.fill | CssColor \| AgColorRef \| AgColorRefMixOnto \| AgColorRefMixOntoColor \| AgGradientColor \| AgPatternColor \| AgImageFill |  | The colour for filling shapes. A colour string, or an object for a gradient, pattern, or image fill. |
| tile.fillOpacity | Opacity |  | The opacity of the fill colour. |
| tile.stroke | CssColor \| AgColorRef \| AgColorRefMixOnto \| AgColorRefMixOntoColor |  | The colour for the stroke. |
| tile.strokeWidth | PixelSize |  | The width of the stroke in pixels. |
| tile.strokeOpacity | Opacity |  | The opacity of the stroke colour. |
| tile.label | AgChartAutoSizedLabelOptions |  | Options for the label in a tile. |
| tile.label.spacing | PixelSize |  | The distance between the label and secondary label, if both are present |
| tile.label.lineHeight | FontSize |  | Line height to use for the label. |
| tile.label.minimumFontSize | FontSize |  | If the label does not fit in the container, setting this will allow the label to pick a font size between its normal `fontSize` and `minimumFontSize` to fit within the container. |
| tile.label.wrapping | 'never' \| 'always' \| 'hyphenate' \| 'on-space' | 'on-space' | Text wrapping strategy for labels. - `'always'` will always wrap text to fit within the tile. - `'hyphenate'` is similar to `'always'`, but inserts a hyphen (`-`) if forced to wrap in the middle of a word. - `'on-space'` will only wrap on white space. If there is no possibility to wrap a line on space and satisfy the tile dimensions, the text will be truncated. - `'never'` disables text wrapping. |
| tile.label.overflowStrategy | 'ellipsis' \| 'hide' |  | Adjusts the behaviour of labels when they overflow - `'ellipsis'` will truncate the text to fit, appending an ellipsis (...) - `'hide'` only displays the label if it completely fits within its bounds, and removes it if it would overflow |
| tile.label.formatter | RichFormatter |  | A custom formatting function used to convert data values into text for display by labels. |
| tile.label.format | string |  | Format string used when rendering labels. |
| tile.label.itemStyler | Styler |  | Function used to style individual datum labels. |
| tile.label.enabled | boolean |  | Whether the associated elements and properties should be used in the chart. |
| tile.label.color | CssColor \| AgColorRef \| AgColorRefMixOnto \| AgColorRefMixOntoColor |  | The colour for text elements. A colour string, or a theme-colour reference object. |
| tile.label.fontSize | FontSize |  | The size of the font in pixels for text elements. |
| tile.label.fontFamily | FontFamily |  | The font family for text elements. |
| tile.label.fontStyle | FontStyle |  | The style to use for text elements. |
| tile.label.fontWeight | FontWeight |  | The font weight to use for text elements. |
| tile.label.border | BorderOptions |  | Stroke options for the box border. |
| tile.label.border.enabled | boolean |  | Whether the associated elements and properties should be used in the chart. |
| tile.label.border.stroke | CssColor \| AgColorRef \| AgColorRefMixOnto \| AgColorRefMixOntoColor |  | The colour for the stroke. |
| tile.label.border.strokeWidth | PixelSize |  | The width of the stroke in pixels. |
| tile.label.border.strokeOpacity | Opacity |  | The opacity of the stroke colour. |
| tile.label.cornerRadius | PixelSize |  | Apply rounded corners to the label box. |
| tile.label.padding | PixelSize \| PaddingOptions |  | Distance between the label text and the border. A number applies uniform padding; an object sets each side. |
| tile.label.fill | CssColor \| AgColorRef \| AgColorRefMixOnto \| AgColorRefMixOntoColor \| AgGradientColor \| AgPatternColor \| AgImageFill |  | The colour for filling shapes. A colour string, or an object for a gradient, pattern, or image fill. |
| tile.label.fillOpacity | Opacity |  | The opacity of the fill colour. |
| tile.secondaryLabel | AgChartAutoSizedSecondaryLabelOptions |  | Options for a secondary, smaller label in a tile - displayed under the primary label. |
| tile.secondaryLabel.lineHeight | FontSize |  | Line height to use for the label. |
| tile.secondaryLabel.minimumFontSize | FontSize |  | If the label does not fit in the container, setting this will allow the label to pick a font size between its normal `fontSize` and `minimumFontSize` to fit within the container. |
| tile.secondaryLabel.wrapping | 'never' \| 'always' \| 'hyphenate' \| 'on-space' | 'on-space' | Text wrapping strategy for labels. - `'always'` will always wrap text to fit within the tile. - `'hyphenate'` is similar to `'always'`, but inserts a hyphen (`-`) if forced to wrap in the middle of a word. - `'on-space'` will only wrap on white space. If there is no possibility to wrap a line on space and satisfy the tile dimensions, the text will be truncated. - `'never'` disables text wrapping. |
| tile.secondaryLabel.overflowStrategy | 'ellipsis' \| 'hide' |  | Adjusts the behaviour of labels when they overflow - `'ellipsis'` will truncate the text to fit, appending an ellipsis (...) - `'hide'` only displays the label if it completely fits within its bounds, and removes it if it would overflow |
| tile.secondaryLabel.formatter | RichFormatter |  | A custom formatting function used to convert data values into text for display by labels. |
| tile.secondaryLabel.format | string |  | Format string used when rendering labels. |
| tile.secondaryLabel.itemStyler | Styler |  | Function used to style individual datum labels. |
| tile.secondaryLabel.enabled | boolean |  | Whether the associated elements and properties should be used in the chart. |
| tile.secondaryLabel.color | CssColor \| AgColorRef \| AgColorRefMixOnto \| AgColorRefMixOntoColor |  | The colour for text elements. A colour string, or a theme-colour reference object. |
| tile.secondaryLabel.fontSize | FontSize |  | The size of the font in pixels for text elements. |
| tile.secondaryLabel.fontFamily | FontFamily |  | The font family for text elements. |
| tile.secondaryLabel.fontStyle | FontStyle |  | The style to use for text elements. |
| tile.secondaryLabel.fontWeight | FontWeight |  | The font weight to use for text elements. |
| tile.secondaryLabel.border | BorderOptions |  | Stroke options for the box border. |
| tile.secondaryLabel.border.enabled | boolean |  | Whether the associated elements and properties should be used in the chart. |
| tile.secondaryLabel.border.stroke | CssColor \| AgColorRef \| AgColorRefMixOnto \| AgColorRefMixOntoColor |  | The colour for the stroke. |
| tile.secondaryLabel.border.strokeWidth | PixelSize |  | The width of the stroke in pixels. |
| tile.secondaryLabel.border.strokeOpacity | Opacity |  | The opacity of the stroke colour. |
| tile.secondaryLabel.cornerRadius | PixelSize |  | Apply rounded corners to the label box. |
| tile.secondaryLabel.padding | PixelSize \| PaddingOptions |  | Distance between the label text and the border. A number applies uniform padding; an object sets each side. |
| tile.secondaryLabel.fill | CssColor \| AgColorRef \| AgColorRefMixOnto \| AgColorRefMixOntoColor \| AgGradientColor \| AgPatternColor \| AgImageFill |  | The colour for filling shapes. A colour string, or an object for a gradient, pattern, or image fill. |
| tile.secondaryLabel.fillOpacity | Opacity |  | The opacity of the fill colour. |
| tile.textAlign | 'left' \| 'center' \| 'right' |  | Horizontal position of the label. |
| tile.verticalAlign | 'top' \| 'middle' \| 'bottom' |  | Vertical position of the label. |
| tile.padding | PixelSize |  | Distance between the tile edges and the text. |
| tile.gap | PixelSize |  | Gap between adjacent tile. |
| tooltip | AgSeriesTooltip |  | Series-specific tooltip configuration. |
| tooltip.enabled | boolean |  | Whether to show tooltips when the series are hovered over. |
| tooltip.showArrow | boolean |  | The tooltip arrow is displayed by default, unless the container restricts it or a position offset is provided. To always display the arrow, set `showArrow` to `true`. To remove the arrow, set `showArrow` to `false`. |
| tooltip.range | PixelSize \| 'exact' \| 'nearest' \| 'area' |  | Range from a point that triggers the tooltip to show. Each series type uses its own default; typically this is `'nearest'` for marker-based series and `'exact'` for shape-based series. |
| tooltip.position | AgTooltipPositionOptions |  | The position of the tooltip. Each series type uses its own default; typically this is `'node'` for marker-based series and `'pointer'` for shape-based series. |
| tooltip.position.anchorTo | AgTooltipAnchorTo |  | The element or point to position the tooltip relative to. |
| tooltip.position.placement | AgTooltipPlacement \| AgTooltipPlacement[] |  | The positioning of the tooltip in relation to the element it's anchored to. Multiple values can be provided as a fallback mechanism for the case the tooltip does not fit inside the chart. |
| tooltip.position.xOffset | PixelSize |  | The horizontal offset in pixels for the position of the tooltip. |
| tooltip.position.yOffset | PixelSize |  | The vertical offset in pixels for the position of the tooltip. |
| tooltip.position.offset | PixelSize |  | The distance in pixels between the tooltip and its anchor point, applied in the placement direction.  Default: `12` (`0` when `anchorTo` is `'chart'`). |
| tooltip.interaction | AgSeriesTooltipInteraction |  | Configuration for tooltip interaction. |
| tooltip.interaction.enabled (required) | boolean |  | Set to `true` to keep the tooltip open when the mouse is hovering over it, and enable clicking tooltip text |
| tooltip.renderer | Renderer |  | Function used to create the content for tooltips. |
| itemStyler | Styler |  | A callback function for adjusting the styles of a particular tile based on the input parameters. |