0

I am having an issue with my dojo chart whereas I cannot get the chart label to be truncated when there is overflow and the chart title is too long. I just want to be able to truncate the title with an ellipsis if it is going to overflow outside the chart boundaries.

I have tried the basics like trying to add a class to it that includes:

.title {
    text-overflow: ellipsis;
    white-space: no-wrap;
    overflow: hidden;
}

But it only results in the whole title being hidden. If I remove the overflow: hidden part, then the title shows, but it still overflows outside the chart area.

I've got a sample on JSFiddle that shows the problem.

Any ideas on how to accomplish this? Any help is greatly appreciated!

user123456789
  • 37
  • 5

1 Answers1

0

I believe Dojo Charts has issues rendering the title correctly when it can't fit it properly. One of the things that Dojo charts currently does is that it actually never computes an actual width so the width is usually 0px and it centers the title by calculating an appropriate "left" style. This is why overflow-hidden just ends up hiding the entire title.

An easy alternative solution would be to just check the character length of your title before setting it an doing alterations by yourself.

Richard
  • 1,138
  • 1
  • 6
  • 11
  • I dont think I can just check the character length like that as I have to take into consideration the actual size of the string due to the support of different widths for different languages. – user123456789 May 20 '14 at 21:03
  • I believe you can still get the width using a method describe here: http://stackoverflow.com/questions/16478836/measuring-length-of-string-in-pixel-in-javascript – Richard May 20 '14 at 21:16