Hi Team,
I have a HighChart on which Children node under it's parent doesn't have border, could you please provide information what exactly is missing ?
Treemap Image: https://ibb.co/tPFY933
I want the child to be have line's within it's parent like shown in below image. (The color of border is not Important)
Treemap Image: https://ibb.co/RDc1wwG
Below is my Angular Code:
//HighCharts TreeMap
datatable: any = [{name: 'Root', parent: null, value: 100, colorValue: 1}];
Highcharts: typeof Highcharts = Highcharts; // required
chartOptions: Highcharts.Options = {
series: [{
type: "treemap",
layoutAlgorithm: 'sliceAndDice', //'sliceAndDice',
alternateStartingDirection: true,
allowTraversingTree:true,
animationLimit: 1000,
data: this.datatable,
levelIsConstant: false,
levels: [{
layoutAlgorithm: 'sliceAndDice',
level: 1,
borderWidth: 3,
borderColor: '#130f0f',
color: '#f8f9fc ',
dataLabels: {
color: '#130f0f',
enabled: true,
align: 'center',
verticalAlign: 'top',
format: 'Node: {point.name}, Value: {point.value}, Parent: {point.parent}<br/> ',
style: {
// fontSize: '15px',
fontFamily: 'sans-serif',
fontWeight: 'sans-serif'
}
}
},{
layoutAlgorithm: 'squarified',
level: 2,
borderWidth: 1,
borderColor: '#130f0f',
color: '#f8f9fc',
dataLabels: {
color: '#130f0f',
enabled: true,
align: 'center',
verticalAlign: 'middle',
format: 'Node: {point.name}, Value: {point.value}, Parent: {point.parent} <br/>',
style: {
// fontSize: '15px',
fontFamily: 'sans-serif',
fontWeight: 'sans-serif'
}
}
}
]
}],
colorAxis: {
minColor: '#7a2e69',
maxColor: '#E11919FF'
},
title: {
text: 'Pairwise Comparisons Model'
}, exporting: {
enabled: true,
},
plotOptions: {
series: {
events: {
click: function (event) {
}
}
}
}, credits: {
enabled: false,
},
tooltip: {
useHTML: true,
followPointer: true,
pointFormat: '<span>Node: {point.name}, Value: {point.value}, Parent: {point.parent} </span>',
}
} // required
updateFlag: boolean = false; // optional boolean
invisible: boolean = true;