View Full Version : Bar-chart: Bar color based on a value in the Store

28 Oct 2011, 5:03 AM
G'day everyone,

I'm working on a visualization in the form of a bar-chart. If the value is within the range, the bar has to be green. If the value is a bit out of it, it has to be orange. If the value is way over, the bar has to be red.
The color codes are provided in the store, since the calculation is processed by the backend.

I just can't find how to alter the color of individual bars based on a Store value. Can anyone help me out?

Thank you all.


7 Nov 2011, 7:03 AM

I have this code working for column series :

series: [{
type: 'column',
axis: 'left',
highlight: {
fill: '#255375',
stroke: '#fff'
stacked: true,
xField: ['n'],
yField: ['CA','MS'],
title: ['CA','MS'],
renderer: function(sprite, storeItem, barAttr, i, store) {
barAttr.fill = colors[i % 2];
return barAttr;

Colors is an array of colors using gradients in my case. But you will juste have to get your color from storeItem.data I guess.

colors: ['url(#v-1)', 'url(#v-2)']