Plantilla <canvas baseChart [datasets]="barChartData" [labels]="barChartLabels" [options]="barChartOptions" [legend]="barChartLegend" [type]="barChartType" [colors]="chartColors"></canvas> Código:
public chartColors: Array<any> = [ { backgroundColor: ['#d13537', '#b000b5'] }] Recibo un error: - No se puede vincular a 'colores' ya que no es una propiedad conocida de 'lienzo'. Estoy usando "@angular/cdk": "^13.1.1", "@angular/common": "~13.0.0", "ng2-charts": "^3.0.8", "chart.js": "^3.7.1", y mi código de trabajo con "@angular/common": "^7.2.5" está en la URL https://stackblitz.com/edit/ng2-charts-bar-and-line-qkglqd
¡tengo el mismo problema con Angular 13.2.3!
Aso experimentó que poner la lona en
<ng-template>no causa el error de compilación pero el gráfico no aparece.
En lugar de usar el parámetro [colores], use [datos] e incluya una matriz backgroundColor dentro del conjunto de datos. Como esto:
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"], } ] };Parece que estás usando la configuración de una versión diferente. Este método funcionó para mí usando Angular 12 y "ng2-charts": "^3.0.8". Puede leer la documentación de la versión actual aquí: https://www.chartjs.org/docs/latest/charts/bar.html