i working on treemap with two different level. The color shades for each box should depend on some value not related to value assign for the size of box. and different parents group should have different color assign. I've created multiple color axis but have not been able to assign each color axis to different parents of each group. Like example in the picture,the 1st color axis (yellow) should belong to 'banana' group and 2nd color axis (gr[`
Highcharts.chart('container', {
color:['#36954E','#367B95','#7E9536','#C744D1','#44D1B7'],
colorAxis:[ {
minColor: '#E1C410',
maxColor: '#FFFFFF',
},{
minColor: '#2EE33C',
maxColor: '#FFFFFF',
},{
minColor: '#E17C10',
maxColor: '#FFFFFF',
}
],
series: [{
type: "treemap",
layoutAlgorithm: 'stripes',
alternateStartingDirection: true,
levels: [{
level: 1,
//layoutAlgorithm: 'sliceAndDice',
dataLabels: {
enabled: true,
align: 'left',
verticalAlign: 'top',
style: {
fontSize: '15px',
fontWeight: 'bold'
}
}
},{
level: 2,
layoutAlgorithm: 'strip',
}
],
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: 1
}, {
name: 'Peter',
parent: 'A',
value: 4,
colorValue: 8
}, {
name: 'Anne',
parent: 'B',
value: 4,
colorValue: 3
}, {
name: 'Rick',
parent: 'B',
value: 10,
colorValue: 9
}, {
name: 'Peter',
parent: 'B',
value: 1,
colorValue: 1
}, {
name: 'Anne',
parent: 'O',
value: 1,
colorValue: 2
}, {
name: 'Rick',
parent: 'O',
value: 2,
colorValue: 3
}, {
name: 'Peter',
parent: 'O',
value: 3,
colorValue: 9
}, {
name: 'Susanne',
parent: 'Kiwi',
value: 2,
colorValue: 6
}]
}],
title: {
text: 'Fruit consumption'
}
});<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/treemap.js"></script>
<script src="https://code.highcharts.com/modules/heatmap.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/accessibility.js"></script>
<figure class="highcharts-figure">
<div id="container"></div>
<p class="highcharts-description">
This chart shows a tree map with a hierarchy, where the
groups are labelled with a different text style from the
child nodes, and the nodes are grouped together by color.
</p>
</figure>`]1een) to group 'apple' and so on...
The color-axis feature works for the whole series, so you need to divide your parent groups into separate series. To display the series next to each other, create separate x-axis for each series.
xAxis: [{
width: '33.333%'
}, {
width: '33.333%',
left: '33.333%'
}, {
width: '33.333%',
left: '66.666%'
}],
series: [{
data: [...]
}, {
xAxis: 1,
colorAxis: 1,
data: [...]
}, {
xAxis: 2,
colorAxis: 2,
data: [...]
}]
Live demo: https://jsfiddle.net/BlackLabel/q3wyb298/
API Reference: