Skip to Content
0

padding to SVG text data display value in sstacked bar chart

Oct 24, 2016 at 01:25 AM

126

avatar image

SAP BusinessObjects Design Studio

Release 1.6 SP1 Patch 2 (Version: 16.1.2)

Source: Relational database, thru UNX

Requirement: I have to display a bar chart and also display the measure value of each bar. However this measure is different one from the measure I'm using to plot. To achieve this, I have used a stacked bar chart (with 2 measures) and made the bar-color of the 2nd measure as white (chart-background is also white). Now I have checked "show data labels" in the additional properties -> "Plot area" section. Now since both measure data values are shown, I have made the color of the first measure data display value as transparent. Thus i end up seeing bar for 1st measure and data display label for 2nd measure as per my requirement but I face one last issue. The label of the 2nd measure starts on the bar itself (the first digit of the display measure label overlaps with the graph). Can some one help me in moving the 2nd measure display value to the right (say padding-left: 10px ??). however padding-left doesn;t work on svg-text component and i'm struck there.

Please find the screenshot attached.

I have check SCN before posting this and found lot of helpful posts that helped me solve most of my problems. However there is no post that talks about svg text padding options.

references used before:

https://archive.sap.com/discussions/thread/3965481

https://archive.sap.com/discussions/space/businessobjects-design-studio?page=2

Thanks,

Srikanth

10 |10000 characters needed characters left characters exceeded
* Please Login or Register to Answer, Follow or Comment.

3 Answers

Best Answer
Poovarasan Boopalan Oct 25, 2016 at 07:52 AM
0

Hi Srikanth,

You are using stacked bar chart in which you will not have the option to position the data labels as the data labels will be availabe for each data point of stack. You are showing only final value in the data labels, So you can uncheck the "Show data labels" option and instead of that select "Show totals" option which will show the total value outside the bar.

If you are going to show only one dimension in the chart, you can use the simple bar chart instead of stacked bar chart and change the position of the data label inside or outside the bar.

Thanks,

Poovarasan

Share
10 |10000 characters needed characters left characters exceeded
Tammy Powlas
Oct 24, 2016 at 09:05 AM
0

Can we assume you have adjusted the position of the properties as shown:


sr.jpg (18.0 kB)
Show 1 Share
10 |10000 characters needed characters left characters exceeded

Hi Tammy,

Please find the screenshot of the options i see for the barchart infocart, it looks different from the one you shared. Am I missing something?

Thanks,

Srikanth

addl-properties.png

0
Srikanth Boddupalli Oct 25, 2016 at 01:27 PM
0

Thanks Poovarasan for your response.

You are right, I'm using a stacked bar chart as there are 2 measures (say "$ sales" and "# Customers") involved in plotting the graph. The visible bar should be based on "$ Sales" and "# Customers"should be used to display the value. Due to that I cannot use total as that would be wrong.

I have made the color of the "#customers" stacked bar as the same color as the background to hide it and similarly the displayed value of"$ Sales" is made invisible so that only "# customers" value is shown. I'm struggling through CSS to move the number (# Customers displayed on graph screenshot) a bit to the right but with no success. Any suggestions ?

Thanks,

Srikanth

Show 7 Share
10 |10000 characters needed characters left characters exceeded

Hi Srikanth,

Can you try the below css. It works for me to move the data labels.

.chart g.v-datalabel-group

{

-ms-transform: translateX(50px);

-webkit-transform: translateX(50px);

transform: translateX(50px);

}

Thanks,

Poovarasan

1

Thanks a lot Poovarasan, that worked. Appreciate your help.

1

Poovarasan, have you tried this in IE, it works for me only in Chrome. I'm trying to modify it to work but if you are able to make it work please let me know.

Thanks,

Srikanth

0
0

HI Srikanth,

It will not work in IE. capture the Browser agent and apply CSS accordingly. hopr it helps you

Thanks,

Varun

0

Hi Srikath,

Sorry for the delayed response, i have gone through why it is not applied in IE.

Actually it will get applied but it will not affect rendering of component in IE.

I will let you know if i find anything in it.

Just a thought, you can use bar chart to sales and use the text boxes to show customer count data as i tried below. It is possible to implement if you have a constant number of members in y axis(like always 10 members in y axis).

Thanks,

Poovarasn

1

Thanks Poovarasn, appreciate your help.

0