Pie Chart - Way to highlight Percentages!

[Former Member]

Content:

Pie Chart - Way to highlight Percentages by Adlin Sundararaj

Introduction:

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 jeroenvandera 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.