Formatting a tooltip value of a column chart in DS 1.4

[Former Member]

Hi,

We have a requirement to change font size of a tool tip value. could you please help me, how to achieve it in design studio.

As shown in below screen shot, are there any css classes so that we can customize upon.

Thanks in advance.

Vishal Jain

[Former Member]

Hi Vishal,

The following example might help you. I tested/created it for:

Application Theme: Platinum

Chart Type: Column

but it might/should work for other themes and charts too.

Tooltip before:

Tooltip after:

The generated html source code of the tooltip by sap design studio looks like this:

I used the following css in my custom css file:

.myChart1 .v-m-tooltip .v-background {background: black !important;}
.myChart1 .v-m-tooltip table.v-tooltip-dimension-measure tr td:nth-child(1) {color: red !important;}
.myChart1 .v-m-tooltip table.v-tooltip-dimension-measure tr td:nth-child(2) {color: green !important;}
.myChart1 .v-m-tooltip table.v-tooltip-dimension-measure:before {content: "Current data is:"; color: orange;}

As you can see I created a custom css class "myChart1" and then applied it to my chart under "Display > CSS Class".

Regards

David

[Former Member]

hi Vishal,

I am using design studio 1.5 version.I used the same code that you have written with some minor changes as per my requirement.

Application Theme: Platinum

Chart Type: Column

But it did not work for me.:(

Thanks,

Deepa

[Former Member]

Hi,

I have tested it in:

SAP BusinessObjects Design Studio Release 1.5 (Version: 15.0.6)

and it works.

Can you post your css code with your minor changes? I can try it whether it works or not.

Have you changed some of the Chart properties? If yes please write which properties.

Please test the css code on a Chart with all properties Default: drag & drop new Chart into your canvas, assign datasource and custom css class and run DS App in your Browser.

What Browser are you using?

Regards,

David

[Former Member]

hi,

css that i have used :

.one .v-m-tooltip .v-background {background-color: black !important;}

.one .v-m-tooltip table.v-tooltip-dimension-measure tr td:nth-child(1) {color: red !important;}

.one .v-m-tooltip table.v-tooltip-dimension-measure tr td:nth-child(2) {color: green !important;}

.one .v-m-tooltip table.v-tooltip-dimension-measure:before {content: "Click on the process "; color: orange;}

I have changed "hide when overlap property".

I tried in both google chrome and IE 1.9.

I created a new application (without changing any of the chart properties).It's not working for me.

[Former Member]

It seems that you have only changed the name of the custom css class from "myChart1" into "one".

I have copied the code from your post, added the css class "one" to my second chart, but it still works fine.

Can you post a screenshot of your chart configuration where this change "hide when overlap property" is visible (or is it the one in my second screenshot)?

Mine looks like this:

Whether "Hide When Overlap" is checked or not, the css for the tooltip still works - tested in IE9 & IE10.

Regards

David

[Former Member]

I have attached both snap shots.I tried in IE 9.Design studio version is 15.0.2

[Former Member]

Sorry, I am not able to reproduce your problem.

Do you have other css in your custom css file? Does the other css work?

For example if you add a text component to your DS App, and the following CSS into your custom css file: .sapUiTv {color: red;}

do you see the text with red color?

Do you run your app locally? If yes, is your custom css file in your repository folder of type: "Cascading Style Sheet Document (.css)"?

Did you attach/link your file to your DS app as: name_customcss.css - with dot css at the end?

This is no longer necesssary, at least not in DS v15.0.6, but you can clear browser cache and reload page again to force the browser to load the latest version of the custom css file.

Regards,

David

[Former Member]

ya,I have other css in my custom file.For all other components custom css is working as expected(except for the chart component).

For charts none of the css styling is working.:(

I am running the app locally and css file is in the same repository folder.

Anyway, thanks for your support.

[TammyPowlas]

Hi Vishal - if you are using Chrome, you can go to F12 and check the CSS being used

See as an example

[Former Member]

Thanks Tammy,

I tried with F12 but was not able to find any classes which can customize the tool tip of charts.

Regards.

Vishal Jain