带有 Angular 的 NG2 图表：无法绑定到“颜色”，因为它不是 Angular 中“画布”的已知属性 13

Question

Template <canvas baseChart [datasets]="barChartData" [labels]="barChartLabels" [options]="barChartOptions" [legend]="barChartLegend" [type]="barChartType" [colors]="chartColors"></canvas> Code:

  public chartColors: Array<any> = [
{
  backgroundColor: ['#d13537', '#b000b5']
}

] I am getting error:- Can't bind to 'colors' since it isn't a known property of 'canvas'. I am using "@angular/cdk": "^13.1.1", "@angular/common": "~13.0.0", "ng2-charts": "^3.0.8", "chart.js": "^3.7.1", and my working code with "@angular/common": "^7.2.5" is at url https://stackblitz.com/edit/ng2-charts-bar-and-line-qkglqd

Answer 1

Instead of using the [colors] parameter, use [data] and include a backgroundColor array inside of the dataSet. Like this:

HTML

<canvas baseChart
        [data]="barChartData"
        [labels]="barChartLabels"
        [type]="barChartType">
</canvas>

TS

import { ChartData, ChartType } from 'chart.js';

...

  public barChartType: ChartType = 'bar'
  public barChartLabels: string[] = ['Label 1', 'Label 2', 'Label 3'];
  public barChartData: ChartData<'bar'> = {
    labels: this.barChartLabels,
    datasets: [
      {
        label: "Title label",
        data: [5, 3, 1],
        backgroundColor: ["red", "green", "blue"],
        hoverBackgroundColor: ["darkred", "darkgreen", "darkblue"],
      }
    ]
  };

It seems you're using the configuration of a different version. This method worked for me using Angular 12 and "ng2-charts": "^3.0.8". You can read the documentation for the current version here: https://www.chartjs.org/docs/latest/charts/bar.html

Answer 2

have same issue with Angular 13.2.3 !

Aso, experienced that putting the canvas in

<ng-template>

does not cause the build error but the chart is not appearing.