ngx-charts-number-card[customColors] passes the name and not the value

[ciukstar]

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 - use StackOverflow (add the ngx-charts tag) or the gitter chat for support questions

Current behavior
ngx-charts-number-card[customColors] passes the name and not the value

Expected behavior
ngx-charts-number-card[customColors] passes the value and not the name (as in documentation: _"custom colors for the chart. Used to override a color for a specific value"_). Ideally should inject the name and the value as a whole object {"name": "the name", "value": "the value"}

Reproduction of the problem
the-template.html

<ngx-charts-number-card
    [view]="viewSize"
    [customColors]="colorFun"
    [results]="ratings">
  </ngx-charts-number-card>

the-component.ts

colorFun(x: any): string {
    console.log('colorFun: x:', x);
    //Not working because x is the name and not the value
    // return x < 1.5 ? 'red' : (x < 1.7 ? 'yellow' : 'green');
    // return x.value < 1.5 ? 'red' : (x.value < 1.7 ? 'yellow' : 'green');
    return 'green';
  }

What is the motivation / use case for changing the behavior?
Conformance with the documentation.

Please tell us about your environment:

Linux, Emacs, npm

• ngx-charts version:
  @swimlane/[email protected]

• Angular version:

@angular-devkit/architect         0.6.8
@angular-devkit/build-angular     0.6.8
@angular-devkit/build-optimizer   0.6.8
@angular-devkit/core              0.6.8
@angular-devkit/schematics        0.6.8
@angular/cdk                      6.3.2
@angular/cli                      6.0.8
@angular/material                 6.3.2
@ngtools/webpack                  6.0.8
@schematics/angular               0.6.8
@schematics/update                0.6.8
rxjs                              6.2.1
typescript                        2.7.2
webpack                           4.8.3

• Browser: all

• Language: TypeScript 2.7.2

[romanfedyshyn]

@ciukstar here you find a solution your issue, it's work for me - #269

[ciukstar]

Thanks for suggestion. I don't think #269 is a solution for me. It seems that for other charts, ngx-charts passes the "entire" object {name: string, value: number} to [customColors] function, but not for ngx-charts-number-card for some reason. I tried #269 but my data is retrieved async and for some reason *ngIf does not work and [customColors] has no binding data .... Kinda weird. Anyway, I replaced all this ngx-charts-number-card with a simple mat-grid-list and some animations. Thanks for the tip!
(Maybe I should close this issue?!)

[golavr]

ngx-charts: v13.0.0
same problem w/ ngx-charts-bar-vertical.
the object should be passed and not the name.

[martheli]

+1 on this issue. When trying to use customColors I want the object to be passed so that for vertical stacked bar chart I have the data for the bar and each stack. The hover label has the information.

[hardasbricks]

+1 ngx-linechart also only passes the name instead of the object.

[hevans90]

same for horizontal bar charts - this is really a missing feature because we can't set custom colors based on values of the datasets...

[developerzzz]

same for horizontal bar charts - not able to pass object