ctaneja
Posts: 22
Joined: Wed Aug 31, 2022 5:07 am

Angular: treemap wrap text if space available otherwise ellipsis

Hi,
I have some requirement here. I am creating a Treemap. Some boxes of the treemap are too small for the label to fit in because of the inconsistency of data.
1. If the box is large enough to fit in the whole text, I want to fit in the complete text even if it requires words wrapping. If it is not big enough but can accumulate some characters I want to display some characters and rest ellipsis (...). Otherwise for very small boxes I am ok with them to be empty without any label.
2. The labels in this stackblitz are overlapping with the borders of each box. Is there any way to provide some padding or align them in the center?

Stackblitz: https://stackblitz.com/edit/highcharts- ... mponent.ts
kamil.m
Posts: 892
Joined: Thu May 19, 2022 1:33 pm

Re: Angular: treemap wrap text if space available otherwise ellipsis

Hi there,

Thank you for contacting us!

In general, text-overflow: ellipsis is a bit tricky in Highcharts. Once you do some research on this topic, you will find out that more often than not, we suggest our users create a custom formatting with dataLabels.formatter and some simple JS functions.

But, I think that the example I have prepared for you might be closer to what you are looking for, take a look at it here:
https://stackblitz.com/edit/highcharts- ... mponent.ts
I have removed the style.textOverflow property, and applied a dataLabels.overflow Highcharts one. Should be better now.

When it comes to overlapping the borders, we don't have a property for that yet, but there is an open GitHub ticket (with some workarounds) for a feature like that. Feel free to add a comment there with your thoughts and suggestions!
https://github.com/highcharts/highcharts/issues/7891

If those workarounds won't satisfy you, maybe some CSS translation will help?

In case of any other questions, feel free to contact us anytime,
Best regards!
Kamil Musiałowski
Highcharts Developer
ctaneja
Posts: 22
Joined: Wed Aug 31, 2022 5:07 am

Re: Angular: treemap wrap text if space available otherwise ellipsis

Hi kamil,
It would be so nice of you if you could suggest me a workaround using CSS to avoid the labels overlapping and getting over the box edge of a treemap. Here is a stackblitz: https://stackblitz.com/edit/highcharts- ... mponent.ts
kamil.m
Posts: 892
Joined: Thu May 19, 2022 1:33 pm

Re: Angular: treemap wrap text if space available otherwise ellipsis

Hi there,

Sure thing - we can figure something out in the CSS. Could you point me to the exact labels that should be corrected? Do you mean the "Simulation running for too long" and "Storage running low", or the bottom right corner "A..., Ca..." etc?

Thank you in advance
Kamil Musiałowski
Highcharts Developer
ctaneja
Posts: 22
Joined: Wed Aug 31, 2022 5:07 am

Re: Angular: treemap wrap text if space available otherwise ellipsis

Hello,
I am primarily talking about the "Petrei sign-in problems chandan taneja" label. Here the P is overlapping and getting over the box edge. Similarly, A in "Au...", C in "Ca...", R in "Re..." and U in "Un...".
kamil.m
Posts: 892
Joined: Thu May 19, 2022 1:33 pm

Re: Angular: treemap wrap text if space available otherwise ellipsis

Hi there.

In my browser there is no overlap on the "Petrei sign-in...", but there is one on the "A..., Ca..." indeed. Since the overlap is not consistent (on some of them, the overlap is on the left, some of them overlap with the border on their bottom etc.), it would be hard to create a CSS solution that will be a good fit for all of them. The CSS translation would work, but only if you would need to shift all of the labels to the left/right or up/down.

In that case, I would strongly suggest using the previously mentioned workaround from the GitHub topic.

Best regards!
Kamil Musiałowski
Highcharts Developer
ctaneja
Posts: 22
Joined: Wed Aug 31, 2022 5:07 am

Re: Angular: treemap wrap text if space available otherwise ellipsis

I have gone through the github issue. Is there are a similar workaround in Typescript also?
kamil.m
Posts: 892
Joined: Thu May 19, 2022 1:33 pm

Re: Angular: treemap wrap text if space available otherwise ellipsis

All of the workaround provided on GitHub are always in plain JS to make it accessible for all users, so you would have to rewrite it to TS by yourself if needed.

Take a look at the custom wrap implementation in Angular: https://stackblitz.com/edit/highcharts- ... mPlugin.ts
Kamil Musiałowski
Highcharts Developer

Return to “Highcharts Usage”