CODEWITHSUNDEEP
ng2-chartsangular14
Tusar
Tusar

Reputation: 769

ng2-chart - barChart color customization not working

Angular 14, ChartJS: 4.1.1, NG2-Charts: 4.1.1. I am facing some trouble when trying to customize bar chart colors. I also tried ng2-charts 2.0.0. As of now I am getting default colors.

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

<div style="display: block; width: 900px; ">
    <canvas baseChart
        [data]="barChartData"
        [options]="barChartOptions"   
        [colors]="barChartColors"
        [type]="chartType">     
    </canvas>
</div>

Upvotes: 0

Views: 275

Answers (1)

Saroj Panda
Saroj Panda

Reputation: 66

For ng2-charts 4.1.1.

Remove [colors] from canvas. And update barChartData as below :

this.barChartData = {
    labels: this.barchart_Labels,     
      datasets: [
        { data: this.dataset1, label: 'Label1', backgroundColor: [
          '#fc5858'        
        ] },
        { data: this.dataset2, label: 'Label2', backgroundColor: [
          '#19d863'        
        ], },
        { data: this.dataset3, label: 'Label3', backgroundColor: [         
          '#fdf57d'      
        ] }    
      ]     
    };

Upvotes: 1

Related Questions