ngx-charts heatmap color schema not working

76 views Asked by At

I added a ngx-charts heatmap in my components, everything works except the color schema.

the simple code is here

html

<ngx-charts-heat-map
  [view]="view"
  [legend]="legend"
  [customColors]="customColors"
  [showXAxisLabel]="showXAxisLabel"
  [showYAxisLabel]="showYAxisLabel"
  [xAxis]="xAxis"
  [yAxis]="yAxis"
  [xAxisLabel]="xAxisLabel"
  [yAxisLabel]="yAxisLabel"
  [results]="multi"
  >
</ngx-charts-heat-map>

ts export class EvidenceMatrixComponent implements OnInit {

  multi: any[];
  view: [number, number] = [1200, 800];

  // options
  legend: boolean = true;
  showLabels: boolean = true;
  animations: boolean = true;
  xAxis: boolean = true;
  yAxis: boolean = true;
  showYAxisLabel: boolean = true;
  showXAxisLabel: boolean = true;
  xAxisLabel: string = 'Omics Type';
  yAxisLabel: string = 'Gene';

  // colorScheme = {
  //   // domain: ['#5AA454', '#E44D25', '#CFC0BB', '#7aa3e5', '#a8385d', '#aae3f5']
  // };

  
  constructor() {
    Object.assign(this, { multi });
  }

  ngOnInit(): void {
    
  }

  onSelect(data): void {
    console.log('Item clicked', JSON.parse(JSON.stringify(data)));
  }
  
  onActivate(data): void {
    console.log('Activate', JSON.parse(JSON.stringify(data)));
  }

  onDeactivate(data): void {
    console.log('Deactivate', JSON.parse(JSON.stringify(data)));
  }

  customColors(value) {
    return '#123';
  }
}

I tried to set the color schema to predefined "flame"/"ocean" etc, not working. then I tried to add a custom color function, still not working (actually the customColors function even won't get hit. Did I miss something here?

Thanks!

0

There are 0 answers