ng2-charts - bar chart, showing only one color

Question

In my Angular application, I am using ng2-charts, and trying to create a bar chart. The following stackblitz is working perfectly, I am following it: https://stackblitz.com/edit/ng2-charts-bar-template However, in my application, I am fetching data from a service, and populating dataset for chart. That works, however with two problems.

It shows only one color, gray.
For every bar, it is taking first date value for label i.e. Apr-2019, whereas all respective values are provided for label: property.

Tried populating values as plain javascript objects, or typed objects i.e. Label and ChartDataSets, result is the same.

Tech info:

Angular CLI: 8.0.4, Node: 11.12.0, OS: win32 x64, Angular: 8.0.2, [email protected], [email protected]

public barChartData: ChartDataSets[] = [];
public barChartLabels: Label[] = [];

resultItemsReport.forEach(element => {
   this.barChartData.push({ data: [element.itemQuantity], label: element.itemName 
  });
});
this.barChartLabels.push('Apr-2019');

<canvas baseChart
    [datasets]="barChartData"
    [labels]="barChartLabels"
    [options]="barChartOptions"
    [plugins]="barChartPlugins"
    [legend]="barChartLegend"
    [chartType]="barChartType" [colors]="barChartColors">
</canvas>

I expect that bars have colors auto assigned, without the need to assign it manually, as is there already in stackblitz sample application.

Here is data used in chart:

Here is how chart shows up:

I have the same issue but i also have Pie chart which also has the same problem. — LuftWaffle

Cyrus Mushier Cyrus Mushier · Accepted Answer · 2019-06-26T13:31:15

Remove the colors input in your template to have the colors auto-generated. If you have the [colors] input, make sure that the input property contains the preferred colors.

The data being picked depends on how you have structured your data. It also depends on how you want to present and group your data. For instance, as you have shared:

public barChartLabels: Label[] = ['2006', '2007', '2008', '2009', '2010', '2011', '2012'];
public barChartData: ChartDataSets[] = [
    { data: [65, 59, 80, 81, 56, 55, 40], label: 'Series A' },
    { data: [28, 48, 40, 19, 86, 27, 90], label: 'Series B' }
  ];

I believe the structure of your data should be mapping to the same.

ng2-charts - bar chart, showing only one color

1 Answers