Change color of Polar Area datasets in Angular

Question

I am building a dashboard app in Angular 6 and so far so good. I have a metrics section where I'm using ng2-charts to use Chart.js.

I can change any parameter of my linear, bar and doughnut charts with ease, but when I try to change the color for my polar area chart I simply can't do it right.

For the sake of the example, I have hit excerpt in my polar area component HTML:

    <canvas baseChart [data]="polarAreaChartData" [labels]="polarAreaChartLabels" [legend]="polarAreaLegend" [chartType]="polarAreaChartType" [options]="polarAreaChartOptions" [colors]="polarAreaChartColors"></canvas>

I also have this in my typescript:

  public polarAreaChartType = 'polarArea';
  // Number of occurences
  public polarAreaChartData: number[] = [
    98, 82, 45, 12, 9
  ];
  // Reasons
  public polarAreaChartLabels: string[] = [
    'Reason A',
    'Reason B',
    'Reason C',
    'Reason D',
    'Reason E'
  ];
  public polarAreaChartOptions: any = {
    responsive: true,
    legend: {
      display: false
    }
  };
  public polarAreaChartColors: Array<any> = [
  ];

When I try to pass colors in polarAreaChartColors, It only passes one color for all datasets. I want to pass a single color for each dataset. I did that in my doughnut chart using something like this:

  public doughtnutChartColors: Array<any> = [
    {
      backgroundColor: [
        '#2e67bf',
        '#7f8fa4',
        '#bebebe'
      ]
    }
  ];

And it works. How can I make something similar in a Polar Area Chart? Thanks.

Joel Azevedo Joel Azevedo · Accepted Answer · 2018-06-11T09:46:46

I think I found the answer.

Let's say I want to represent 2 datasets (just for the example).

  public polarAreaChartData: number[] = [
    98, 82
  ];
  // Reasons
  public polarAreaChartLabels: string[] = [
    'Reason A',
    'Reason B'
  ];
  public polarAreaChartOptions: any = {
    responsive: true,
    legend: {
      display: false
    }
  };
  public polarAreaChartColors: Array<any> = [
    {
      backgroundColor: [
        '#2e67bf',
        '#7f8fa4'
      ],
    }
  ];

Apparently, I was adding less than 5 colors, and it was causing a problem, since I had 5 values and 5 labels. When I've tested with 2 + 2 + 2 (value, label + options) the colors have changed.

I will test for a longer dataset, but i think it was my mistake. Thank you anyway :)

Change color of Polar Area datasets in Angular

1 Answers