10

I have set up a js fiddle which demonstrates how axis labels can be rotated, based on an issue raised on github. It works fine in the js fiddle example below, but when I try this on my site the labels are not visible.

http://jsfiddle.net/Lnhpwn8x/22/

html {
  box-sizing: border-box;
  font-family: Roboto, sans-serif;
}

*, *:before, *:after {
  box-sizing: inherit;
}

.ct-label.ct-label.ct-horizontal {
  position: fixed;
  justify-content: flex-end;
  text-align: right;
  transform-origin: 100% 0;
  transform: translate(-100%) rotate(-45deg);
}

If I resize the screen to make it smaller the labels appear, so I think the issue is to do with the size of chart and that it is taking up 100% of the width

DavidB
  • 2,566
  • 3
  • 33
  • 63

2 Answers2

24

Here an exemple :

svg.ct-chart-bar, svg.ct-chart-line{
    overflow: visible;
}
.ct-label.ct-label.ct-horizontal.ct-end {
  position: relative;
  justify-content: flex-end;
  text-align: right;
  transform-origin: 100% 0;
  transform: translate(-100%) rotate(-45deg);
  white-space:nowrap;
}

http://jsfiddle.net/madvic/qek2sjs0/4/

And now work with long text...

madvic
  • 364
  • 4
  • 8
3

madvic's answer didn't work for me. All the axisx text all runs in one line vertically. However this worked:

.ct-label.ct-horizontal.ct-end {
   font-size: 10px !important;
   white-space:nowrap;
   writing-mode:vertical-rl; 
   transform:  translateY(-10%);
 }