No Decimal Places shown in Pie Chart Labels

563
1
Jump to solution
02-02-2022 08:56 AM
pmccord
New Contributor III

I'm working on configuring several pie charts that we have in our Hub pages. 

Right now, one of our pie charts looks like this:

pmccord_0-1643820220739.png

I'd like to remove all decimal places from the percentages so that 17.67% would become 18% and 0.71% would become <1% (if that's possible).

 

If that level of control doesn't exist on the labels, I'd alternatively like to try setting the value attribute in the Pie Chart wizard to Perc of Total like so:

pmccord_1-1643820533808.png

This accomplishes the task of rounding the percentages, but I'd still like to get rid of the trailing zeros in the percentages. Can that be done with the override property in the JSON configuration?

If I end up going this route, then what I would need is to have the values that are displayed when I hover over the pie chart wedges to be a different value field than the Percent of the Total. Right now, when I hover over a wedge, it shows the same Percent of Total values as are shown in the labels.

Is there any way where I can set up the pie chart to have the labels as the Percent of the Total (as is shown in the second image above), but when you hover over a wedge it shows the values from another field? In our case there's a Total Miles field that's being summed up for each Install Decade that we want shown when you hover over a wedge. 

Tags (2)
1 Solution

Accepted Solutions
pmccord
New Contributor III

I wanted to update this post in case anyone needs the solution in the future...

A colleague of mine was at the 2022 Dev Summit and was able to get the solution directly from a developer.

To remove all decimal places from the pie chart (or control the number of decimal places shown), the percentPrecision property needs to be updated in the overrides of the chart JSON. So, without any other overrides, it would look something like this:

  "overrides": {

    "percentPrecision":0

  }

I hope this helps!

View solution in original post

1 Reply
pmccord
New Contributor III

I wanted to update this post in case anyone needs the solution in the future...

A colleague of mine was at the 2022 Dev Summit and was able to get the solution directly from a developer.

To remove all decimal places from the pie chart (or control the number of decimal places shown), the percentPrecision property needs to be updated in the overrides of the chart JSON. So, without any other overrides, it would look something like this:

  "overrides": {

    "percentPrecision":0

  }

I hope this helps!