Ng2-charts: [Bug] Doughnut colors not working

[a-zen]

Hi,

I'm unable to change the color for a doughnut chart.
I used the example given as a basis.

I tried adding to the basechart:

[colors]="[ [204, 0, 0], [230, 230, 0], [0, 153, 51] ]"
and:

[colors]="['#b8436d', '#00d9f9', '#a4c73c', '#a4add3']"

In both cases my doughnut turns the same gray color for all sections.

Versions:
"@angular/common": "2.0.0-rc.1"
"ng2-charts": "1.1.0"
"chart.js": "2.1.4"

Is this releated to #157 ?

Can you please describe the correct way for setting custom colors for a doughnut chart?

[luchillo17]

I think yours is that you're not inputting the correct format for colors, check the line chart example in the typescript section and see the colors array:
http://valor-software.com/ng2-charts/#lineChart

My case is distinct, i manage to colour the chart, but it only get's the first color:

private doughnutChartColours: any[] = [{
    backgroundColor: '#54B541',
    borderColor: '#1D871B'
  }, { // grey
    backgroundColor: '#666',
    borderColor: '#555'
  }]

[luchillo17]

@valorkin Can i draw some of your attention to this issue? it's definitely a bug.

@a-zen You should change the title to [Bug] Doughnut colors not working or something, just to make clear that this is a bug.

[luchillo17]

@valorkin Kind of get the idea where the error is placed, here charts.ts#L90-L102, the way i'm passing the values are ok, but that part of the code doesn't take in account the difference between input for bar charts and doughnut charts:

• BarChart expected input:

datasets: [
        {
            label: "My First dataset",
            backgroundColor: "rgba(255,99,132,0.2)",
            borderColor: "rgba(255,99,132,1)",
            borderWidth: 1,
            hoverBackgroundColor: "rgba(255,99,132,0.4)",
            hoverBorderColor: "rgba(255,99,132,1)",
            data: [65, 59, 80, 81, 56, 55, 40],
        }
    ]

• DoughnutChart expected input:

datasets: [
        {
            data: [300, 50, 100],
            backgroundColor: [
                "#FF6384",
                "#36A2EB",
                "#FFCE56"
            ],
            hoverBackgroundColor: [
                "#FF6384",
                "#36A2EB",
                "#FFCE56"
            ]
        }]

As you can see the BarChart expects an array of objects, one per serie (line in case of LineChart), each one containing the colors for each serie.

Menawhile the DoughnutChar expects an array of 1 element which contains the array of numbers that represents the doughnut values, and an array for each property of each color, of the same lenght of the data array, the piece of code in charts.ts#L90-L102 only takes in account for the BarChart expected input thus only returns 1 of the colors by each property, thus causing the BarChart to have only 1 color in my case.

[a-zen]

@Luchillo thanks for your suggestions. I now got it working:

// donut.ts private doughnutChartColors: any[] = [{ backgroundColor: ["#b8436d", "#00d9f9", "#a4c73c", "#a4add3"] }];

// donut.html <base-chart class="chart" // ... [colors]="doughnutChartColors" // ... </base-chart>

This display the donut chart with 4 different colors as expected, for my 4
datas.

[luchillo17]

Say what? i have to test this right now.

[luchillo17]

OMFG, @a-zen you just made my day, i can finally push my app to Google play and IOS app store.

Since you got it working you should close the issue.

@valorkin this is hard to know, it should be in the docs somewhere.

[sahlouls]

Documentation need to be updated on how to handle colors for each kind of chart.

[thatchej]

@sahlouls I absolutely agree with this, wish I had the time to do it. I've been working with this library for a couple weeks now, and this is the only thing I have to consistently struggle to figure out

[kraihn]

I was able to get the colors working for the doughnut chart after initializing an empty object for each dataset into the colors input. The last line of TypeScript is the key.

HTML

<canvas baseChart
    [chartType]="type"
    [datasets]="datasets"
    [labels]="labels"
    [colors]="colors"></canvas>

TypeScript

public type:string = 'doughnut';
public datasets: any[] = [
  {
    data: [350, 450, 100],
    backgroundColor: [
      "#FF6384",
      "#36A2EB",
      "#FFCE56"
    ],
    hoverBackgroundColor: [
      "#000",
      "#36A2EB",
      "#FFCE56"
    ]
  }];
public labels:string[] = ['Download Sales', 'In-Store Sales', 'Mail-Order Sales'];
public colors: Array<Color> = [{}];

See my Plunker example

[Cuica20]

Great!!
Good solutions.

[quiringk]

I got both a doughnut and piechart to work with @a-zen answer. However, when I change the data I get this error: "Cannot read property 'custom' of undefined". I think this is because my data set is a different size than the color array.

So I also tried doing the "clone" solution that is in the demo in order to refresh the data but with the colors array and I still get the same error. Not only that, but the colors don't show up on the initial load.

loadChart(){
        let clone = JSON.parse(JSON.stringify(this.pieChartData));
        let clone2 = JSON.parse(JSON.stringify(this.pieChartColors));

        clone[0].data = [];
        clone2[0].backgroundColor = [];

        for(let r of this.records){
            clone[0].data.push(Math.round(r.projectedSales));
            clone2[0].backgroundColor.push(r.bgColor);
        }

        this.pieChartColors = this.copyObject(clone2);
        this.pieChartColors[0].backgroundColor = clone2[0].backgroundColor;
        this.pieChartData = this.copyObject(clone);
        this.pieChartData[0].data = clone[0].data;
    }

[quiringk]

I also tried @kraihn way and can't get a refresh to work with colors.

[explooosion]

Radar can try this

[colors]="colors"

  public colors: any = [{
    borderColor: 'red',
    backgroundColor: 'green',
    pointBackgroundColor: 'orange',
    pointBorderColor: 'blue,'
  }];

[paviad]

This package is now updated for Angular 7. If this issue persists, please provide a codepen/stackblitz/... example showing the issue.