How to change lines color using ngx-chart ? The goal is to have a color that change depending on the yAxis, with a gradient color.
It seems that if I change the schemeType from ordinal to linear, it does what I want to, but this remove the legends.
Like this exemple :
In order to achieve what I wanted I used the schemeType linear then I created a custom legend using ngx-charts-legend.
This is not a perfect solution since we cannot set 2 differents gradients.
<div #containerRef class="d-flex" *ngIf="data.length && !loading">
<ngx-charts-line-chart [view]="[containerRef.offsetWidth, 400]" [curve]="curve" [schemeType]="'linear'"
[scheme]="colorScheme" [legend]="legend" [showXAxisLabel]="showXAxisLabel" [showYAxisLabel]="showYAxisLabel"
[xAxis]="xAxis" [yAxis]="yAxis" [xAxisLabel]="xAxisLabel" [yAxisLabel]="yAxisLabel" [timeline]="timeline"
[results]="data" [activeEntries]="activeEntries" [roundDomains]="true" [yScaleMin]="0" [yScaleMax]="100">
</ngx-charts-line-chart>
<div *ngIf="legend" class="chart-legend custom p-1">
<ngx-charts-legend [data]="chartNames" [title]="'Legend'" [colors]="colors"
(labelActivate)="legendLabelActivate($event)" (labelDeactivate)="legendLabelDeactivate($event)">
</ngx-charts-legend>
</div>
</div>
public data: any[] = [];
public view: any[];
// options
public legend: boolean = true;
public chartNames: string[] = [];
public showLabels: boolean = true;
public animations: boolean = true;
public xAxis: boolean = false;
public yAxis: boolean = true;
public yAxisTicks: number[] = [0, 10, 20, 30, 40, 50, 60, 70, 80, 90, 100]
public showYAxisLabel: boolean = true;
public showXAxisLabel: boolean = true;
// xAxisLabel: string = 'Year';
public activeEntries: any[];
public yAxisLabel: string = 'Batt %';
public timeline: boolean = true;
public colorScheme = {
domain: ['#a8385d', '#0000FF']
};
public colors: ColorHelper;