[Chartjs]-Chart.js Ionic 2 Angular2: Background color of bar graph not changing

by

12👍

✅

I figured out the issue. I am using ng2-charts and their configuration is just subtly different. They use a [colors] field in the html markup where you add the colors in. So, what you do is create an additional object in your .ts file for your colors OUTSIDE of your chart options object.

barChartColors: any [] =[
    {
        backgroundColor:'rgba(255, 99, 132, 1)',
        borderColor: "rgba(10,150,132,1)",
        borderWidth: 5
    },
    {
        backgroundColor:'rgb(97 174 55, 1 )',
        borderColor: "rgba(10,150,132,1)",
        borderWidth: 5,
    }
]

And in the markup it looks like this:

<base-chart class="chart"
           [datasets]="barChartData"
           [labels]="barChartLabels"
           [options]="barChartOptions"
           [colors]="barChartColors" <-----this is the kicker
           [legend]="barChartLegend"
           [chartType]="barChartType"
           [responsive]='false'
           (chartHover)="chartHovered($event)"
           (chartClick)="chartClicked($event)">

           </base-chart>

Leave a comment