Highcharts - Tree map rectangles are showing the next level - highcharts

Question

I am using Highcharts Treemap and I want to prevent from showing the next level in every level of the treemap.
I want that every object on the treemap will be with only one color.
Here is my code:
Highcharts.chart('myChart', {
tooltip: {
backgroundColor: 'black',
style: {
"color": "white",
"font": "Roboto"
},
borderColor: 'black',
borderRadius: 5,
},
colorAxis: {
minColor: '#ffcfab',
maxColor: '#ff5e43' //'#FF5E43',
},
legend: {
enabled: false
},
series: [{
type: 'treemap',
layoutAlgorithm: 'squarified',
allowDrillToNode: true,
animationLimit: 1000,
dataLabels: {
enabled: false
},
levelIsConstant: false,
levels: [{
level: 1,
dataLabels: {
enabled: true
},
borderWidth: 3
}],
data: result
}],
title: {
text: 'All Data Sources',
margin: 1,
style: {
font: 'Roboto Condensed,sans-serif',
fontSize: '24px',
fontFamily: 'Roboto Condensed',
fontWeight: 700,
display: 'block',
}
}
})
Thanks In Advance.

Answer 1

Setting opacity to 0 for the series seems to be fixing your problem.
Demo: http://jsfiddle.net/qa2czu8y/
$(function() {
Highcharts.chart('container', {
title: {
text: 'All Data Sources',
margin: 1,
style: {
font: 'Roboto Condensed,sans-serif',
fontSize: '24px',
fontFamily: 'Roboto Condensed',
fontWeight: 700,
display: 'block',
}
},
series: [{
type: 'treemap',
layoutAlgorithm: 'squarified',
allowDrillToNode: true,
animationLimit: 1000,
dataLabels: {
enabled: false
},
levelIsConstant: false,
levels: [{
level: 1,
dataLabels: {
enabled: true
},
borderWidth: 3,
}],
opacity: 0,
data: [{
id: 'A',
name: 'Apples'
}, {
id: 'B',
name: 'Bananas'
}, {
id: 'O',
name: 'Oranges'
}, {
name: 'Anne',
parent: 'A',
value: 5,
colorValue: 5
}, {
name: 'Rick',
parent: 'A',
value: 3,
colorValue: 3
}, {
name: 'Peter',
parent: 'A',
value: 4,
colorValue: 4
}, {
name: 'Anne',
parent: 'B',
value: 4,
colorValue: 4
}, {
name: 'Rick',
parent: 'B',
value: 10,
colorValue: 10
}, {
name: 'Peter',
parent: 'B',
value: 1,
colorValue: 1
}, {
name: 'Anne',
parent: 'O',
value: 1,
colorValue: 1
}, {
name: 'Rick',
parent: 'O',
value: 3,
colorValue: 3
}, {
name: 'Peter',
parent: 'O',
value: 3,
colorValue: 3
}, {
name: 'Susanne',
parent: 'Kiwi',
value: 2,
colorValue: 2
}]
}],
tooltip: {
backgroundColor: 'black',
style: {
"color": "white",
"font": "Roboto"
},
borderColor: 'black',
borderRadius: 5
},
colorAxis: {
minColor: '#ffcfab',
maxColor: '#ff5e43' //'#FF5E43',
},
legend: {
enabled: false
},
});
});
#container {
min-width: 300px;
max-width: 600px;
margin: 0 auto;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/heatmap.js"></script>
<script src="https://code.highcharts.com/modules/treemap.js"></script>
<div id="container"></div>