ng2-charts: Setting colors not working

Question

My chart is defined as:

  <canvas #chart baseChart
              [data]="_chartData"
              [labels]="_chartLabels"
              [chartType]="_chartType"
              [colors]="_backgroundColors">
  </canvas>

I have colors specified as:

private _backgroundColors:string[] = ["#345657", "#112288", "#adf444"];

Everything works but the colors. If I pass this array in, all the colors display as the same color, a light grey. Anyone see what might be wrong?

score 6 · Accepted Answer · answered Feb 07 '17 at 21:04

6

The solution can be found here. It's not documented at this time.

It needs to be like this:

[{backgroundColor: ["#e84351", "#434a54", "#3ebf9b", "#4d86dc", "#f3af37"]}]

answered Feb 07 '17 at 21:04

BBaysinger

6,614
13
63
132

score 2 · Answer 2 · answered Jun 30 '20 at 08:04

I agree with above answer, I would like to provide details if someone needs it. my example is in PIE chart it works for others too.

Step-1:

Add the following in your component.ts file

     public pieChartColors: Array < any > = [{
       backgroundColor: ['#fc5858', '#19d863', '#fdf57d'],
       borderColor: ['rgba(252, 235, 89, 0.2)', 'rgba(77, 152, 202, 0.2)', 'rgba(241, 107, 119, 0.2)']
   }];

Step-2 :

Your component.html should look something like below:

   <canvas baseChart 
                [data]="pieChartData" 
                [labels]="pieChartLabels" 
                [chartType]="pieChartType"
                [options]="pieChartOptions"
                [plugins]="pieChartPlugins"
                [legend]="pieChartLegend"
                [colors]="pieChartColors"
                (chartHover)="chartHovered($event)"
                (chartClick)="chartClicked($event)"
                >
              </canvas>

score 1 · Answer 3 · answered Feb 07 '17 at 17:04

1

It's supposed to be something like this:

[
   {
      backgroundColor:"#ffa954",

   },
   {
      borderColor:"#589b00",

   }
]

Where each object represents the corresponding object in your dataSets array

answered Feb 07 '17 at 17:04

Sumama Waheed

3,579
3
18
32

It still just changes them all to the same color. – BBaysinger Feb 07 '17 at 17:09
What kind of chart do you have? line, bar ? – Sumama Waheed Feb 07 '17 at 17:48
It's a donut chart. – BBaysinger Feb 07 '17 at 21:02

score 1 · Answer 4 · answered Aug 03 '22 at 10:29

For PIE Chart:

HTML:

<canvas baseChart width="200" height="200"
        [data]="chartData"
        [options]="chartOptions"
        [type]="chartType">
</canvas>

TS:


import { Component, OnInit, ViewChild } from '@angular/core';
import { ChartConfiguration, ChartData, ChartType } from 'chart.js';
import { BaseChartDirective } from 'ng2-charts';

export class MyChartComponent implements OnInit {

  @ViewChild(BaseChartDirective) chart: BaseChartDirective | undefined;

  constructor() { }

  ngOnInit(): void {}

  public chartOptions: ChartConfiguration['options'] = {
    responsive: true,
    plugins: {
      legend: {
        display: true,
        position: 'top',
      },
    },
  };

  public chartData: ChartData<'pie', number[], string | string[]> = {
    labels: ['Low', 'Middle', 'High'],
    datasets: [{
      data: [25, 40, 35], 
      backgroundColor: ['rgba(0, 160, 0, 1)', 'rgba(240, 160, 0, 1)', 'rgba(220, 0, 0, 1)'],
      borderColor: ['rgba(250, 250, 250, 1)', 'rgba(250, 250, 250, 1)', 'rgba(250, 250, 250, 1)'],
      hoverBackgroundColor: ['rgba(0, 160, 0, 0.8)', 'rgba(240, 160, 0, 0.8)', 'rgba(220, 0, 0, 0.8)'],
      hoverBorderColor: ['rgba(0, 160, 0, 1)', 'rgba(240, 160, 0, 1)', 'rgba(220, 0, 0, 1)'],
    }],
  };

  public chartType: ChartType = 'pie';
}

score 1 · Answer 5 · answered Aug 03 '22 at 10:34

For LINE Chart:

HTML:

<canvas baseChart width="400" height="360"
        [data]="chartData"
        [options]="chartOptions"
        [type]="chartType">
</canvas>

TS:


import { Component, ViewChild, OnInit } from '@angular/core';
import { ChartConfiguration, ChartType } from 'chart.js';
import { BaseChartDirective } from 'ng2-charts';

export class MyChartComponent implements OnInit {

  @ViewChild(BaseChartDirective) chart?: BaseChartDirective;

  constructor() {}

  ngOnInit(): void {}

  public chartData: ChartConfiguration['data'] = {
    datasets: [
      {
        data: [10, 32, 21, 48],
        label: 'My Data',
        backgroundColor: 'rgba(54, 162, 235, 0.2)',
        borderColor: 'rgba(54, 162, 235, 1)',
        pointBackgroundColor: 'rgba(54, 162, 235, 1)',
        pointBorderColor: 'rgba(255, 255, 255, 1)',
        pointHoverBackgroundColor: 'rgba(255, 255, 255, 1)',
        pointHoverBorderColor: 'rgba(54, 162, 235, 1)',
        fill: 'origin',
      },
    ],
    labels: ['A', 'B', 'C', 'D']
  };

  public chartOptions: ChartConfiguration['options'] = {
    elements: {
      line: {
        tension: 0.5
      }
    },
    scales: {
      x: {},
      y: {
        position: 'left',
        beginAtZero: true,
        grid: {
          color: 'rgba(100, 100, 100, 0.3)',
        },
        ticks: {
          color: 'rgba(100, 100, 100, 0.8)'
        }
      },
    },
    maintainAspectRatio: false,
    plugins: {
      legend: { display: true },
    }
  };

  public chartType: ChartType = 'line';
}

ng2-charts: Setting colors not working

5 Answers5