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: /

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

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

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/yrzxj3x2/7/

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

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

• javascript
• css
• svg
• c3.js

• 2 use transform-origin perhaps – Robert Longson Commented Feb 19, 2016 at 15:22
• 1 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 remend it. – Blazemonger Commented Feb 19, 2016 at 15:35
• 1 you may need to reset display so it takes transform, but weird behavior in FF jsfiddle/yrzxj3x2/19 – G-Cyrillus Commented Feb 19, 2016 at 15:36
• 1 @GCyrillus You're just used to the weird (and incorrect per spec) behaviour of Chrome ;-) – Robert Longson Commented Feb 19, 2016 at 16:41

2 Answers 2

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

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.