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);
  }

Schipperke

use transform-origin perhaps – Isoclinal

The transform attribute on the SVG element itself appears to override any CSS you assign to it. Unfortunately, I don't see any way to rotate the text using c3.js. Assigning horizontal text to a vertical line is ambiguous anyway, and I wouldn't recommend it. – Geometer

you may need to reset display so it takes transform, but weird behavior in FF jsfiddle.net/yrzxj3x2/19 – Bruns

@GCyrillus You're just used to the weird (and incorrect per spec) behaviour of Chrome ;-) – Isoclinal

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

Sava

but then when I add more lines to the chart there text does not show as well... jsfiddle.net/yrzxj3x2/26 – Schipperke

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.

Edina

This is one of those annoying cases where you need 4 similar, but browser specific lines in your css, details here css-tricks.com/examples/ShapesOfCSS the basic form is svg{transform: rotate(45deg); } – Lowtension

If you're talking about browser prefixes, you can use auto-prefixer sublime plugin to add those lines for you and im sure a lot of other tools that autocomplete that for you as well. – Edina