Hello,
I’m doing a bar chart and I’d like that the bar with positive values had green color and red the negative values. I guess there must be a not so complicated solution for this because it’s a very logical request, but I can’t find it.
`var myChart = new Chart(ctx, {
type: ‘bar’,
data: {
labels: info.dates,
datasets: [{
label: info.label + ‘ ‘ + info.unit,
data: info.numbers,
backgroundColor: ‘green’,
borderWidth: 0,
fill: true,
pointRadius:0,
pointHitRadius: 10
}]
},
options: {
scales: {
xAxes:[{
ticks:{
},
gridLines:{
tickMarkLength: 10,
drawBorder: false,
display: false,
}
}],
yAxes:[{
gridLines:{
drawBorder: false,
display: false,
},
ticks: {
beginAtZero:true,
}
}]
}
}
});
`
Thanks a lot.
You can color each individual bar using an Array in backgroundColor.
Just loop through your elements and color each bar accordingly:
Fiddle-> https://jsfiddle.net/uq99110j/6/
The solution from @BVazquezAlvarez doesn’t tell you what the green means, because there is only a single dataset, and therefore a single legend.
You have to do it with two datasets, filter the data based on how the coloring should work, and then stack it like this: https://jsfiddle.net/Blueblau/wqs4c60o/