gpathak
Posts: 6
Joined: Wed Dec 08, 2021 11:39 pm

HighChart TreeMap as Hierarchy

Hi Team,

I am quite new in HighCharts and want to convert my below chart in Hierachy something like mentioned in this page viewtopic.php?t=39442.

I have tried different layoutAlgorithm and formatter but not able to achieve it. I request if you can provide what properties I am missing.

https://jsfiddle.net/3ektm5gu/

Highcharts.chart('container', {
colorAxis: {
minColor: '#FFFFFF',
maxColor: Highcharts.getOptions().colors[0]
},
series: [{
type: 'treemap',
layoutAlgorithm: 'stripes',
data: [{
name: 'A',
value: 25,
colorValue: 1
}, {
name: 'B',
value: 25,
colorValue: 2
}, {
name: 'C',
value: 25,
colorValue: 3
}, {
name: 'D',
value: 25,
colorValue: 4
}, {
name: 'B1',
value: 12.5,
colorValue: 5,
parent:'B',
}, {
name: 'B2',
value: 12.5,
colorValue: 6,
parent:'B',
}],
levels: [{
layoutAlgorithm: 'sliceAndDice',
level: 1,
borderWidth:3,
borderColor: '#130f0f',
color: '#f8f9fc',
dataLabels: {
color: '#130f0f',
enabled: true,
align: 'center',
verticalAlign: 'middle',
format: '</b> Node: {point.name}, Value: {point.value}, Parent: {point.parent}',
style: {
// fontSize: '15px',
fontFamily: 'sans-serif',
fontWeight: 'sans-serif'
}
}
}],
}],
title: {
text: 'Highcharts Treemap'
}
});
hubert.k
Posts: 1164
Joined: Mon Apr 11, 2022 11:48 am

Re: HighChart TreeMap as Hierarchy

HI gpathak,
We appreciate you reaching out to us!

To use levels in TreeMap you have to set id property to the parent object and then use this id in parent property of children. When your data is divided into levels then you can set different layoutAlgorithms at individual levels.

Demo: https://jsfiddle.net/BlackLabel/adctbux1/

Feel free to ask any further questions!
Regards!
Hubert Kozik
Highcharts Developer

Return to “Highcharts Maps”