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

Rotated labels - bar chart #3140

Closed
sebastianbochan opened this issue Jun 9, 2014 · 8 comments
Closed

Rotated labels - bar chart #3140

sebastianbochan opened this issue Jun 9, 2014 · 8 comments

Comments

@sebastianbochan
Copy link
Contributor

It looks like a rotation is buggy in HC 4.0.x and 3.0.10

HC: 3.0.10 - http://jsfiddle.net/SKRBW/1/
HC: 4.0.1 - http://jsfiddle.net/SKRBW/

@TorsteinHonsi
Copy link
Collaborator

Looks like we don't correctly compensate for the bounding box when it is rotated.

A workaround is to set the chart.marginLeft option sufficiently high to display the labels: http://jsfiddle.net/highcharts/SKRBW/2/

@kzoon
Copy link

kzoon commented Jul 11, 2014

Alternative workaround:
If you don't need an axis title, you can use a transparent axis title to create space for the axis labels:
http://jsfiddle.net/kzoon/SKRBW/5/

@ghost
Copy link

ghost commented Jul 17, 2014

http://jsfiddle.net/stephanevanraes/69QyK/4/

If you display the axis line and compare 3.x with 4.x you will see that the axis is drawn on exactly the same location. However, in the latest version the translation in the x-direction on the labels after rotation is different.

A workaround is setting an x translation on the labels to bring it back to the position it used to have. (I think it's a translation with the fontHeight you would need).

@TorsteinHonsi
Copy link
Collaborator

The breaking change from v3 to v4 is that the default x setting on left axis changed from -8 to -15. To preserve the looks from v3, set it back to -8: http://jsfiddle.net/SKRBW/6/

@kzoon
Copy link

kzoon commented Oct 2, 2014

I think that this piece of code in getOffset is incomplete:

each(tickPositions, function (pos) {
   // left side must be align: right and right side must have align: left for labels
   if (side === 0 || side === 2 || { 1: 'left', 3: 'right'}[side] === axis.labelAlign) {

      // get the highest offset
      labelOffset = mathMax(
         ticks[pos].getLabelSize(),
         labelOffset
      );
   }
});

It doesn't take into account the label rotation: Rotated labels on the left axis that have align== right ARE rendered outside the plotArea

I ran into the same problem here: http://forum.highcharts.com/post109130.html#p109130

@pawelfus
Copy link
Contributor

Looks properly with 4.1.8: http://jsfiddle.net/SKRBW/7/

@KacperMadej
Copy link

Looks broken in 4.1.9: http://jsfiddle.net/SKRBW/9/

@KacperMadej KacperMadej reopened this Oct 9, 2015
@TorsteinHonsi
Copy link
Collaborator

Breaks since b2d4aed

TorsteinHonsi added a commit that referenced this issue Oct 13, 2015
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

5 participants