Chartist-js: X-Axis labels rotated 90 degrees

[adrianparr]

Is it possible to display the labels on the X-axis at 90 degrees?

For example ...
https://www.dropbox.com/s/89bc0zojtd20vvh/Screenshot%202016-06-08%2017.26.37.png?dl=0

[cheese83]

It's possible to do that using CSS. For example, this is what I did to get labels at 45°
.ct-label.ct-horizontal { position: relative; transform: rotate(45deg); transform-origin: left top; }

[madvik]

I search for having -45° and right-top, but impossible to align text next the axis...
If anybody have a solution, thanks

[gionkunz]

Hey there, you'll need to do some CSS magic to do this properly. There seems to be a webkit bug which causes re-scaling or other issues in the coordinate system of foreign objects in SVG when using transformations. When using poisiton: fixed it seems to resolve the issues:

https://jsbin.com/kezivew/edit?html,css,js,output

[madvik]

Thanks, but I search to display in -45° (minus)
rotate(-45deg);

[gionkunz]

Then you can use some different styling by right aligning the text and translate -100% on the x coordinate.

https://jsbin.com/kezivew/edit?html,css,js,output

[madvik]

Oh great ! Thank you very much. Flexbox is so good !

[malthe]

@gionkunz position: fixed (which you mention in a comment here) does not work once the page starts scrolling – but at least in my experience position: relative works just as well for this problem.

[haeminn]

I ran into the issue of last x-axis label not positioning right when rotated 90deg, and am rendering my charts in PDF using phantomjs 2.1.
Phantom 2.1 does not support flexbox and I found display: table-row; working for me.

[jgauffin]

The problem with a CSS transformation is that the box sizes are incorrect which means that the labels are cropped (height is specified in the label span and the containing foreignObject).

I had to do the following to get all labels visible:

svg.ct-chart-line, svg.ct-chart-line g.ct-labels, svg.ct-chart-line g.ct-labels span.ct-label {
    overflow: visible;
}