¿Cómo cambio el color de ng2-charts?

Solución:

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"] 
      }];

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)'
    }];

gris el color 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 siguiente también funcionará.

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

//.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 en función de los valores y colores adjuntos a las alertas. Descubrí 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 utilicé la función para vincular los colores de mi gráfico y fue mágico. ¡Había estado atascado en este problema durante un par de horas!

¡Espero que esto ayude a cualquiera que esté tratando de pasar valores dinámicos a ng2-charts con Angular!

---

---

Utiliza Nuestro Buscador