Skip to Content
0
Feb 12, 2018 at 03:30 PM

Design Studio: Text-orientation at info chart?

227 Views

Hello Experts,

We have unique requirement to display infochart data labels in vertically (-90 degree). We achieved this requirement on Chrome browser through CSS classes mentioned below.

.CHART_DATALABEL_90DEG g.v-m-main g.v-m-plot g.v-plot-main g.v-datalabel-group g.v-datalabel:nth-child(1) text
{ 
-ms-transform: rotate(7deg) !important; -ms-transform-origin: rotate(7deg) !important; 
-webkit-transform: rotate(-90deg) !important; -webkit-transform-origin: center !important; 
transform: rotateZ(-90deg) !important; transform-origin: center !important; }

However, our solution is incomplete as the changes are not getting reflected on IE browser. IE is not supporting "Transform" CSS statement for the texts at the SVG.

We tried to solve this on IE by using the CSS statement "writing-mode: tb" in the above class itself. Again, we were able to rotate "Top to Bottom". Other than "tb" no other classes (bt-rl, bt-lr and etc.,) are getting supported here. Can some one please help us further.

Attachments