Skip to Content
author's profile photo Former Member
Former Member

Formatting a tooltip value of a column chart in DS 1.4

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

tool.jpg (18.1 kB)
Add a comment
10|10000 characters needed characters exceeded

Related questions

2 Answers

  • author's profile photo Former Member
    Former Member
    Posted on Apr 16, 2015 at 01:08 PM

    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


    Add a comment
    10|10000 characters needed characters exceeded

    • Former Member 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.

  • Posted on Mar 30, 2015 at 02:10 PM

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

    See Pie Chart - Way to highlight Percentages! as an example

    Add a comment
    10|10000 characters needed characters exceeded

Before answering

You should only submit an answer when you are proposing a solution to the poster's problem. If you want the poster to clarify the question or provide more information, please leave a comment instead, requesting additional details. When answering, please include specifics, such as step-by-step instructions, context for the solution, and links to useful resources. Also, please make sure that you answer complies with our Rules of Engagement.
You must be Logged in to submit an answer.

Up to 10 attachments (including images) can be used with a maximum of 1.0 MB each and 10.5 MB total.