Skip to Content

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.

/wp-content/uploads/2013/11/1_325251.jpg

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

/wp-content/uploads/2013/11/2_325252.jpg

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.

5 Comments

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?

    Sivakami

    (0) 

Leave a Reply