Angular 4: Different color for bar in bar chart dynamically using ChartJS

Question

I want to set different colors for each bars in my bar chart. I get the color from back end api.

I tried:

<div>
  <div style="display: block">
    <canvas class="dashboard-tile-chart" baseChart
            [datasets]="barChartData"
            [labels]="barChartLabels"
            [options]="barChartOptions"
            [colors]="barChartColors"
            [legend]="barChartLegend"
            [chartType]="barChartType"
            (chartHover)="chartHovered($event)"
            (chartClick)="chartClicked($event)"></canvas>
  </div>
</div>

.componenet.ts

export class BarGraphComponent implements OnInit {

    // initially setting some dummy colors: this works.
    public barChartColors: Array<any> = [{
        backgroundColor: [
           '#5cb85c',
           '#65C6BB',
           '#1BBC9B',
           '#f0ad4e',
           '#d9534f',
           '#5cb85c',
           '#f0ad4e'
        ]
    }];

    // but when I try to set the colors dynamically like below it's not working. Dummy colors that I initially set are still showing
    setGraphData() {
        const colors = [];
        this.vitalValues.forEach(value => {
            colors.push(value.color);
        });
        console.log('colors------');
        console.log(colors);
        const barColors: Array<any> = [{
            backgroundColor: colors
        }];

        this.barChartColors = barColors;
    }
}

Any help is appreciated..

Liyaquet Hussain Liyaquet Hussain · Accepted Answer · 2017-07-12T13:05:41

Can you try with

public barChartColors: Array<any> = 
        [
           '#5cb85c',
           '#65C6BB',
           '#1BBC9B',
           '#f0ad4e',
           '#d9534f',
           '#5cb85c',
           '#f0ad4e'
        ];

Angular 4: Different color for bar in bar chart dynamically using ChartJS

1 Answers