Ngx-charts: YAxis Labels hidden with longer text?

Created on 8 May 2017  Â·  7Comments  Â·  Source: swimlane/ngx-charts

YAxis Labels are not being fully show when labels are bigger then usual.
screenshot_20170508_111259

I made an extreme example to illustrate this issue, please open the link to see that in action https://plnkr.co/edit/sPJ47u?p=preview

As you can see I can differentiate one group from the other.
Is there any way to wrap the text, or break it in anyway?

New Feature In Discussion

Most helpful comment

We can't allow wrapping or breaking the text into multiple lines, but we will look into allowing overriding of the trimming threshold. There has been a discussion about this in the past. We need to figure out the best way to handle it.

All 7 comments

We can't allow wrapping or breaking the text into multiple lines, but we will look into allowing overriding of the trimming threshold. There has been a discussion about this in the past. We need to figure out the best way to handle it.

Hi, when are you going to address this issue?
It's a show stopper for me.

Is there a workaround you could suggest for the time being?
Thank you!

This is also a big problem for us. We cannot limit the label length as it pulls a descriptive name from another part of the app. This name cannot be reduced to fit character limits.

A workaround would be good.

This can be controlled by the following inputs:

  @Input() trimXAxisTicks: boolean = true;
  @Input() trimYAxisTicks: boolean = true;
  @Input() maxXAxisTickLength: number = 16;
  @Input() maxYAxisTickLength: number = 16;

image

Thanks for the response.

The issue is about wrapping the label and being able to see the whole label
text without affecting the aesthetic proportion of the chart. With this
option you still cannot see the full text and the chart proportions become
skewed.

The workaround I suppose is not in the parameters you have currently. I was
more hoping for a hack around this issue.

Regards,

Joy Mwihia
UX Designer
Humanitec
T: +49 (0)30 2577 9605 <+49(0)3025779605>
M: + <+34620546372>49 (0) 17 2665 0979
E: [email protected]
W: www.humanitec.com

*Follow us on twitter https://twitter.com/humanitec_com, facebook
http://www.facebook.com/humanitec & LinkedIn
https://www.linkedin.com/company/humanitec *
Humanitec AG, Wöhlertstraße 12
https://maps.google.com/?q=W%C3%B6hlertstra%C3%9Fe+12&entry=gmail&source=g/13,
10115 Berlin, Germany
Vorstandsmitglieder: Kaspar von Grünberg, Kathrin Wieland
Aufsichtsratsvorsitzender: Jochen Beutgen
Amtsgericht Berlin Charlottenburg HRB 185964 B

On Wed, 22 May 2019 at 15:15, Marjan Georgiev notifications@github.com
wrote:

Closed #376 https://github.com/swimlane/ngx-charts/issues/376.

—
You are receiving this because you commented.
Reply to this email directly, view it on GitHub
https://github.com/swimlane/ngx-charts/issues/376?email_source=notifications&email_token=AHA4KVDYZ4JA5OLCDM4ZJCTPWVBNXA5CNFSM4DKPEVS2YY3PNVWWK3TUL52HS4DFWZEXG43VMVCXMZLOORHG65DJMZUWGYLUNFXW5KTDN5WW2ZLOORPWSZGORSP2S7Q#event-2359273854,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AHA4KVFBTLLT4XHF2A3VC2TPWVBNXANCNFSM4DKPEVSQ
.

@marjan-georgiev, yes, it would be really helpful if I could wrap the labels. Displaying a long label on a single line messes up the whole look of the page.

Sweet. Would be great if this was included in the documentation.

Was this page helpful?
0 / 5 - 0 ratings