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

HighChart TreeMap - Children Border is invisible

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 ?
Image
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)
Image
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;
gpathak
Posts: 6
Joined: Wed Dec 08, 2021 11:39 pm

Re: HighChart TreeMap - Children Border is invisible

Incase if someone wants to run and try, below is the link of application:
https://github.com/pathak-gaurav/pairwise-comparision -- BACKEND
https://github.com/pathak-gaurav/pairwise-ui-final -- FRONTEND
mateusz.b
Posts: 2006
Joined: Tue Jul 13, 2021 11:34 am

Re: HighChart TreeMap - Children Border is invisible

Hi gpathak,

Thanks for contacting us with your question.

Please recreate the issue in this demo and provide me with a link:
https://stackblitz.com/edit/highcharts- ... mponent.ts

Regards!
Mateusz Bernacik
Highcharts Developer
gpathak
Posts: 6
Joined: Wed Dec 08, 2021 11:39 pm

Re: HighChart TreeMap - Children Border is invisible

Hi Mateusz,

Thank you, I have added the code and have recreated the issue.
https://stackblitz.com/edit/highcharts- ... mponent.ts
gpathak
Posts: 6
Joined: Wed Dec 08, 2021 11:39 pm

Re: HighChart TreeMap - Children Border is invisible

mateusz.b wrote: Wed May 18, 2022 7:54 am Hi gpathak,

Thanks for contacting us with your question.

Please recreate the issue in this demo and provide me with a link:
https://stackblitz.com/edit/highcharts- ... mponent.ts

Regards!
Hi Mateusz,

Thank you, I have added the code and have recreated the issue.
https://stackblitz.com/edit/highcharts- ... mponent.ts
mateusz.b
Posts: 2006
Joined: Tue Jul 13, 2021 11:34 am

Re: HighChart TreeMap - Children Border is invisible

Hi gpathak,

Thanks for the demo.

Borders didn't show because of incorrect color value in line 43. Please take a look at this demo and let me know if it was what you were looking for:
https://stackblitz.com/edit/highcharts- ... mponent.ts

Regards!
Mateusz Bernacik
Highcharts Developer

Return to “Highcharts Usage”