0
184
Viewsx-axis label overwritten in svg graph
I am working on a stacked barchart. Here is the codepen https://codepen.io/a166617/pen/NWvZGLd
As you can see in codepen, the x-axis label is overlapping each other and i am trying to make it at an angle so that they wont overlap each other. For e.g. this screenshot below
I tried to add transform: rotateX(90deg) as a style but it does not show properly. Here is the line of code where i added the above css
<text
x={125 + rowIndex * 60}
y={520}
textAnchor="middle"
style={{ fill: 'red',
fontSize: '13px',
transform: `rotateX(90deg)`
}}
>{entry.name}</text>
Can someone please let me know how to achieve this so that the x-axis label is clearly viewed.
1 answers
Answer question0
Rotate transforms will rotate around the current origin. Which for SVGs defaults to the origin of the SVG. That is 0,0. Because your text is nowhere near (0, 0), your transform will rotate the text away from where you want it.
To avoid that you'll need to change the transform-origin before you rotate. Something like this:
<text
x={125 + rowIndex * 60}
y={520}
textAnchor="end"
style={{ fill: 'red',
fontSize: '13px',
transformOrigin: (125 + rowIndex * 60)+'px 520px',
transform: 'rotateZ(-45deg)'
}}
>{entry.name}</text>
I did it a slighlty different way in my updated answer to your previous question. I used the special version of rotate (rotate(angle,cx,cy)) that only the SVG transform attribute accepts. It includes an X,Y centre of rotation. For CSS, you have to use transform-origin.