Skip to Content


Pie Chart – Way to highlight Percentages by Adlin Sundararaj


We generally use Pie chart to show the size of any item proportional to the sum of items.

The data values in a pie chart are displayed as a percentage of whole pie. In Design Studio Pie chart tool tip displays “Label, Value & percentage”.

It was so disappointing since the % values are not highlighted in the Tooltip. the %  styles were less than the Value styles.


How we do this:

Modifying the source code of Design Studio Pie-chart classes are the only way to do this.

Since we really do not know which classes are used, I took help of Jeroen van der A Blogs to know how to incorporate html code in Design Studio.

Pie chart tool tip classes are using the classes

  • v-pie-tooltip,
  • viz-pie-tooltip-label-dimensions v-tooltip-label,
  • viz-pie-tooltip-label-value v-tooltip-value,
  • viz-pie-tooltip-label-percentage v-tooltip-percentage.

We change the property of these classes and what we achieved is


The CSS code I used here to overwrite the existing classes are:

.v-tooltip-percentage {font-size:15px;font-weight:bold;} .v-tooltip-value{font-weight:normal;}

The way of using CSS, Scripts in Design Studio can do amazing things.

To report this post you need to login first.


You must be Logged on to comment or reply to a post.

  1. Sivakami P S

    hi Adlin,

    I am using a pie chart in my application, but by default its not at all showing percentages. I have only amount in KF part of datasource. Is there any property to enable percentage display?


  2. Cinzia Genito



    i’ve use your code in two forms:

    .myChart1 .v-pie-tooltip .viz-pie-tooltip-label-percentage .v-tooltip-percentage


    .myChart1 .v-tooltip-percentage


    but neither of two codes work, can you help me?



Leave a Reply