Design Studio 1.5 – Combination chart - data label text re-position

[Former Member]

Hi all

I need to change the x position of a data label used in a BAR-Combination chart.

As you can see below, I need to re-position the data label of the circle value (85.00) and if I use F12 and I MANUALLY change the X value from -15.0195 into 10 the position of the label is afterwards correct. 

	F12
	F12

To achieve this goal I’m using the bellow CSS:

.DATA_LABEL_POSITION g.v-modules g.v-module g.v-markers.v-datashapesgroup g.v-m-datalabel g.v-datalabel text{

font-size:22px;

fill: #dc143c;

X:10;

}

As you can see if I add “font-size:22px;”  + “fill: #dc143c; ” in the CSS the effect is:

Meaning that these 2xstatments are done correctly. However, in the chart the X value (“X:10;”) is NOT working – strangely.

How  can I make the X position to change in CSS file?

I’ve also looked in scn In the below related posts:

http://scn.sap.com/thread/3504242

and

https://scn.sap.com/thread/3721342

http://scn.sap.com/thread/3506050

http://scn.sap.com/thread/3435935

https://scn.sap.com/thread/3771866

But without any success.

Can you please help me on some suggestions or ideas?

Best regards

Armando Santos

[former_member194504 · Accepted solution]

Hi Armando,

You can try with translate/transform property in CSS, Since X,Y positioning not possible in CSS.

Please check this out for some ideas

http://stackoverflow.com/questions/2193916/positioning-svg-elements-using-css

Thanks,

Nithyanandam

[Former Member · Accepted solution]

Thank you Venu.

Always providing useful tips & suggestions! Thanks a million.

However, I've followed some of the suggestions within the link provided and unfortunately they don't seem to work.

IE11 - F12:

As you can see nothing seems to work and make the 80.00 value shift 15px to the right.

If on the above code I change manually the X value from -15.005 into 15 afterwards the result is correct.

What I am missing here?

Any other suggestion?

Kind Regards

Armando Santos

[Former Member · Accepted solution]

I've just noticed one important thing, the CSS code with the transform: translateX(15px); doesn't seem to work but if I add this command - in F12 - on the "Inherited from svg" style or section I can see that the ALL bar chart shift 15px to the right.

So, the CSS code is NOT working but the same code in the SVG style/section seems to have some effect on the bar chart.

How can I make the same effect (shift 15px to the right) ONLY on the label of the target value (circle with 85.00)?

Regards

Armando Santos

[former_member194504 · Accepted solution]

Hi Armando,

I am not able to get you properly, However did you tried with !important at the end of your CSS code.

Because, if the style changes in browser console, it will definitely will work in CSS code too.

Thanks,

Nithyanandam

[Former Member · Accepted solution]

Thanks Venu by your answer.

Yes, I've used the !important at the end of the CSS code, and still DOESN'T work - and it should work in my opinion.

IE11 - F12

The 85.00 doesn't shifts into the right 15px - as I've add it inti the CSS code.

.DATA_LABEL_POSITION g.v-modules g.v-module g.v-markers.v-datashapesgroup g.v-m-datalabel g.v-datalabel text{

transform: translateX(15px) !important;

}

What I was able to see yesterday is, if in F12 (browser console) I manually add the

transform: translateX(15px) !important

into the "Inherited from SVG" section , then the all bar chart shifts 15px into the right INSTEAD of the label (85.00)

So the question is:

    How can I achieve this same effect with CSS code (ONLY for the label value)?

     Is it clear for you?

     Do you need some extra info?

Regards

Armando Santos

[former_member194504 · Accepted solution]

HI Armando,

Thanks for the brief explanation. Will try it by my self and let you know the results if its work.

Thanks,

Nithyanandam

[Former Member · Accepted solution]

Thanks Nithyanandam.

Please provide feedback if you reach any conclusion.

Kind regards

Armando Santos

[Former Member · Accepted solution]

This message was moderated.

[former_member194504 · Accepted solution]

Hi Armando,

I tried to change column chart axis label with the follow CSS:

g.viz-axis-label text{
transform: translate(150px,0px) !important;
-ms-transform: translate(74px,0px) !important; /* IE 9 */
-webkit-transform: translate(74px,0px) !important; /* Safari and Chrome */
-o-transform: translate(74px,0px) !important; /* Opera */
-moz-transform: translate(74px,0px) !important; /* Firefox */ 
}

It seems working, however it replaces the xaxis lable also. Maybe this can give you little help.

Thanks,

Nithyanandam

[Former Member · Accepted solution]

Thanks Nithyanandam.

I've used the "-ms-transform: translate(74px,0px) !important; /* IE 9 */  " without sucess.

The label DOESN'T shifts into the right (as expected).

a)

b)

Any other idea or suggestion is welcome?

Kind regards

Armando Santos

[former_member194504 · Accepted solution]

Hi Armando,

Which browser and version are you using. I have done that on chrome.

Thanks,

Nithyanandam.

[Former Member · Accepted solution]

IE11.

[former_member194504]

Hi Armando,

IE does not seems to be supporting the feature of SVG css properly. I am facing the same result.

css3 - CSS transform on SVG Elements IE9+ - Stack Overflow

Thanks,

Nithyanandam

[former_member194504]

Ok Armando will try in IE and let you know.

Thanks,

Nithyanandam

[Former Member]

Thanks Nithyanandam.

[Former Member]

I'm still insisting but without success - with IE11.

Any progress or suggestion?

Regards

Armando Santos