如何根据值将颜色线更改为渐变色

Question

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 :

Related GitHub issue

Answer 1

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;