With the below stacked bar chart I'm seeing varrying behavior between IE8 and FF 9.0.1. In FF if you hover the cursor over stacked segments the highlighting works as expected, but on mouseout the highlight border is persisted with the color of the border being the color of the first bar segment. Not seeing the same in IE.
Is this a bug or am I configuring the highlight wrong?
Code:
Ext.widget('chart', {
renderTo: Ext.getBody()
, width: 260
, height: 60
, shadow: false
, legend: false
, store: {
fields: ['year', 'data1', 'data2', 'data3']
, data: [{
year: 1
, data1: 20
, data2: 30
, data3: 50
}]
}
, series: [{
type: 'bar'
, highlight: {
lineWidth: 3
, stroke: '#fff'
, opacity: 0.8
, color: '#fff'
}
, stacked: true
, xField: 'year'
, yField: ['data1', 'data2', 'data3']
, tips: {
trackMouse: true,
width: 65,
height: 28,
renderer: function (storeItem, item) {
this.setTitle(item.value[1]);
}
}
}]
})