Skip to Content
Author's profile photo Former Member

Pie Chart – Way to highlight Percentages!

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.

Assigned Tags

      6 Comments
      You must be Logged on to comment or reply to a post.
      Author's profile photo Former Member
      Former Member

      Good Work.

      Regards,

      Sushant

      Author's profile photo Former Member
      Former Member
      Blog Post Author

      Thank you Sushant

      -Adlin

      Author's profile photo Shlomi Weiss
      Shlomi Weiss

      Hi

      Great stuff,

      But I have an issue,

      How did you manage to see the values in the center of the pie?

      Shlomi

      Author's profile photo Former Member
      Former Member

      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

      Author's profile photo Former Member
      Former Member

      HI Adlin

      how did you manage to get items in the middle of the pie chart? is it "text" component over the chart?

      Author's profile photo Former Member
      Former Member

       

      Hi,

      i've use your code in two forms:

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

      {font-size:15px;font-weight:bold;}

      .myChart1 .v-tooltip-percentage

      {font-size:15px;font-weight:bold;}

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

      Thanks