Design Studio - how to set up chart labels at correct position?

[Former Member]

I think there are only two options available for the position of labels within the chart - inside and outside. Is there a way to set the position to bottom? I have tried with css but no luck there. Has anyone tried doing that?

Also, I have three series of data displayed on my chart (one bar and two lines). I want to display labels for the bar (bottom) and one of the lines. The other line is just for comparison and doesn't need data labels - can I switch them off? Any ideas please?

Many thanks

Regards

Lukas

[TammyPowlas · Accepted solution]

Lukas:

I think Eschwar's answers on 1 and 3 may apply here

I don't see a way how to do the first item; the second one you might be able to overlay charts showing labels on one but not the other.

I think these are good enhancements to suggest in Idea Place - ideas.sap.com

[Former Member]

Please note using this technique, you can also move the position of the labels, up for instance when your values are low and too close to the X line (numbers are clipped at the bottom):

/* move graph labels up */
.v-datalabel {
    transform: translate(0px, -20px);
}

[Former Member]

Thank you Xavier & Franck for your valuable feedback,

I will show you guys about my background css. In this i have one Column-Combination-Dual Axis chart(One Column and One Line chart). And its background css is attached here, and please provide me valuable suggestions.

My requirement is,I have to hide the labels of column chart and I have tried different combinations like below,

case#1#

.Custom.g.v-datashapesgroup g.v-m-datalabel g.v-datalabel text {

visibility: hidden; 

}

Result#1# No change in Labels.

case#2# Inset one Comma(",") like below

.Custom.g.v-datashapesgroup,g.v-m-datalabel g.v-datalabel text {

visibility: hidden; 

}

Result#2# Now all labels hide-Both Column and Line

I have tried different combinations and failed. Please suggest a correct solution?

Rgds,

aby

[marco_jehle]

Hey Franck,

I'm using the Chart object and tried to move my Labels up with your code, but it doesn't work.

Do you have any idea why? All other changes to the Labels work fine.

Thanks in advance,

Marco

[Former Member]

hi Marco,

as i see you are trying to change position of "svg" and "g"

elements by using css-styling.

but it has some problem in ie.

it strongly works in IE if you use it directly in element.

something likes

<g trasfrom ... >

you may try to use css in other brosers (chrome).

i have spend lot of timem but there is no solution for ie for now.

Rgds,

Kirill

[Former Member]

Hi Lukas,

I am using a column - combination chart (2 Columns and one line). I managed to hide the data label for the line with the following css code.  The data labels for the columns are still there.

.mycss. g.v-markers.v-datashapesgroup g.v-m-datalabel g.v-datalabel text

{

visibility: hidden; 

}

Perhaps you could try with the nth-child css selector to hide just the data labels of one specific line.

Hope it helps / Best regards

Dominik

[Former Member]

Hi Dominik,

I am facing same challenge here.

And i tried different combinations.

Can you please tel me what you mean by ".mycss" in your above comment?is this your custom main CSS class name,which is in your application?

Below is your comment to above post

.mycss. g.v-markers.v-datashapesgroup g.v-m-datalabel g.v-datalabel text

{

visibility: hidden; 

}

And my second question is, what CSS class name should be assign to the chart? is this full name of class like below or some part of it?

.mycss. g.v-markers.v-datashapesgroup g.v-m-datalabel g.v-datalabel text

any suggestions?

rgds,

aby

[xjhacking]

mycss is the name of the class you define in the custom CSS and assign to the component.