How to draw a Highcharts tree map where sum of children values are not equal to parent value - highcharts

Question

In a highcharts tree map I know the value of the parent and the values of some children - not of all children.
data:[{ id: 'C1', parent: 'P', value: 25, color: 'blue'},
{ id: 'C2', parent: 'P', value: 35, color: 'yellow'},
{ id: 'P', value: 100, color: 'red'}]
As you can see, there are missing children with a sum of 40.
When I draw this chart, I get P with an area of 100, but the children get enlared to 42 and 58, so they fill the complete area of P. If I omit the value in P, the children are sized correctly, but P has only a size of 60.
The wished result would be P with a size of 100 , and the children with 25 and 35, leaving 40 free (shown red).
The only way I could manage this was some dummy C3 child with the value of (P-C1-C2), but I would prefer not to do this calculation.
Is there a setting I can use? ignoreHiddenPoint: true did not help.

Answer 1

The best approach for that would be to add a hidden point (child), since the tree map calculates the children and accumulates these values at parent.
let Data = [{
id: 'C1',
parent: 'P',
value: 25,
color: 'blue'
},
{
id: 'C2',
parent: 'P',
value: 35,
color: 'yellow'
},
{
id: 'C3',
parent: 'P',
value: 40,
color: 'transparent',
},
{
id: 'P',
value: null,
color: 'red'
}
]
Highcharts.chart('container', {
series: [{
opacity: 1,
type: 'treemap',
layoutAlgorithm: 'strip',
allowDrillToNode: true,
animationLimit: 1000,
dataLabels: {
enabled: false
},
levelIsConstant: true,
levels: [{
level: 1,
dataLabels: {
enabled: true
},
borderWidth: 3
}],
data: Data
}],
});
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/treemap.js"></script>
<div id="container"></div>
Demo: https://jsfiddle.net/BlackLabel/g81L4xfp/