javascriptangularchartsngx-charts

How to change color lines to gradient color depending on the value


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 :

gradient line

Related GitHub issue


Solution

  • 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;