Chartjs-How to change the default barchart colour in chart.JS and angular 7?

by

1đź‘Ť

Just change the backgroundColor.
Use an extra variable for data and options so you can access them easily.

I made you an example where you can change the colors dynamically.

If you want to change them once at the start it’s much easier.

1đź‘Ť

Added [colors]=”barChartColors” in html & define colors in barChartColors.

Typescript

public barChartColors: any [] =[
    {
        backgroundColor:'#91ebda',
        //borderColor: "rgba(10,150,132,1)",
       // borderWidth: 5
    },
    {
        backgroundColor:'rgb(97 174 55, 1 )',
       // borderColor: "rgba(10,150,132,1)",
       // borderWidth: 5,
    }
]

html

<canvas baseChart [datasets]="barChartData"
            [labels]="barChartLabels"
            [options]="barChartOptions"
            [legend]="barChartLegend"
            [chartType]="barChartType"
            [colors]="barChartColors"
    (chartClick)="chartClicked($event)"></canvas>

Chart.js Ionic 2 Angular2: Background color of bar graph not changing

Leave a comment