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
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.
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 Scales Copy Link
Tiles can also be coloured using a scale. This lets you add an extra dimension of information to your chart.
Colouring can be customised by the colorKey and colorRange values in the series options.
{
series: [
{
type: 'treemap',
labelKey: 'title',
sizeKey: 'total',
sizeName: 'Total',
colorKey: 'change',
colorName: 'Change',
colorRange: ['#43A047', '#FF5722'],
},
],
}
In this configuration:
colorKeysupplies numeric values for the colour scalecolorNamesets the title that appears next to the colour value in tooltipscolorRangesupplies the colours for the colour scale (optional)
Other Colours Copy Link
It's possible to override the default colours, or the colours on a group or tile basis.
{
series: [
{
type: 'treemap',
labelKey: 'name',
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 a colorRange 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.
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.
{
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.
Gradient Legend Copy Link
The Gradient Legend aids in matching the colour coding of the Treemap Series to the underlying values, and is enabled by default.
series: [
{
type: 'treemap',
colorKey: 'change',
// ...
},
],
gradientLegend: {
enabled: true,
}
Position Copy Link
By default the Gradient Legend is placed at the bottom of the chart. Use the position option to change this.
{
gradientLegend: {
position: 'right',
},
}
When the position is left or right, the Gradient Legend displays the values in descending order. Use reverseOrder to change this.
Size Copy Link
{
gradientLegend: {
gradient: {
thickness: 50,
preferredLength: 400,
},
},
}
In the above configuration:
thicknesscontrols the thickness (or width) of the gradient bar.preferredLengthsets the initial length of the gradient bar. It is only preferred, as the Gradient Legend is constrained by the container edges.
Labels Copy Link
It is possible to customise the font, colour and padding of the labels by using the scale options.
{
gradientLegend: {
scale: {
label: {
fontSize: 20,
fontStyle: 'italic',
fontWeight: 'bold',
fontFamily: 'serif',
color: 'red',
},
padding: 20,
},
},
}