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/ngx-charts@8.1.0

• 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...

[ghost]

same for horizontal bar charts - not able to pass object