How to rotate svg text using css

Question

I am using c3.js to create a chart. The problem is that I cannot change the position of text elements on xgrid. I would like them to be horizontal. But when I try to use rotate, the elements go beyond svg. How can I place where they are, but make them horizontal.

js fiddle: http://jsfiddle.net/yrzxj3x2/7/

here is the css i tried for the full code see js fiddle

.xLineLable text{ font-size: 12px; } .c3-grid text { fill: #000; transform: rotate(0); } 

Answer 1

You can rotate the text horizontally by adding the following css.

 .c3-grid text { fill: #000; transform:rotate(0deg) translate(266px, 0px); } 

If you want to add more rows, you must increase the value manually.

You can also specify a position as:

  x: { lines: [ {value: "2016-01-08", text: "Want to rorate this text in 180 degrees", class: "xLineLable", position: "outer-middle"} ] 

Working script

Edit:

If you want a horizontal line, then why don't you add to ygrid.

  grid: { y: { lines: [ {value: 50,text: "Want to rorate this text in 180 degrees", class: "xLineLable", position: "middle"}, ] }, 

Fiddle

Answer 2

So, the text in your violin suggests turning it 180 degrees ...

I did it here:

 transform: translate(90px, 230px) rotate(90deg) !important; 

I also made it horizontal as you wanted, and moved it to a readable location:

  transform: translate(295px, 115px); 

You can move the x and y coordinates to bring them back up if you want. It looks like the grid elements are using positions. Not sure what this code looks like.