6. Background Color Conditional Colors | Chart JS Background Color Series

Conditional background colors based on values in Chart js

A common theme in Chart js is having conditional colors based values. This means for example if a value would be negative we convert the color to red and if it is positive the bar needs to be green. Doing this can be tricky if you would in the data block which contains the datasets, read and watch the video in getting started with Chart.js page.

However the moment you are able place the functionality independent from the dataset object it becomes easier. Of course they are connected with each other and understanding the array push method is crucial here.

This video show you how to make an array and creating a function and combining it with the dataset to draw the color based on value.