ng2 graficos chart angular ng2-charts

graficos - ng2-charts angular 6



¿Cómo cambio el color para ng2-charts? (3)

Deberías hacer esto como:

public chartColors: Array<any> = [ { // first color backgroundColor: ''rgba(225,10,24,0.2)'', borderColor: ''rgba(225,10,24,0.2)'', pointBackgroundColor: ''rgba(225,10,24,0.2)'', pointBorderColor: ''#fff'', pointHoverBackgroundColor: ''#fff'', pointHoverBorderColor: ''rgba(225,10,24,0.2)'' }, { // second color backgroundColor: ''rgba(225,10,24,0.2)'', borderColor: ''rgba(225,10,24,0.2)'', pointBackgroundColor: ''rgba(225,10,24,0.2)'', pointBorderColor: ''#fff'', pointHoverBackgroundColor: ''#fff'', pointHoverBorderColor: ''rgba(225,10,24,0.2)'' }];

El color gris está configurado de forma predeterminada, lo que significa que sus opciones de color no funcionan, debido a nombres de propiedades incorrectos.

Aquí tienes un ejemplo, cómo se llaman las propiedades de los colores:

ng2-charts-github-source-code

@ACTUALIZAR:

Si es necesario actualizar solo backgroundColor y nada más, el código a continuación también funcionará.

public chartColors: Array<any> = [ { // all colors in order backgroundColor: [''#d13537'', ''#b0o0b5'', ''#coffee'', ...] } ]

He agregado ng2-charts a mi proyecto y muestro 2 gráficos - donut & barchart. Ambos se muestran en gris desde que agregué

<base-chart class="chart" [colors]="chartColors" ... </base-chart>

a component.template.html y

public chartColors:Array<any> =[ { fillColor:''rgba(225,10,24,0.2)'', strokeColor:''rgba(11,255,20,1)'', pointColor:''rgba(111,200,200,1)'', pointStrokeColor:''#fff'', pointHighlightFill:''#fff'', pointHighlightStroke:''rgba(200,100,10,0.8)'' }, ... (3x)

al component.ts

¿Son necesarias otras importaciones de paquetes para cambiar el color o la configuración es incorrecta? Chromes html inspector muestra la siguiente salida html renderizada

ng-reflect-colors="[object Object],[object Object],[object Object]"


También puedes hacerlo de esta manera:

<base-chart class="chart" [colors]="chartColors" ... </base-chart>

y

public chartColors: any[] = [ { backgroundColor:["#FF7360", "#6FC8CE", "#FAFFF2", "#FFFCC4", "#B9E8E0"] }];


//.ts_file public chartColors() { return [{ backgroundColor: this.alert.severityColor, borderColor: ''rgba(225,10,24,0.2)'', pointBackgroundColor: ''rgba(225,10,24,0.2)'', pointBorderColor: ''#fff'', pointHoverBackgroundColor: ''#fff'', pointHoverBorderColor: ''rgba(225,10,24,0.2)'' }] } //.html_file <div style="display: block"> <canvas baseChart [datasets]="barChartData()" [options]="barChartOptions" [legend]="barChartLegend" [chartType]="barChartType" [colors]="chartColors()" (chartHover)="chartHovered($event)" (chartClick)="chartClicked($event)"></canvas> </div>

Necesitaba cambiar el color de los gráficos de forma dinámica según los valores y colores adjuntos a las alertas. Encontré que @uluo tenía una gran respuesta. Lo cambié de una propiedad de la clase a una función y devolví el objeto con los colores establecidos en elementos dinámicos en mis alertas. Luego usé la función para enlazar los colores de mi carta y fue mágico. ¡Había estado atrapado en este problema por un par de horas!

¡Espero que esto ayude a cualquiera que intente pasar valores dinámicos a ng2-charts con Angular!