Black Lives Matter. Please consider donating to Black Girls Code today.

Apply colors dynamically to bars in barchart

Is it possible to apply color to the barchart based on the value of data.
I would like to make some bars blue and some red. But the coloring needs to be based on the value in data array. The array size could be large so I don’t want to hardcode the array with colors.

26%20PM

If in data object, the value of a field is “true” then bar needs to be blue and else it needs to be red.
The way I am applying color currently is :
constructor(props) {
super(props);
this.state = {
defaultColor: ‘#1984CD’,
currentColorsArray: ‘#1984CD’,
startTime: ‘1493374820’,
endTime:‘1530947227’,
showSummaryPanel: false
}
const data= [{
x:x,
y:y,
type: ‘bar’,
marker: { color: this.state.currentColorsArray },
name: ‘number of days’,
text: this.getHoverInfo(),
hoverInfo: ‘text’
}];

How should I apply to the condition ?

You can use local variable for this and assign the color based on condition it’s basic programming ie
let markerColor = ‘someDefaultColor’;
if(condition){
markerColor = ‘someOtherColor’
}
then in trace object set
{
x:x,
y:y,
type: ‘bar’,
marker: { color: markerColor},
name: ‘number of days’,
text: this.getHoverInfo(),
hoverInfo: ‘text’
}