how to keep the highligh on a bar chart? - extjs4

Question

var colors = ['url(#v-1)',
'url(#v-2)',
'url(#v-3)',
'url(#v-4)',
'url(#v-5)'];
var baseColor = '#eee';
Ext.define('Ext.chart.theme.Fancy', {
extend: 'Ext.chart.theme.Base',
constructor: function(config) {
this.callParent([Ext.apply({
axis: {
fill: baseColor,
stroke: baseColor
},
axisLabelLeft: {
fill: baseColor
},
axisLabelBottom: {
fill: baseColor
},
axisTitleLeft: {
fill: baseColor
},
axisTitleBottom: {
fill: baseColor
},
colors: colors
}, config)]);
}
});
var win = Ext.create('Ext.Panel', {
width: 1000,
height: 300,
hidden: false,
maximizable: true,
title: 'Column Chart',
renderTo: Ext.getBody(),
enableToggle: true,
pressed: true,
layout: 'fit',
items: {
id: 'chartCmp',
xtype: 'chart',
theme: 'Fancy',
animate: {
easing: 'bounceOut',
duration: 750
},
store: store,
background: {
fill: 'rgb(17, 17, 17)'
},
gradients: [
{
'id': 'v-1',
'angle': 0,
stops: {
0: {
color: 'rgb(212, 40, 40)'
},
100: {
color: 'rgb(117, 14, 14)'
}
}
},
{
'id': 'v-2',
'angle': 0,
stops: {
0: {
color: 'rgb(180, 216, 42)'
},
100: {
color: 'rgb(94, 114, 13)'
}
}
},
{
'id': 'v-3',
'angle': 0,
stops: {
0: {
color: 'rgb(43, 221, 115)'
},
100: {
color: 'rgb(14, 117, 56)'
}
}
},
{
'id': 'v-4',
'angle': 0,
stops: {
0: {
color: 'rgb(45, 117, 226)'
},
100: {
color: 'rgb(14, 56, 117)'
}
}
},
{
'id': 'v-5',
'angle': 0,
stops: {
0: {
color: 'rgb(187, 45, 222)'
},
100: {
color: 'rgb(85, 10, 103)'
}
}
}],
axes: [{
type: 'Numeric',
position: 'left',
fields: ['Quantidade'],
minimum: 0,
// maximum: 100,
label: {
renderer: Ext.util.Format.numberRenderer('0,0')
},
title: 'Numero de Processos',
grid: {
odd: {
stroke: '#555'
},
even: {
stroke: '#555'
}
}
}, {
type: 'Category',
position: 'bottom',
fields: 'Range',
title: 'Espaço temporal'
}],
series: [{
type: 'column',
axis: 'left',
highlight: true,
highlightCfg: {
fill: '#a2b5ca'
},
label: {
display: 'insideEnd',
'text-anchor': 'middle',
//Numero que aparece em cima da barra
field: 'Quantidade',
orientation: 'horizontal',
fill: '#fff',
font: '17px Arial'
},
renderer: function(sprite, storeItem, barAttr, i, store) {
barAttr.fill = colors[i % colors.length];
return barAttr;
},
style: {
opacity: 0.95
},
listeners: {
'itemmousedown': function(item) {
if(!flag) return flag;
flag = false;
var cmp = Ext.getCmp('chartCmp');
var series = cmp.series.get(0);
index = Ext.Array.indexOf(series.items, item);
selectionModel = grid.getSelectionModel();
selectedStoreItem = item.storeItem;
var as = selectedStoreItem.data.Range;
storeDadosFiltrados.proxy.extraParams.range = as;
storeDadosFiltrados.load();
}
},
xField: 'Range',
yField: ['Quantidade']
}]
},
renderTo:'grafico'
});
});
image of the chart--> http://alojaimagens.com/viewer.php?file=zz7slhsprnopuoui1mpv.jpg
I am selecting the first column, and i don't click it, just with the mouse over it. The higlight color is a variante of blue. But in the code i use itemmousedown, and i don't understand why the bar changed color only by passing by the mouse? how can i put it only highlight only in mouse click?

Answer 1

What about highlight: false?
If you just want the bar to be highlighted by a click, you should add a listener which highlights it on clicking the bar.