I've been working with Chart.js in an Ionic2 and Angular2 hybrid app to create a stacked bar graph. However, I'm facing an issue where I can't seem to change the background color or fill color of the bars in the graph. Despite trying out all the examples and configurations provided on Chart.js documentation, the bars always end up defaulting to red and blue colors.
Here's a snippet of my code:
barChartOptions:any = {
responsive: true,
scales: {
xAxes: [{
categoryPercentage: 0.6,
barPercentage: 1.0,
stacked: true,
ticks: {
beginAtZero: true
},
gridLines: {
color: "rgba(255,255,255,1.0)",
zeroLineColor: "rgba(254,254,254, 1.0)"
}
}],
yAxes: [{
display: false,
ticks: {
beginAtZero: true
}
}]
},
legend: {
display: false,
}
};
barChartLabels:string[] = ['2006', '2007', '2008', '2009', '2010', '2011', '2012'];
barChartType:string = 'bar';
barChartLegend:boolean = false;;
barChartData:any[] = [
{
fillColor:'rgba(255, 99, 132, 0.2)',
borderColor: "rgba(10,150,132,1)",
borderWidth: 5,
data: [65, 59, 80, 81, 56, 55, 40],
},
{
backgroundColor: '#61ae37',
data : [190,150,125,185,150,135,175]
}
];
The main problem lies within the fillColor and backgroundColor fields of the barChartData object.
I've attempted various other configurations from the documentation as well:
data: [12, 19, 3, 5, 2, 3],
backgroundColor: [
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)',
'rgba(75, 192, 192, 0.2)',
'rgba(153, 102, 255, 0.2)',
'rgba(255, 159, 64, 0.2)'
],
borderColor: [
'rgba(255,99,132,1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)',
'rgba(153, 102, 255, 1)',
'rgba(255, 159, 64, 1)'
],
borderWidth: 1
Despite being able to change the border width, the border color remains unchanged. Additionally, I've experimented with the rectangle configuration but no luck there either.
The original code example I started with was this:
var data = {
labels: ["January", "February", "March", "April", "May", "June", "July"],
datasets: [
{
label: "My First dataset",
backgroundColor: "rgba(255,99,132,0.2)",
borderColor: "rgba(255,99,132,1)",
borderWidth: 1,
hoverBackgroundColor: "rgba(255,99,132,0.4)",
hoverBorderColor: "rgba(255,99,132,1)",
data: [65, 59, 80, 81, 56, 55, 40],
}
]
};
I suspect there might be some default configuration overriding my settings. Any assistance would be highly appreciated.