ngx-charts: Pie chart chart show incorrect percentage

I’m submitting a … (check one with “x”)

[x] bug report => search github for a similar issue or PR before submitting
[ ] feature request
[ ] support request => Please do not submit support request here

Current behavior

Don’t round values in Pie grid chart so much, sample: data = [ { name: ‘first’, value: 1546 }, { name: ‘second’, value: 381 }, { name: ‘next’, value: 38 } ];

it will show 80%, 20%, 2% that in summarize => 102%

Expected behavior

Must be “78.7%”, “19.4%”, “1.9%”

Reproduction of the problem

Use sample data above

What is the motivation / use case for changing the behavior?

It’s weird for user to see values that in total will be more than 100 percent

Please tell us about your environment:

ngx-charts version: 4.0.3

Angular version: 2.4.5

Browser: [ Chrome ]

Language: [TypeScript 2.0.3]

About this issue

Original URL
State: open
Created 7 years ago
Reactions: 1
Comments: 38 (3 by maintainers)

Commits related to this issue

fix issue #201 Pie chart chart show incorrect percentage — committed to ssleptsov/ngx-charts by ssleptsov 7 years ago
fix issue #201 Pie chart chart show incorrect percentage (#202) * fix issue #201 Pie chart chart show incorrect percentage * package build for internal use * Revert "package build for internal ... — committed to swimlane/ngx-charts by ssleptsov 7 years ago
fix issue #201 Pie chart chart show incorrect percentage (#202) * fix issue #201 Pie chart chart show incorrect percentage * package build for internal use * Revert "package build for internal ... — committed to ChargePoint/ngx-charts by ssleptsov 7 years ago
{feat): Added options for formatting the name, value and percentage values in the advanced legend component. Added to be used in the advanced pie chart component. Should help with #201 — committed to ruarfff/ngx-charts by ruarfff 6 years ago
(feat): Added options for formatting the name, value and percentage values in the advanced legend component. Added to be used in the advanced pie chart component. Should help with #201 — committed to ruarfff/ngx-charts by ruarfff 6 years ago
(feat): Added options for formatting the name, value and percentage values in the advanced legend component. Added to be used in the advanced pie chart component. Should help with #201 — committed to ruarfff/ngx-charts by ruarfff 6 years ago
(feat): Added options for formatting the name, value and percentage values in the advanced legend component. (#719) Added to be used in the advanced pie chart component. Should help with #201 — committed to swimlane/ngx-charts by ruarfff 6 years ago
Fix percentage issue #201 — committed to giuliohome/ngx-charts by giuliohome 3 years ago

Most upvoted comments

@yuveliremil This issue solves the problem of percentageFormatting not working; it can be done now, and for now, it works.

.html
 <ngx-charts-advanced-pie-chart
                    [results]="dashboardData"
                    [label]="label"
                    [percentageFormatting]="percentageFormatting"
                   >
 </ngx-charts-advanced-pie-chart>
.ts
 percentageFormatting(c) {
    return Math.round(c);
  }

wzc570738205 on Dec 27, 2018

with animations=true not working decimal in percent

fchiumeo on Oct 4, 2018

This is the fix in the count.directive.ts I’m going to post a pull request

    const callback = ({ value, progress, finished }) => {
      if (finished) {
        this.value = valueFormatting(this.countTo);
      } else {
        this.value = valueFormatting(value);
      }
      this.cd.markForCheck();
      if (!finished) this.countChange.emit({ value: this.value, progress });
      if (finished) this.countFinish.emit({ value: this.value, progress });
    };

giuliohome on Apr 28, 2021

I’m using 7.4.0 / 8.1 and also have the same issue percent_bug_ngx-chart

Advanced piechart

What does percentageFormatting stand for? Because i’m formating values (as you can see in console) but at the end it’s still parsed and reformated by ngx-chart source code

SaydChada on Jul 9, 2018

Right @VictorCavalcante , indeed the source code is taking valueFormatting only *ngIf="!animations" if not animations!

It should be easy to fork and “fix” and see what happen…

  <div
    *ngIf="animations"
    class="total-value"
    ngx-charts-count-up
    [countTo]="roundedTotal"
    [valueFormatting]="valueFormatting"
  ></div>
  <div class="total-value" *ngIf="!animations">
    {{ valueFormatting ? valueFormatting(roundedTotal) : defaultValueFormatting(roundedTotal) }}
  </div>

giuliohome on Apr 27, 2021

percentageFormatting is apparently not working in pie grid, so no workaround this issue?

Version 16.0.0 and this issue is still happening. The only workaround that works for Pie Grid is disabling the animations, like this:

<ngx-charts-pie-grid 
        [animations]="false" 
        [results]="chartValues">
</ngx-charts-pie-grid>

Still definitely not a good solution.

VictorCavalcante on Oct 2, 2020

@yuveliremil Definitely not a good solution, but it’s a Workaround.

luchillo17 on Dec 14, 2018

I think 2 things should happen:

If fields are not yet initialized, it should show percentage at 0% or not show at all, maybe just don’t show when percentage is NaN.
Allow us to choose the precision shown in the percentage, that means rounding the percentage but parametrizing the precision to round with default 0, so it should show only int values, unless we tell it to show 2 decimal points.

Any thoughts on this?

luchillo17 on Aug 21, 2017