Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Axis labels - option to turn off ellipsis #3941

Closed
maheshjag opened this issue Mar 5, 2015 · 15 comments

Comments

@maheshjag
Copy link

commented Mar 5, 2015

The recent change to introduce ellipsis in place of the 'overflow' option has resulted in decreased usability in at least some cases. See http://jsfiddle.net/maheshjagadeesan/so9wz1x6/ for example.

When you increase the width of #container to a slightly higher number (580px on my Retina MBP), the category labels wrap nicely to many lines. However, at 570px, the ellipsis appears. I'd recommend an option to at least turn it off.

@TorsteinHonsi

This comment has been minimized.

Copy link
Collaborator

commented Mar 5, 2015

At https://github.com/highslide-software/highcharts.com/blob/v4.1.3/js/parts/Axis.js#L1488 you'll see what happens. If the slot size is less than 80, we apply the ellipsis logic on the assumption that we risk clipping words if we apply word-wrap. If the size is greater than 80 pixels, there is less chance that we clip words, so we apply word-wrap.

Not the ideal solution, at least this border value could be an option. The ideal logic would be to inspect the string for long words, but that would be heavy on the performance.

@maheshjag

This comment has been minimized.

Copy link
Author

commented Mar 5, 2015

Thanks for your response. It looks like the case where autoRotation is turned off (set to [0] as suggested in the API) isn't being considered while 'unsquishing'. Agree that there would be performance considerations / issues here, but it'd be nice to at least leave it to the user to make that decision instead of eliminating that possibility altogether.

@TorsteinHonsi

This comment has been minimized.

Copy link
Collaborator

commented Mar 17, 2015

In your case, auto rotation is turned off by setting it to false: http://jsfiddle.net/so9wz1x6/2/

@TorsteinHonsi

This comment has been minimized.

Copy link
Collaborator

commented Mar 17, 2015

@maheshjag Your demo with the new option applied: http://jsfiddle.net/so9wz1x6/3/

PS: You should use autoRotation: false to turn off auto rotation. I have added this recommendation to the API.

@maheshjag

This comment has been minimized.

Copy link
Author

commented Mar 29, 2015

Thanks a bunch for this fix, I've now pulled it in to our codebase.
On 17 Mar 2015 8:50 am, "Torstein Hønsi" notifications@github.com wrote:

@maheshjag https://github.com/maheshjag Your demo with the new option
applied: http://jsfiddle.net/so9wz1x6/3/

PS: You should use autoRotation: false to turn off auto rotation. I have
added this recommendation to the API.


Reply to this email directly or view it on GitHub
#3941 (comment)
.

@ngriesser

This comment has been minimized.

Copy link

commented May 22, 2015

Hi,
I am trying to get rid of the ellipsis here:
http://jsfiddle.net/ucw646jp/2/
autoRotation and autoRotationLimit does not seem to help.
Any advice?

@TorsteinHonsi

This comment has been minimized.

Copy link
Collaborator

commented May 22, 2015

In the latest dev code it is better, but now it overlaps, and doesn't extend to the full width of the chart: http://jsfiddle.net/highcharts/ucw646jp/3/

@ngriesser

This comment has been minimized.

Copy link

commented May 22, 2015

We cannot go on dev code, as we have a commercial software.

@TorsteinHonsi

This comment has been minimized.

Copy link
Collaborator

commented May 22, 2015

Of course, but this means the bug will be fixed in the next maintenance release.

@ngriesser

This comment has been minimized.

Copy link

commented May 22, 2015

Thank you.
Is there already a deadline for the next maintenance release?

@dub4u

This comment has been minimized.

Copy link

commented Jun 17, 2015

I still have an issue with this that I can not resolve. I too would prefer if there was an option to disable automatic ellipsis generation: Take this example which works fine on 4.0 but totally breaks on 4.1 where 'Today' gets truncated

http://jsfiddle.net/16cs1s0w/4/ vs http://jsfiddle.net/16cs1s0w/5/

@TorsteinHonsi

This comment has been minimized.

Copy link
Collaborator

commented Jun 17, 2015

@dub4u, two things went wrong in Highcharts here.

First, the right label is supposed to be aligned/overflowed against the right side of the chart, as determined by the chart.spacing option. But in your case, the margin is 0, which overrides the spacing. Consequently, the label was shortened when it didn't have to. Fixing this issue alone, makes your chart behave like it used to: http://jsfiddle.net/highcharts/16cs1s0w/6/

Secondly, we would expect that we could set style.textOverflow = 'none' to disable ellipsis, but we couldn't. If we make your last category longer, we can see the new default with the margin fixed: http://jsfiddle.net/highcharts/16cs1s0w/7/. Now if we disable the textOverflow, this is the result: http://jsfiddle.net/highcharts/16cs1s0w/8/.

@dub4u

This comment has been minimized.

Copy link

commented Jun 18, 2015

Awesome support Torstein, thank you!! I was scratching my head as to why style.textOverflow was overridden before.

@TorsteinHonsi

This comment has been minimized.

Copy link
Collaborator

commented Jun 18, 2015

You're welcome!

I was scratching my head as to why style.textOverflow was overridden before.

So that confirms that the new implementation makes sense.

@ldong

This comment has been minimized.

Copy link

commented Jan 18, 2018

Besides:

     xAxis: {
        labels: {
          autoRotation: false
       }
    }

You could also do it yourself by using

      xAxis: {
        labels: {
          useHTML: true,
          formatter() {
            let label = this.value;
            let style = `text-overflow: ellipsis; overflow: hidden;`; // YOUR OWN STYLE
            return `<div style="${style}" title="${label}">${label}</div>`;
          }
        },
      },
GoodDD added a commit that referenced this issue Jul 5, 2019
TorsteinHonsi added a commit that referenced this issue Aug 14, 2019
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
5 participants
You can’t perform that action at this time.