How to use Ngx-Charts customColor function

Question

How do you use the customColor attribute as a function? I'm looking to build a scatter plot and mark all points with a negative value as red, and all those with a positive value as green. I would think that the customColor functionality would let me do this, but I've only seen examples of customColor as an object rather than a function. Thanks!

Rainout

Answer 1

HTML template

<ngx-charts-bar-vertical
      [animations]="barAnimations"
      [customColors]="barCustomColors()"
      ...
</ngx-charts-bar-vertical>

Component

...
   barAnimations = false;
   barSingle = [
      {"name": "56","value": 654},
      {"name": "57","value": 123},
      ...
   ]

   constructor() {}

   ngOnInit() {}

   // your custom function
   // make sure return structure is array like
   // [
   //    {"name": "a","value": "#ff0000"},
   //    {"name": "b","value": "#ff0000"}
   // ]   
   barCustomColors() {
      let result: any[] = [];
      for (let i = 0; i < this.barSingle.length; i++) {
         if (this.barSingle[i].value < 200) {
            result.push({"name": this.barSingle[i].name,"value": "#0000ff"});
         }
      }
      return result;
   }
...

Then the chart will call the function when chart was created.

Make sure the custom function is return the array and include name and value of color. It is like:

[
   {"name": "a","value": "#ff0000"},
   {"name": "b","value": "#ff0000"}
]

But if the animations mode is on, it will call the function too many time and make the issue below.

requestAnimationFrame handler took ms

It will make your chart drawing too slow. So if you want to use function to control and custom your chart color. Suggest closing the animations mode.

Laaspere

Loop is still running even the animations are turned off. Any updates? – Phinney

Answer 2

You need to pass a prepared array of colors instead of a function

setCustomColors() {
    let result: any[] = [];
    for (let i = 0; i < this.barSingle.length; i++) {
       if (this.barSingle[i].value < 200) {
          result.push({"name": this.barSingle[i].name,"value": "#ff0000"});
       }
       else{
          result.push({"name": this.barSingle[i].name,"value": "#33cc33"});
       }
    }
    return result;
 }
 customColors: any;

and set the value on component creation

constructor() { 
    this.customColors = this.setCustomColors();
  }

Preempt

Answer 3

To expand on 許聖泉's answer....

One way to assure the colors are only calculated when necessary. You can wrap the charts in a component which calls the generation of custom colors upon change of data. This way you can have animations along with a custom colors function without the performance hit.

So in the wrapper component you'd have something like

...
  multiVal: any = [];

  @Input()
  set multi(data: any) {
    this.generateCustomColors();
    this.multiVal = data;
  }
  get multi() {
    return this.multiVal;
  }
...

...
generateCustomColors() {
    if (this.multi === undefined) {
      return [];
    }
    // This is where you calculate your values. 
    // I left my conversion using a custom Color class for reference.
    // Similar concept can be used for single series data  
    const values = {};
    // for (const mult of this.multi) {
    //   for (const serie of mult.series) {
    //     if (values[serie.name] === undefined) {
    //       values[serie.name] = {
    //         name: serie.name,
    //         value: Color.hexFromString(serie.name),
    //       };
    //     }
    //   }
    // }
    this.customColors = Object.values(values);
  }
...

Wertheimer

Answer 4

I find out that application may constantly load the customColor() function if you put it like this. It slows down the apps, some case caused error for ionic component.

#hteml
    <ngx-charts-line-chart ...[customColors]="customColors()"> 
    </ngx-charts-line-chart>
#typescript
    drawCustomColors(){...}

So instead I bind the atrribute to array. Make a function that draw the color(return array). And call the function whenever the dynamic data is draw again.

#hteml
    <ngx-charts-line-chart ...[customColors]="customColors"> 
    </ngx-charts-line-chart>
#typescript
    customColors = [] ; 
    drawCustomColors(){return new custom color array}
    loadingChartDataHere(){... customColors = this.drawCustomColors() ;}

Kara

No worry if the data name in customColors appeared before actual data array. Atleast bug won't appeared and anything works fine. – Kara

Answer 5

Github Issue

import { Color, ScaleType } from '@swimlane/ngx-charts';

colorScheme: Color = { 
    domain: ['#99CCE5', '#FF7F7F'], <= color can be anything
    group: ScaleType.Ordinal, 
    selectable: true, // => boolean (true / false)
    name: 'Customer Usage', 
};

Lisette