How to show the container in a nested treemap? - highcharts

Question

I have a treemap made of
a big container
with an element
with an element
with an element which is itself made of
an element
an element
another big container
Highcharts.chart('container', {
series: [{
type: "treemap",
animation: false,
data: [
// first big category
{
id: 'B',
name: 'B'
},
{
name: 'Anne',
parent: 'B',
value: 4
}, {
name: 'Peter',
parent: 'B',
value: 1
},
// below is a member of forst big category, but with sub-categories
{
name: 'aaa container',
parent: 'B',
id: 'aaa'
}, {
name: 'Anneinaaa',
parent: 'aaa',
value: 1
}, {
name: 'Rickinaaa',
parent: 'aaa',
value: 3
},
// second big category
{
name: 'Susanne',
parent: 'Kiwi',
value: 2,
color: '#9EDE00'
}
]
}],
});
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/treemap.js"></script>
<div id="container"></div>
I would like to highlight the fact that there is a container for Rickinaaa and Anneinaaa, with a description.
Right now Rickinaaa and Anneinaaa are at the same level as Anne and Peter, despite the fact that it is their container (the one I do not know how to show) which should be at their level.
An example from ZingCharts which shows this multilayer presentation:
It is much easier to see the box-in-a-box structure.
Is there a way to achieve this in Highcharts? Specifically, how could I have a visible container labelled aaa container which would encompass the rectangles Rickinaaa and Anneinaaa

Answer 1

It can be done by using custom positioning algorithm for treemap. The process is described here: https://www.highcharts.com/docs/chart-and-series-types/treemap (ADD YOUR OWN ALGORITHM section).
I created simplified algorithm for demo purposes (some values are hardcoded):
// Custom positioning algorithm
function myFunction(parent, children) {
childrenAreas = [];
Highcharts.each(children, function(child) {
// Do some calculations
var newLeaf = null;
if (child.id === 'A') {
newLeaf = {
x: 0,
y: 0,
width: 50,
height: 50
};
} else if (child.id === 'B') {
newLeaf = {
x: 50,
y: 0,
width: 50,
height: 50
};
} else if (child.name === 'Rick') {
newLeaf = {
x: parent.x + 10,
y: parent.y + 10,
width: parent.width - 20,
height: (parent.height - 20) / 2
}
} else if (child.name === 'Peter') {
newLeaf = {
x: parent.x + 10,
y: parent.y + 30,
width: parent.width - 20,
height: (parent.height - 20) / 2
}
} else if (child.name === 'Anne') {
newLeaf = {
x: parent.x + 10,
y: 10,
width: parent.width - 20,
height: parent.height - 20
}
}
if (newLeaf) {
childrenAreas.push(newLeaf);
}
});
return childrenAreas;
};
Highcharts.seriesTypes.treemap.prototype.myCustomAlgorithm = myFunction;
By default Highcharts assigns color fill attribute only for the nodes of the Highest level - all other nodes have it set to none. It can be changed manually via CSS:
.highcharts-internal-node {
fill: #bada55
}
I also did a small change in the core code so that parent levels are drawn underneath the child ones:
(function(H) {
var grep = H.grep,
each = H.each,
seriesTypes = H.seriesTypes;
H.seriesTypes.treemap.prototype.drawPoints = function() {
var series = this,
points = grep(series.points, function(n) {
return n.node.visible;
});
each(points, function(point) {
var groupKey = 'level-group-' + point.node.levelDynamic;
if (!series[groupKey]) {
series[groupKey] = series.chart.renderer.g(groupKey)
.attr({
// CHANGED FROM: zIndex: 1000 - point.node.levelDynamic
zIndex: 1000 + point.node.levelDynamic // #todo Set the zIndex based upon the number of levels, instead of using 1000
})
.add(series.group);
}
point.group = series[groupKey];
});
// Call standard drawPoints
seriesTypes.column.prototype.drawPoints.call(this);
// If drillToNode is allowed, set a point cursor on clickables & add drillId to point
if (series.options.allowDrillToNode) {
each(points, function(point) {
if (point.graphic) {
point.drillId = series.options.interactByLeaf ? series.drillToByLeaf(point) : series.drillToByGroup(point);
}
});
}
}
})(Highcharts);
Live demo: https://jsfiddle.net/BlackLabel/wfed4jeo/