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:
@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!