jahnvi25
Posts: 284
Joined: Thu Oct 04, 2012 12:16 pm

treemap --> datalabel alignment

i am trying to display all labels in the top left corner..but level -1 title would take place.and level-2 datalabels are not aligned properly. for example in below example, look at the 'Technology' Node --> under that 'software' and 'Semicond' is aligned properly vertically.. but 'Hardware' not aligned properly vertically.. since it does not have level-1 title (blue title heading ) how can i make changes so that all of them are vertically top aligned properly


https://jsfiddle.net/2ydqujxz/1/


hope i am making sense..
Thanks
kamil.m
Posts: 892
Joined: Thu May 19, 2022 1:33 pm

Re: treemap --> datalabel alignment

Hi there,

What you have observed is a correct default behavior of a tree map series. To achieve what you need, please do the following:
Set the align to left, and verticalAlign to top on desired level (level 2 in your case), then you have to manually move the dataLabels that are overlapping with the parent title with the dataLabels.y property.

In the level dataLabels you can also set the allowOverlap to true - so that you will be able to tell which labels are overlapping.

Take a look at the demo bellow to get a better understanding.
DEMO: https://jsfiddle.net/BlackLabel/6etazsch/

Let me know if you have managed to implement it in your project,
Best regards!
Kamil Musiałowski
Highcharts Developer
jahnvi25
Posts: 284
Joined: Thu Oct 04, 2012 12:16 pm

Re: treemap --> datalabel alignment

Thanks for reply. but i would not know overlapping labels at creating time of chart.. we have variable height for parent div(where this chart would be laid out). so things might changed.. is there a way to find out overlapping labels in datalabels --> formatter function somehow.. then i can adjust the height i guess ?
kamil.m
Posts: 892
Joined: Thu May 19, 2022 1:33 pm

Re: treemap --> datalabel alignment

It is hard to create a solution that will fit all of the chart configurations, since it's not a standard Highcharts functionality. But I have created a simple responsive logic, which moves the second label down based on the title height and padding. Feel free to implement it in your code and adjust to your needs.

DEMO: https://jsfiddle.net/BlackLabel/s2Lwzm9q/

Best regards!
Kamil Musiałowski
Highcharts Developer

Return to “Highcharts Usage”