Skip to Content

Pie Chart – Way to highlight Percentages!


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.

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