admin管理员组

文章数量:1311204

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/mon": "~13.0.0", "ng2-charts": "^3.0.8", "chart.js": "^3.7.1", and my working code with "@angular/mon": "^7.2.5" is at url

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/mon": "~13.0.0", "ng2-charts": "^3.0.8", "chart.js": "^3.7.1", and my working code with "@angular/mon": "^7.2.5" is at url https://stackblitz./edit/ng2-charts-bar-and-line-qkglqd

  • javascript
  • angular
  • ng2-charts
Share Improve this question asked Feb 23, 2022 at 4:12 Tushar MaheshwariTushar Maheshwari 801 silver badge8 bronze badges
Add a ment  | 

2 Answers 2

Reset to default 6

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/docs/latest/charts/bar.html

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.

本文标签：

版权声明：本文标题：javascript - NG2 Chart with Angular: Can&#39;t bind to &#39;colors&#39; since it isn&#39;t a known property of & 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1741874658a2402392.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。