grouped-vertical-bar-chart doesn't support customColors option

[alonaoz]

I need series to be with constant colors, so I want to define a color for each serie. I tried to use customColors options as described here: https://swimlane.gitbook.io/ngx-charts/v/docs-test/examples/bar-charts/grouped-vertical-bar-chart#data-format

I defined function like this in my controller, it is called with undefined argument...I need to get seire name and return the right color.

import {Component, Input, Injectable, Output, EventEmitter,OnDestroy} from '@angular/core'; import { NbThemeService } from '@nebular/theme';

@Injectable({ providedIn: 'root', })

@Component({ selector: 'ngx-d3-bar', template: `

<ngx-charts-bar-vertical-2d
  [view]="view"
  [scheme]="colorScheme"
  [results]="source"
  [gradient]="gradient"
  [xAxis]="showXAxis"
  [yAxis]="showYAxis"
  [legend]="showLegend"
  [showXAxisLabel]="showXAxisLabel"
  [showYAxisLabel]="showYAxisLabel"
  [xAxisLabel]="xAxisLabel"
  [yAxisLabel]="yAxisLabel"
  [barPadding]="0"
  [customColors]="myColors(value)"
  (select)="onSelect($event)">
</ngx-charts-bar-vertical-2d>

`, }) export class D3BarComponent { @Input() source:any; @Output() barSelectedEvent = new EventEmitter();

// Data Structure example /sample: any = [ { name: 'Germany', series: [ { name: '2010', value: 7300 }, { name: '2011', value: 8940 } ] }, { name: 'Germany2', series: [ { name: '2010', value: 3300 }, { name: '2011', value: 1940 } ] } ];/ view: any[] = [900, 500]; showXAxis = true; showYAxis = true; gradient = false; showLegend = true; showXAxisLabel = true; xAxisLabel = 'hours'; showYAxisLabel = true; yAxisLabel = 'score'; themeSubscription: any; colorScheme:any;

constructor(private theme: NbThemeService) { this.themeSubscription = this.theme.getJsTheme().subscribe(config => { const colors: any = config.variables; this.colorScheme = { domain: [colors.primaryLight, colors.infoLight, colors.successLight, colors.warningLight, colors.dangerLight,colors.primary,colors.separator,colors.success,colors.info,colors.warning], }; }); }

ngOnDestroy(): void { this.themeSubscription.unsubscribe(); }

myColors(value) { console.log(value); } onSelect(event) { //console.log(event); this.barSelectedEvent.emit(event); // }

}

To Reproduce Steps to reproduce the behavior:

1. Try to pass customColors function option for ngx-charts-bar-vertical-2d
2. Called with undefined argument

Expected behavior customColors function is called with data serie name

ngx-charts version "@swimlane/ngx-charts@10.1.0",

Additional context Add any other context about the problem here.

[marjan-georgiev]

[customColors]="myColors(value)"

Try [customColors]="myColors($event)"

[th0mas-codes]

[customColors]="myColors" and in the component myColors(value) { return 'mycolor'} Make sure that you don't have [schemeType] value set to linear otherwise it won't work.