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.
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.
Good Work.
Regards,
Sushant
Thank you Sushant
-Adlin
Hi
Great stuff,
But I have an issue,
How did you manage to see the values in the center of the pie?
Shlomi
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
HI Adlin
how did you manage to get items in the middle of the pie chart? is it "text" component over the chart?
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