PDA

View Full Version : [OPEN] [4.0.2a] Pie Chart with small value renders incorrectly in IE



mattgoldspink
21 Jun 2011, 1:58 AM
Hi,

If you use the below code in IE you'll notice that the value for H renders in completely the wrong location.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Charts</title>
<link rel="stylesheet" type="text/css" href="http://dev.sencha.com/deploy/ext-4.0.2a/resources/css/ext-all.css" />
<link rel="stylesheet" type="text/css" href="http://dev.sencha.com/deploy/ext-4.0.2a/examples/shared/example.css" />
<script type="text/javascript" src="http://dev.sencha.com/deploy/ext-4.0.2a/ext-all-debug.js"></script>
<script type="text/javascript">
Ext.require(['Ext.data.*']);
Ext.onReady(function() {
window.generateData = function(){
var data = [];
data.push({name:'A', data1:10812});
data.push({name:'B', data1:6786});
data.push({name:'C', data1:1696});
data.push({name:'D', data1:1649});
data.push({name:'E', data1:1275});
data.push({name:'F', data1:823});
data.push({name:'G', data1:445});
data.push({name:'H', data1:8});
return data;
};
window.store1 = Ext.create('Ext.data.JsonStore', {
fields: ['name', 'data1'],
data: generateData()
});
});
</script>
<script type="text/javascript">
Ext.onReady(function () {
store1.loadData(generateData());
var win = Ext.create('widget.window', {
layout: 'fit',
width: 850,
height: 650,
items: [{
xtype: 'chart',
animate: true,
store: store1,
theme: 'Base:gradients',
series: [{
type: 'pie',
field: 'data1',
label: {
field: 'name',
display: 'rotate'
}
}]
}]
});
win.show();
});
</script>
</head>
<body></body>
</html>

In Chrome I get:
http://www.sencha.com/forum/attachment.php?attachmentid=26660&d=1308650188
26660

and IE (8 in this case) you can see the grey bar for H in the top left:
http://www.sencha.com/forum/attachment.php?attachmentid=26659&d=1308650180
26659

dbradicich
7 Jul 2011, 10:26 AM
We have found that removing the shadow from the series seemed to make the problem less noticable, but still not ideal

shadowAttributes: [{ "stroke-width": 0 }],