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
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.
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