View Full Version : Chart's losing label contrast after highlight

6 Sep 2012, 10:56 AM
Iíve built a complex system for displaying Ext Js 4 Charts and one of the last issues remaining is "when I highlight a chart element, it will lose contrast when itís not highlighted anymore." I made a short video showing what is happening.


After I take my mouse off any highlighted element, it will return the label's text back to the default black color, while the bar element returns to its predetermined color.

My code for creating the series is as follows, its integrated into a larger system so a few items in it will reference our theme objects. I also have a second similar issue, where i'm forcing charts to keep their highlights, and a similar problem is also occurring when I remove those highlights.

this.series = { type:'bar',
axis: 'bottom',
renderer: function(sprite, storeItem, barAttr, i, store) {
barAttr.fill = A3.charting.themeColors[i % A3.charting.themeColors.length];
return barAttr;
highlight: {
fill: A3.charting.highlightColor,
'stroke-width': 0,
lineWidth: 0,
segment: {
margin: 20
tips: {
trackMouse: true,
renderer: function(storeItem, item) {
this.setTitle(storeItem.get('displayName') + ': ' + storeItem.get('displayValue'));
label: {
display: 'insideEnd',
field: 'displayValue',
renderer: function(value) {
return value;
orientation: 'horizontal',
'text-anchor': 'middle',
font: '12px Arial',
contrast: true
style: {
'stroke-width': 0,
lineWidth: 0
xField: 'displayName',
yField: ['rawValue']

6 Sep 2012, 2:01 PM
Please verify that you are using 4.1.1 Final.

If this is the case, please provide a fully working example that we can use to duplicate this problem.


6 Sep 2012, 2:06 PM
I'll play with my code tomorrow and try to make a mini version. Hardest part will be breaking it out of the larger system and the ajax calls. Also I just upgraded to 4.1.1 from the download page today, so it should be final.

6 Sep 2012, 2:09 PM
You can use one of our online examples as a basis for the data and then provide the color scheme you used .. you have a few externals (A3) in your block for code.

6 Sep 2012, 2:13 PM
Well, the chart construction, placement and handling are all part of a larger system of Ajax calls, so to mimic what we're doing i'll have to run it from the dev machine, and capture/convert all the json calls to .js files with chrome. I'll have it ready once I get back to work in the morning.

7 Sep 2012, 8:03 AM
Also to mention, we're an IE8+, FireFox, iPad & Chrome shop, so we don't care about IE7- clients. Also we don't support compatibility mode. The sent in sample file was tested against IE9 & Chrome, and the issue was still present.