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 Copy Link
import {
AgChartOptions,
AgCharts,
AnimationModule,
ContextMenuModule,
CrosshairModule,
LegendModule,
ModuleRegistry,
TreemapSeriesModule,
} from "ag-charts-enterprise";
import { data } from "./data";
ModuleRegistry.registerModules([
AnimationModule,
CrosshairModule,
LegendModule,
TreemapSeriesModule,
ContextMenuModule,
]);
const options: AgChartOptions = {
data,
series: [
{
type: "treemap",
labelKey: "title",
},
],
title: {
text: "UK Government Budget",
},
subtitle: {
text: "2024",
},
};
options.container = document.getElementById("myChart");
const chart = AgCharts.create(options);
export const data = [
{
title: "Other Spending",
children: [
{
title: "General economic, commercial and labour",
total: 18.8,
change: -2.8,
},
{
title: "Agriculture, forestry, fishing and hunt",
total: 6.5,
change: 0.3,
},
{ title: "Fuel and energy", total: 8.8, change: -40 },
{ title: "Communication", total: 0.2, change: -0.1 },
{ title: "Other industries", total: 0.2, change: -0.1 },
{ title: "R&D Economic affairs", total: 12.6, change: 5.4 },
{ title: "Economic affairs n.e.c.", total: 1.1, change: 0.4 },
{ title: "Waste management", total: 3.4, change: 0.4 },
{ title: "Pollution abatement", total: 1, change: 0.6 },
{
title: "Protection of biodiversity and landscap",
total: 0.5,
change: 0,
},
{ title: "R&D Environmental protection", total: 0.5, change: 0.2 },
{ title: "Environmental protection n.e.c.", total: 2.3, change: 0.6 },
{ title: "Housing development", total: 3.4, change: 0.7 },
{ title: "Community development", total: 0.6, change: 0.1 },
{ title: "Water supply", total: 0.4, change: -0.7 },
{
title: "Housing and community amenities n.e.c.",
total: 0.3,
change: 0.1,
},
{ title: "Recreational and sporting services", total: 0.5, change: -0.5 },
{ title: "Cultural services", total: 2.3, change: -0.3 },
{
title: "Broadcasting and publishing services",
total: 7.7,
change: 2.6,
},
{
title: "Religious and other community services",
total: 0.1,
change: -0.1,
},
{
title: "R&D Recreation, culture and religion",
total: 0.2,
change: 0.1,
},
{
title: "Recreation, culture and religion n.e.c.",
total: 0.2,
change: 0,
},
{ title: "Other Spending", total: 59.4, change: 10.5 },
],
},
{
title: "Education",
children: [
{ title: "Pre-primary and primary education", total: 1.3, change: 0.2 },
{ title: "Secondary education", total: 43.3, change: 0.4 },
{ title: "Tertiary education", total: 5.1, change: 0.5 },
{ title: "Education not definable by level", total: 1.9, change: 0.8 },
{ title: "Subsidiary services to education", total: 0.8, change: 0 },
{ title: "R&D Education", total: 2.7, change: -0.3 },
{ title: "Education n.e.c.", total: 2.8, change: 0 },
],
},
{
title: "Protection",
children: [
{ title: "Police services", total: 5.5, change: -0.3 },
{ title: "Fire-protection services", total: 0.6, change: 0 },
{ title: "Law courts", total: 8.2, change: 0.3 },
{ title: "Prisons", total: 7.7, change: 1.6 },
{ title: "R&D Public order and safety", total: 1, change: -2.6 },
{ title: "Public order and safety n.e.c.", total: 1.2, change: 0 },
],
},
{
title: "Defence",
children: [
{ title: "Military defence", total: 50.4, change: 0 },
{ title: "Foreign military aid", total: 0.4, change: -2.2 },
{ title: "Foreign economic aid", total: 6.6, change: 1.5 },
{ title: "R&D Defence", total: 2.6, change: 0.3 },
{ title: "Defence n.e.c.", total: 0.2, change: 0 },
],
},
{
title: "General Government",
children: [
{
title: "Executive and legislative organs, finan",
total: 19.8,
change: -2.3,
},
{ title: "General services", total: 1.5, change: 0 },
{ title: "R&D General public services", total: 0.5, change: 0.2 },
{ title: "General public services n.e.c.", total: 0.7, change: 0.3 },
],
},
{
title: "Welfare",
children: [
{ title: "Family and children", total: 16.8, change: 1.7 },
{ title: "Housing", total: 6.2, change: -0.5 },
{ title: "Social exclusion n.e.c.", total: 65.4, change: 9.4 },
{ title: "Social protection n.e.c.", total: 15.1, change: 3.5 },
],
},
{
title: "Pensions",
children: [
{ title: "Sickness and disability", total: 61.2, change: 8.7 },
{ title: "Old age", total: 141.8, change: 20 },
],
},
{
title: "Health Care",
children: [{ title: "Medical service", total: 205.6, change: 9.4 }],
},
{
title: "Interest",
children: [
{ title: "Public debt transactions", total: 76.9, change: -29.9 },
],
},
{
title: "Transport",
children: [{ title: "Transport", total: 33.7, change: 1.6 }],
},
];
The Treemap Series is designed to display a single series and is created using the treemap series type.
{
series: [
{
type: 'treemap',
labelKey: 'title',
},
],
}The data passed in should be an array of nodes, with each node optionally containing children.
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 Copy Link
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.
import {
AgChartOptions,
AgCharts,
AnimationModule,
ContextMenuModule,
CrosshairModule,
LegendModule,
ModuleRegistry,
TreemapSeriesModule,
} from "ag-charts-enterprise";
import { data } from "./data";
ModuleRegistry.registerModules([
AnimationModule,
CrosshairModule,
LegendModule,
TreemapSeriesModule,
ContextMenuModule,
]);
const options: AgChartOptions = {
data: data,
series: [
{
type: "treemap",
labelKey: "title",
sizeKey: "total",
sizeName: "Total",
},
],
title: {
text: "UK Government Budget",
},
subtitle: {
text: "2024",
},
};
options.container = document.getElementById("myChart");
const chart = AgCharts.create(options);
export const data = [
{
title: "Health Care",
children: [{ title: "Medical service", total: 205.6, change: 9.4 }],
},
{
title: "Pensions",
children: [
{ title: "Sickness and disability", total: 61.2, change: 8.7 },
{ title: "Old age", total: 141.8, change: 20 },
],
},
{
title: "Other Spending",
children: [
{
title: "General economic, commercial and labour",
total: 18.8,
change: -2.8,
},
{
title: "Agriculture, forestry, fishing and hunt",
total: 6.5,
change: 0.3,
},
{ title: "Fuel and energy", total: 8.8, change: -40 },
{ title: "Communication", total: 0.2, change: -0.1 },
{ title: "Other industries", total: 0.2, change: -0.1 },
{ title: "R&D Economic affairs", total: 12.6, change: 5.4 },
{ title: "Economic affairs n.e.c.", total: 1.1, change: 0.4 },
{ title: "Waste management", total: 3.4, change: 0.4 },
{ title: "Pollution abatement", total: 1, change: 0.6 },
{
title: "Protection of biodiversity and landscap",
total: 0.5,
change: 0,
},
{ title: "R&D Environmental protection", total: 0.5, change: 0.2 },
{ title: "Environmental protection n.e.c.", total: 2.3, change: 0.6 },
{ title: "Housing development", total: 3.4, change: 0.7 },
{ title: "Community development", total: 0.6, change: 0.1 },
{ title: "Water supply", total: 0.4, change: -0.7 },
{
title: "Housing and community amenities n.e.c.",
total: 0.3,
change: 0.1,
},
{ title: "Recreational and sporting services", total: 0.5, change: -0.5 },
{ title: "Cultural services", total: 2.3, change: -0.3 },
{
title: "Broadcasting and publishing services",
total: 7.7,
change: 2.6,
},
{
title: "Religious and other community services",
total: 0.1,
change: -0.1,
},
{
title: "R&D Recreation, culture and religion",
total: 0.2,
change: 0.1,
},
{
title: "Recreation, culture and religion n.e.c.",
total: 0.2,
change: 0,
},
{ title: "Other Spending", total: 59.4, change: 10.5 },
],
},
{
title: "Welfare",
children: [
{ title: "Family and children", total: 16.8, change: 1.7 },
{ title: "Housing", total: 6.2, change: -0.5 },
{ title: "Social exclusion n.e.c.", total: 65.4, change: 9.4 },
{ title: "Social protection n.e.c.", total: 15.1, change: 3.5 },
],
},
{
title: "Interest",
children: [
{ title: "Public debt transactions", total: 76.9, change: -29.9 },
],
},
{
title: "Defence",
children: [
{ title: "Military defence", total: 50.4, change: 0 },
{ title: "Foreign military aid", total: 0.4, change: -2.2 },
{ title: "Foreign economic aid", total: 6.6, change: 1.5 },
{ title: "R&D Defence", total: 2.6, change: 0.3 },
{ title: "Defence n.e.c.", total: 0.2, change: 0 },
],
},
{
title: "Education",
children: [
{ title: "Pre-primary and primary education", total: 1.3, change: 0.2 },
{ title: "Secondary education", total: 43.3, change: 0.4 },
{ title: "Tertiary education", total: 5.1, change: 0.5 },
{ title: "Education not definable by level", total: 1.9, change: 0.8 },
{ title: "Subsidiary services to education", total: 0.8, change: 0 },
{ title: "R&D Education", total: 2.7, change: -0.3 },
{ title: "Education n.e.c.", total: 2.8, change: 0 },
],
},
{
title: "Transport",
children: [{ title: "Transport", total: 33.7, change: 1.6 }],
},
{
title: "Protection",
children: [
{ title: "Police services", total: 5.5, change: -0.3 },
{ title: "Fire-protection services", total: 0.6, change: 0 },
{ title: "Law courts", total: 8.2, change: 0.3 },
{ title: "Prisons", total: 7.7, change: 1.6 },
{ title: "R&D Public order and safety", total: 1, change: -2.6 },
{ title: "Public order and safety n.e.c.", total: 1.2, change: 0 },
],
},
{
title: "General Government",
children: [
{
title: "Executive and legislative organs, finan",
total: 19.8,
change: -2.3,
},
{ title: "General services", total: 1.5, change: 0 },
{ title: "R&D General public services", total: 0.5, change: 0.2 },
{ title: "General public services n.e.c.", total: 0.7, change: 0.3 },
],
},
];
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.
{
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 Copy Link
Use colorScale to control how colorKey values map to colours.
import {
AgCharts,
AgStandaloneChartOptions,
AgTreemapSeriesOptions,
GradientLegendModule,
LegendModule,
ModuleRegistry,
TreemapSeriesModule,
} from "ag-charts-enterprise";
import { data } from "./data";
ModuleRegistry.registerModules([
GradientLegendModule,
LegendModule,
TreemapSeriesModule,
]);
const options: 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",
},
};
options.container = document.getElementById("myChart");
const chart = AgCharts.create(options);
function modeChange(event: Event) {
const mode = (event.target as HTMLInputElement).value as "stops" | "gradient";
const series = options.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" },
],
};
options.legend = { enabled: true };
options.gradientLegend = { enabled: false };
} else {
series.colorScale = {
fills: [{ color: "tomato" }, { color: "gold" }, { color: "seagreen" }],
domain: [-40, 40],
};
options.legend = { enabled: false };
options.gradientLegend = { enabled: true };
}
chart.update(options);
}
if (typeof window !== "undefined") {
// Attach external event handlers to window so they can be called from index.html
(<any>window).modeChange = modeChange;
}
export const data = [
{
title: "Health Care",
children: [{ title: "Medical service", total: 205.6, change: 25 }],
},
{
title: "Pensions",
children: [
{ title: "Sickness and disability", total: 61.2, change: -18 },
{ title: "Old age", total: 141.8, change: 32 },
],
},
{
title: "Other Spending",
children: [
{
title: "General economic, commercial and labour",
total: 18.8,
change: -12,
},
{
title: "Agriculture, forestry, fishing and hunt",
total: 6.5,
change: 3,
},
{ title: "Fuel and energy", total: 8.8, change: -35 },
{ title: "Communication", total: 0.2, change: -5 },
{ title: "Other industries", total: 0.2, change: -1 },
{ title: "R&D Economic affairs", total: 12.6, change: 15 },
{ title: "Economic affairs n.e.c.", total: 1.1, change: 0 },
{ title: "Waste management", total: 3.4, change: 8 },
{ title: "Pollution abatement", total: 1, change: -7 },
{
title: "Protection of biodiversity and landscap",
total: 0.5,
change: -22,
},
{ title: "R&D Environmental protection", total: 0.5, change: 4 },
{ title: "Environmental protection n.e.c.", total: 2.3, change: -9 },
{ title: "Housing development", total: 3.4, change: 12 },
{ title: "Community development", total: 0.6, change: -3 },
{ title: "Water supply", total: 0.4, change: -15 },
{
title: "Housing and community amenities n.e.c.",
total: 0.3,
change: 1,
},
{ title: "Recreational and sporting services", total: 0.5, change: -8 },
{ title: "Cultural services", total: 2.3, change: -4 },
{ title: "Broadcasting and publishing services", total: 7.7, change: 18 },
{
title: "Religious and other community services",
total: 0.1,
change: -2,
},
{ title: "R&D Recreation, culture and religion", total: 0.2, change: 6 },
{
title: "Recreation, culture and religion n.e.c.",
total: 0.2,
change: 0,
},
{ title: "Other Spending", total: 59.4, change: 22 },
],
},
{
title: "Welfare",
children: [
{ title: "Family and children", total: 16.8, change: -10 },
{ title: "Housing", total: 6.2, change: -6 },
{ title: "Social exclusion n.e.c.", total: 65.4, change: 28 },
{ title: "Social protection n.e.c.", total: 15.1, change: 10 },
],
},
{
title: "Interest",
children: [{ title: "Public debt transactions", total: 76.9, change: -30 }],
},
{
title: "Defence",
children: [
{ title: "Military defence", total: 50.4, change: 5 },
{ title: "Foreign military aid", total: 0.4, change: -25 },
{ title: "Foreign economic aid", total: 6.6, change: 7 },
{ title: "R&D Defence", total: 2.6, change: -14 },
{ title: "Defence n.e.c.", total: 0.2, change: 2 },
],
},
{
title: "Education",
children: [
{ title: "Pre-primary and primary education", total: 1.3, change: 9 },
{ title: "Secondary education", total: 43.3, change: 2 },
{ title: "Tertiary education", total: 5.1, change: -11 },
{ title: "Education not definable by level", total: 1.9, change: 14 },
{ title: "Subsidiary services to education", total: 0.8, change: 0 },
{ title: "R&D Education", total: 2.7, change: -6 },
{ title: "Education n.e.c.", total: 2.8, change: -3 },
],
},
{
title: "Transport",
children: [{ title: "Transport", total: 33.7, change: 11 }],
},
{
title: "Protection",
children: [
{ title: "Police services", total: 5.5, change: -4 },
{ title: "Fire-protection services", total: 0.6, change: 1 },
{ title: "Law courts", total: 8.2, change: 6 },
{ title: "Prisons", total: 7.7, change: -16 },
{ title: "R&D Public order and safety", total: 1, change: -20 },
{ title: "Public order and safety n.e.c.", total: 1.2, change: 0 },
],
},
{
title: "General Government",
children: [
{
title: "Executive and legislative organs, finan",
total: 19.8,
change: -8,
},
{ title: "General services", total: 1.5, change: 3 },
{ title: "R&D General public services", total: 0.5, change: 16 },
{ title: "General public services n.e.c.", total: 0.7, change: -2 },
],
},
];
{
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 page for the full range of colour scale options including discrete mode, named stops, fixed domains, missing data, and gradient legend customisation.
Other Colours Copy Link
It's possible to override the default colours, or the colours on a group or tile basis.
import {
AgChartOptions,
AgCharts,
AnimationModule,
ContextMenuModule,
CrosshairModule,
LegendModule,
ModuleRegistry,
TreemapSeriesModule,
} from "ag-charts-enterprise";
import { data } from "./data";
ModuleRegistry.registerModules([
AnimationModule,
CrosshairModule,
LegendModule,
TreemapSeriesModule,
ContextMenuModule,
]);
const options: 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",
},
};
options.container = document.getElementById("myChart");
const chart = AgCharts.create(options);
export const data = [
{
title: "Health Care",
children: [{ title: "Medical service", total: 205.6, change: 9.4 }],
},
{
title: "Pensions",
children: [
{ title: "Sickness and disability", total: 61.2, change: 8.7 },
{ title: "Old age", total: 141.8, change: 20 },
],
},
{
title: "Other Spending",
children: [
{
title: "General economic, commercial and labour",
total: 18.8,
change: -2.8,
},
{
title: "Agriculture, forestry, fishing and hunt",
total: 6.5,
change: 0.3,
},
{ title: "Fuel and energy", total: 8.8, change: -40 },
{ title: "Communication", total: 0.2, change: -0.1 },
{ title: "Other industries", total: 0.2, change: -0.1 },
{ title: "R&D Economic affairs", total: 12.6, change: 5.4 },
{ title: "Economic affairs n.e.c.", total: 1.1, change: 0.4 },
{ title: "Waste management", total: 3.4, change: 0.4 },
{ title: "Pollution abatement", total: 1, change: 0.6 },
{
title: "Protection of biodiversity and landscap",
total: 0.5,
change: 0,
},
{ title: "R&D Environmental protection", total: 0.5, change: 0.2 },
{ title: "Environmental protection n.e.c.", total: 2.3, change: 0.6 },
{ title: "Housing development", total: 3.4, change: 0.7 },
{ title: "Community development", total: 0.6, change: 0.1 },
{ title: "Water supply", total: 0.4, change: -0.7 },
{
title: "Housing and community amenities n.e.c.",
total: 0.3,
change: 0.1,
},
{ title: "Recreational and sporting services", total: 0.5, change: -0.5 },
{ title: "Cultural services", total: 2.3, change: -0.3 },
{
title: "Broadcasting and publishing services",
total: 7.7,
change: 2.6,
},
{
title: "Religious and other community services",
total: 0.1,
change: -0.1,
},
{
title: "R&D Recreation, culture and religion",
total: 0.2,
change: 0.1,
},
{
title: "Recreation, culture and religion n.e.c.",
total: 0.2,
change: 0,
},
{ title: "Other Spending", total: 59.4, change: 10.5 },
],
},
{
title: "Welfare",
children: [
{ title: "Family and children", total: 16.8, change: 1.7 },
{ title: "Housing", total: 6.2, change: -0.5 },
{ title: "Social exclusion n.e.c.", total: 65.4, change: 9.4 },
{ title: "Social protection n.e.c.", total: 15.1, change: 3.5 },
],
},
{
title: "Interest",
children: [
{ title: "Public debt transactions", total: 76.9, change: -29.9 },
],
},
{
title: "Defence",
children: [
{ title: "Military defence", total: 50.4, change: 0 },
{ title: "Foreign military aid", total: 0.4, change: -2.2 },
{ title: "Foreign economic aid", total: 6.6, change: 1.5 },
{ title: "R&D Defence", total: 2.6, change: 0.3 },
{ title: "Defence n.e.c.", total: 0.2, change: 0 },
],
},
{
title: "Education",
children: [
{ title: "Pre-primary and primary education", total: 1.3, change: 0.2 },
{ title: "Secondary education", total: 43.3, change: 0.4 },
{ title: "Tertiary education", total: 5.1, change: 0.5 },
{ title: "Education not definable by level", total: 1.9, change: 0.8 },
{ title: "Subsidiary services to education", total: 0.8, change: 0 },
{ title: "R&D Education", total: 2.7, change: -0.3 },
{ title: "Education n.e.c.", total: 2.8, change: 0 },
],
},
{
title: "Transport",
children: [{ title: "Transport", total: 33.7, change: 1.6 }],
},
{
title: "Protection",
children: [
{ title: "Police services", total: 5.5, change: -0.3 },
{ title: "Fire-protection services", total: 0.6, change: 0 },
{ title: "Law courts", total: 8.2, change: 0.3 },
{ title: "Prisons", total: 7.7, change: 1.6 },
{ title: "R&D Public order and safety", total: 1, change: -2.6 },
{ title: "Public order and safety n.e.c.", total: 1.2, change: 0 },
],
},
{
title: "General Government",
children: [
{
title: "Executive and legislative organs, finan",
total: 19.8,
change: -2.3,
},
{ title: "General services", total: 1.5, change: 0 },
{ title: "R&D General public services", total: 0.5, change: 0.2 },
{ title: "General public services n.e.c.", total: 0.7, change: 0.3 },
],
},
];
{
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:
fillsandstrokesare an array of colours to use for the fills and strokes, where node receives the colour indexed by the index of its root node
When colorScale.fills is used, the fills and strokes arrays are ignored.
Labels Copy Link
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.
import {
AgChartOptions,
AgCharts,
AnimationModule,
ContextMenuModule,
CrosshairModule,
LegendModule,
ModuleRegistry,
TreemapSeriesModule,
} from "ag-charts-enterprise";
import { data } from "./data";
ModuleRegistry.registerModules([
AnimationModule,
CrosshairModule,
LegendModule,
TreemapSeriesModule,
ContextMenuModule,
]);
const options: 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",
},
};
options.container = document.getElementById("myChart");
const chart = AgCharts.create(options);
export const data = [
{
title: "Health Care",
children: [{ title: "Medical service", total: 205.6, change: 9.4 }],
},
{
title: "Pensions",
children: [
{ title: "Sickness and disability", total: 61.2, change: 8.7 },
{ title: "Old age", total: 141.8, change: 20 },
],
},
{
title: "Other Spending",
children: [
{
title: "General economic, commercial and labour",
total: 18.8,
change: -2.8,
},
{
title: "Agriculture, forestry, fishing and hunt",
total: 6.5,
change: 0.3,
},
{ title: "Fuel and energy", total: 8.8, change: -40 },
{ title: "Communication", total: 0.2, change: -0.1 },
{ title: "Other industries", total: 0.2, change: -0.1 },
{ title: "R&D Economic affairs", total: 12.6, change: 5.4 },
{ title: "Economic affairs n.e.c.", total: 1.1, change: 0.4 },
{ title: "Waste management", total: 3.4, change: 0.4 },
{ title: "Pollution abatement", total: 1, change: 0.6 },
{
title: "Protection of biodiversity and landscap",
total: 0.5,
change: 0,
},
{ title: "R&D Environmental protection", total: 0.5, change: 0.2 },
{ title: "Environmental protection n.e.c.", total: 2.3, change: 0.6 },
{ title: "Housing development", total: 3.4, change: 0.7 },
{ title: "Community development", total: 0.6, change: 0.1 },
{ title: "Water supply", total: 0.4, change: -0.7 },
{
title: "Housing and community amenities n.e.c.",
total: 0.3,
change: 0.1,
},
{ title: "Recreational and sporting services", total: 0.5, change: -0.5 },
{ title: "Cultural services", total: 2.3, change: -0.3 },
{
title: "Broadcasting and publishing services",
total: 7.7,
change: 2.6,
},
{
title: "Religious and other community services",
total: 0.1,
change: -0.1,
},
{
title: "R&D Recreation, culture and religion",
total: 0.2,
change: 0.1,
},
{
title: "Recreation, culture and religion n.e.c.",
total: 0.2,
change: 0,
},
{ title: "Other Spending", total: 59.4, change: 10.5 },
],
},
{
title: "Welfare",
children: [
{ title: "Family and children", total: 16.8, change: 1.7 },
{ title: "Housing", total: 6.2, change: -0.5 },
{ title: "Social exclusion n.e.c.", total: 65.4, change: 9.4 },
{ title: "Social protection n.e.c.", total: 15.1, change: 3.5 },
],
},
{
title: "Interest",
children: [
{ title: "Public debt transactions", total: 76.9, change: -29.9 },
],
},
{
title: "Defence",
children: [
{ title: "Military defence", total: 50.4, change: 0 },
{ title: "Foreign military aid", total: 0.4, change: -2.2 },
{ title: "Foreign economic aid", total: 6.6, change: 1.5 },
{ title: "R&D Defence", total: 2.6, change: 0.3 },
{ title: "Defence n.e.c.", total: 0.2, change: 0 },
],
},
{
title: "Education",
children: [
{ title: "Pre-primary and primary education", total: 1.3, change: 0.2 },
{ title: "Secondary education", total: 43.3, change: 0.4 },
{ title: "Tertiary education", total: 5.1, change: 0.5 },
{ title: "Education not definable by level", total: 1.9, change: 0.8 },
{ title: "Subsidiary services to education", total: 0.8, change: 0 },
{ title: "R&D Education", total: 2.7, change: -0.3 },
{ title: "Education n.e.c.", total: 2.8, change: 0 },
],
},
{
title: "Transport",
children: [{ title: "Transport", total: 33.7, change: 1.6 }],
},
{
title: "Protection",
children: [
{ title: "Police services", total: 5.5, change: -0.3 },
{ title: "Fire-protection services", total: 0.6, change: 0 },
{ title: "Law courts", total: 8.2, change: 0.3 },
{ title: "Prisons", total: 7.7, change: 1.6 },
{ title: "R&D Public order and safety", total: 1, change: -2.6 },
{ title: "Public order and safety n.e.c.", total: 1.2, change: 0 },
],
},
{
title: "General Government",
children: [
{
title: "Executive and legislative organs, finan",
total: 19.8,
change: -2.3,
},
{ title: "General services", total: 1.5, change: 0 },
{ title: "R&D General public services", total: 0.5, change: 0.2 },
{ title: "General public services n.e.c.", total: 0.7, change: 0.3 },
],
},
];
Labels can be customised through the group and tile properties for non-leaf nodes and leaf nodes, respectively.
{
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:
fontSizesets the size of the fontminimumFontSizewill enable the font size to shrink down to the given value if there is not enough space (tiles only)spacingcontrols the amount of space below a labelpaddingadds space between the edge of a group or tile and its contentsformatterallows customising the value of a label using a function
Layout Copy Link
Various spacing values can be adjusted to tweak the layout of the chart.
import {
AgChartOptions,
AgCharts,
AnimationModule,
ContextMenuModule,
CrosshairModule,
LegendModule,
ModuleRegistry,
TreemapSeriesModule,
} from "ag-charts-enterprise";
import { data } from "./data";
ModuleRegistry.registerModules([
AnimationModule,
CrosshairModule,
LegendModule,
TreemapSeriesModule,
ContextMenuModule,
]);
const options: 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",
},
};
options.container = document.getElementById("myChart");
const chart = AgCharts.create(options);
export const data = [
{
title: "Health Care",
children: [{ title: "Medical service", total: 205.6, change: 9.4 }],
},
{
title: "Pensions",
children: [
{ title: "Sickness and disability", total: 61.2, change: 8.7 },
{ title: "Old age", total: 141.8, change: 20 },
],
},
{
title: "Other Spending",
children: [
{
title: "General economic, commercial and labour",
total: 18.8,
change: -2.8,
},
{
title: "Agriculture, forestry, fishing and hunt",
total: 6.5,
change: 0.3,
},
{ title: "Fuel and energy", total: 8.8, change: -40 },
{ title: "Communication", total: 0.2, change: -0.1 },
{ title: "Other industries", total: 0.2, change: -0.1 },
{ title: "R&D Economic affairs", total: 12.6, change: 5.4 },
{ title: "Economic affairs n.e.c.", total: 1.1, change: 0.4 },
{ title: "Waste management", total: 3.4, change: 0.4 },
{ title: "Pollution abatement", total: 1, change: 0.6 },
{
title: "Protection of biodiversity and landscap",
total: 0.5,
change: 0,
},
{ title: "R&D Environmental protection", total: 0.5, change: 0.2 },
{ title: "Environmental protection n.e.c.", total: 2.3, change: 0.6 },
{ title: "Housing development", total: 3.4, change: 0.7 },
{ title: "Community development", total: 0.6, change: 0.1 },
{ title: "Water supply", total: 0.4, change: -0.7 },
{
title: "Housing and community amenities n.e.c.",
total: 0.3,
change: 0.1,
},
{ title: "Recreational and sporting services", total: 0.5, change: -0.5 },
{ title: "Cultural services", total: 2.3, change: -0.3 },
{
title: "Broadcasting and publishing services",
total: 7.7,
change: 2.6,
},
{
title: "Religious and other community services",
total: 0.1,
change: -0.1,
},
{
title: "R&D Recreation, culture and religion",
total: 0.2,
change: 0.1,
},
{
title: "Recreation, culture and religion n.e.c.",
total: 0.2,
change: 0,
},
{ title: "Other Spending", total: 59.4, change: 10.5 },
],
},
{
title: "Welfare",
children: [
{ title: "Family and children", total: 16.8, change: 1.7 },
{ title: "Housing", total: 6.2, change: -0.5 },
{ title: "Social exclusion n.e.c.", total: 65.4, change: 9.4 },
{ title: "Social protection n.e.c.", total: 15.1, change: 3.5 },
],
},
{
title: "Interest",
children: [
{ title: "Public debt transactions", total: 76.9, change: -29.9 },
],
},
{
title: "Defence",
children: [
{ title: "Military defence", total: 50.4, change: 0 },
{ title: "Foreign military aid", total: 0.4, change: -2.2 },
{ title: "Foreign economic aid", total: 6.6, change: 1.5 },
{ title: "R&D Defence", total: 2.6, change: 0.3 },
{ title: "Defence n.e.c.", total: 0.2, change: 0 },
],
},
{
title: "Education",
children: [
{ title: "Pre-primary and primary education", total: 1.3, change: 0.2 },
{ title: "Secondary education", total: 43.3, change: 0.4 },
{ title: "Tertiary education", total: 5.1, change: 0.5 },
{ title: "Education not definable by level", total: 1.9, change: 0.8 },
{ title: "Subsidiary services to education", total: 0.8, change: 0 },
{ title: "R&D Education", total: 2.7, change: -0.3 },
{ title: "Education n.e.c.", total: 2.8, change: 0 },
],
},
{
title: "Transport",
children: [{ title: "Transport", total: 33.7, change: 1.6 }],
},
{
title: "Protection",
children: [
{ title: "Police services", total: 5.5, change: -0.3 },
{ title: "Fire-protection services", total: 0.6, change: 0 },
{ title: "Law courts", total: 8.2, change: 0.3 },
{ title: "Prisons", total: 7.7, change: 1.6 },
{ title: "R&D Public order and safety", total: 1, change: -2.6 },
{ title: "Public order and safety n.e.c.", total: 1.2, change: 0 },
],
},
{
title: "General Government",
children: [
{
title: "Executive and legislative organs, finan",
total: 19.8,
change: -2.3,
},
{ title: "General services", total: 1.5, change: 0 },
{ title: "R&D General public services", total: 0.5, change: 0.2 },
{ title: "General public services n.e.c.", total: 0.7, change: 0.3 },
],
},
];
{
series: [
{
type: 'treemap',
labelKey: 'title',
sizeKey: 'total',
sizeName: 'Total',
group: {
padding: 12,
gap: 5,
},
tile: {
padding: 10,
gap: 2,
},
},
],
}In this configuration:
group.paddingadjusts the padding between the edge of the group, its title, and the inner nodesgroup.gapadjusts the gap between adjacent tiles where one or more nodes in the parent node are group nodestile.paddingadjusts the padding between the edge of the tile and its labelstile.gapadjusts the gap between adjacent tiles where all nodes in the parent node are leaf nodes
Hierarchy Levels Copy Link
Treemap Series supports multiple levels within a hierarchy.
import {
AgChartOptions,
AgCharts,
AnimationModule,
ContextMenuModule,
CrosshairModule,
LegendModule,
ModuleRegistry,
TreemapSeriesModule,
} from "ag-charts-enterprise";
import { data } from "./data";
ModuleRegistry.registerModules([
AnimationModule,
CrosshairModule,
LegendModule,
TreemapSeriesModule,
ContextMenuModule,
]);
const options: AgChartOptions = {
data,
series: [
{
type: "treemap",
labelKey: "name",
},
],
title: {
text: "Organisational Chart",
},
};
options.container = document.getElementById("myChart");
const chart = AgCharts.create(options);
export const data = [
{
name: "Mariah Vaughan",
children: [
{
name: "Bushra Thomas",
children: [
{ name: "Cyrus Henderson", children: [] },
{ name: "Dora Jordan", children: [] },
{ name: "Skyla Downs", children: [] },
{ name: "Elissa O'Sullivan", children: [] },
],
},
{
name: "Craig Roman",
children: [
{ name: "Martin Reid", children: [] },
{ name: "Joanna Key", children: [] },
],
},
{
name: "Vincent Patterson",
children: [
{ name: "Franklin Hernandez", children: [] },
{ name: "Lilian Zuniga", children: [] },
{ name: "Eliza Schneider", children: [] },
],
},
{ name: "Caspar Mueller", children: [] },
{ name: "Annika Kim", children: [] },
{
name: "Aiza Jarvis",
children: [
{ name: "Katerina Marshall", children: [] },
{
name: "Nannie Massey",
children: [
{ name: "Abel Espinoza", children: [] },
{ name: "Rose Mckay", children: [] },
{ name: "Sana Winters", children: [] },
],
},
],
},
{
name: "Alan Burgess",
children: [{ name: "Jaxon Jefferson", children: [] }],
},
{ name: "Jay Suarez", children: [] },
],
},
{
name: "Nathanael Villa",
children: [
{ name: "Saira Sparks", children: [] },
{ name: "Stella Wyatt", children: [] },
{
name: "Carly O'Connor",
children: [{ name: "Ieuan Charles", children: [] }],
},
{ name: "Ariana Morales", children: [] },
],
},
];
Highlighting Copy Link
import {
AgChartOptions,
AgCharts,
AnimationModule,
ContextMenuModule,
CrosshairModule,
LegendModule,
ModuleRegistry,
TreemapSeriesModule,
} from "ag-charts-enterprise";
import { salesPerformance } from "./data";
ModuleRegistry.registerModules([
AnimationModule,
CrosshairModule,
LegendModule,
TreemapSeriesModule,
ContextMenuModule,
]);
const options: 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" },
},
},
},
],
};
options.container = document.getElementById("myChart");
const chart = AgCharts.create(options);
export const salesPerformance = [
{
name: "North America",
children: [
{ name: "Laptops", value: 14 },
{ name: "Mobiles", value: 11 },
{
name: "Accessories",
children: [
{ name: "Headphones", value: 6 },
{ name: "Chargers", value: 5 },
],
},
],
},
{
name: "Europe",
children: [
{ name: "Laptops", value: 10 },
{ name: "Mobiles", value: 8 },
{
name: "Accessories",
children: [
{ name: "Headphones", value: 4 },
{ name: "Chargers", value: 3 },
],
},
],
},
];
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.
{
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.highlightonly affects the group rectangles.tile.highlightcontrols the tiles themselves. When a group is hovered, only thefillOpacityandstrokeOpacitystyles are inherited by its tiles.- Providing
fill/strokeoverrides allows highlight colours to take precedence over colour scales.
Treemap Chart Examples Copy Link
See more Treemap Chart examples in the AG Charts Gallery.
API Reference Copy Link
Properties available on the AgTreemapSeriesOptions interface.
- type required
'treemap' - Configuration for the Treemap Series.
- id
stringdefault: 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
InteractionRange - Range from a node that a click triggers the listener.
- listeners
AgSeriesListeners - A map of event names to event listeners.
- 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
AgColorType[] - 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.
- group
AgTreemapSeriesGroupOptions - Options for group nodes (i.e. nodes WITH children).
- tile
AgTreemapSeriesTileOptions - Options for leaf nodes (i.e. nodes WITHOUT children).
- tooltip
AgSeriesTooltip - Series-specific tooltip configuration.
- itemStyler
Styler - A callback function for adjusting the styles of a particular tile based on the input parameters.
Properties available on the AgTreemapSeriesOptions interface.
- type required
'treemap' - Configuration for the Treemap Series.
- id
stringdefault: 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
InteractionRange - Range from a node that a click triggers the listener.
- listeners
AgSeriesListeners - A map of event names to event listeners.
- 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
AgColorType[] - 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.
- group
AgTreemapSeriesGroupOptions - Options for group nodes (i.e. nodes WITH children).
- tile
AgTreemapSeriesTileOptions - Options for leaf nodes (i.e. nodes WITHOUT children).
- tooltip
AgSeriesTooltip - Series-specific tooltip configuration.
- itemStyler
Styler - A callback function for adjusting the styles of a particular tile based on the input parameters.