YAxis Labels hidden with longer text?

[thormentor]

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

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?

[marjan-georgiev]

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.

[Kri-Sha]

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!

[ghost]

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.

[marjan-georgiev]

This can be controlled by the following inputs:

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

[ghost]

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: joy@humanitec.com 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 .

[lekha-badarinath]

@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.

[perrosen]

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

[charlieamer]

I made a dirty hack for myself that allows splitting labels into 2 lines. I didn't need more than 2 lines and hence that's all I did. It automatically detects if line had '...' in them. This is not the best approach but it does the job okay. If your text is longer then 2 lines, it won't work nicely though.

function breakSvgTextIfNecessary(gElement: SVGGElement) {
  const fullText = (gElement.getElementsByTagName("title") as unknown as HTMLCollectionOf<SVGTitleElement>).item(0)?.textContent.trim()
  const actualTextElement = gElement.getElementsByTagName("text").item(0)
  const actualText = actualTextElement.textContent.trim()
  // if the text was cut (that happens when we find ... at end of string)
  if (!!fullText && !!actualText && actualText.endsWith('...')) {
    // all words except last one (because it could be broken with ...)
    const untilLastWord = actualText.split(' ').slice(0, -1).join(' ')
    actualTextElement.textContent = untilLastWord
    // rest of the original text
    const fromLastWord = fullText.slice(untilLastWord.length)
    // set this text to be above center
    actualTextElement.setAttribute("dy", "-0.4em")
    // make new text element
    const newTextElement = document.createElementNS('http://www.w3.org/2000/svg', 'text');
    // copy all properties from original text
    for (const attr of Array.from(actualTextElement.attributes)) {
      newTextElement.setAttribute(attr.name, attr.value)
    }
    // set it to be below center
    newTextElement.setAttribute("dy", "0.7em")
    // set content of text element
    newTextElement.textContent = fromLastWord
    gElement.appendChild(newTextElement)
  }
}

class ParentComponentOfHorizontalWidget {
  // ...
  @ViewChild("widget")
  private widgetElement: ElementRef<HTMLDivElement>

  private fixAllMultilineRows() {
    if (this.chartDirection === 'horizontal') {
      const allGElements = this.widgetElement.nativeElement.querySelectorAll('g.tick')
      allGElements.forEach(breakSvgTextIfNecessary)
    }
  }
  //...
}