Bar chart color depending on the value.

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.

[kluplau]

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/

[BVazquezAlvarez]

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/