How to rotate SVG text with css

Question

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

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

here is the css that I have tried for complete code see js fiddle

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

Answer 1

You can rotate text in horizontal by add following css.

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

If you want to add more lines then you should increase value manually.

You can also give position like:

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


    ]

Working Fiddle

Edit:

If you want horizontal line then why you don't 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 fiddle says to rotate it 180 degrees...

I did that here:

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

I also made it horizontal like you wanted and moved it down to a readable place:

 transform: translate(295px, 115px);

You can move the x and y coordinates to put it back up higher if you want. It looks like the grid elements using positions. Not sure what that code looks like.