PDA

View Full Version : Column chart alignment problem



vajrakumar.d
24 Aug 2011, 9:46 PM
Hello all,

i am using column chart first time,
everything is working fine but the columns are not coming exactly above the x-axis headers, all the columns are miss-aligned, i don't know how to make them to align center or exactly above the headers.
Like 'E-S','V-S', 'L-S' columns aligned far right, 'E-F','V-F','L-F' columns aligned litle right, 'E-P','V-P','L-P' columns aligned litle left & 'E-IP','V-IP','L-IP' aligned far left the x-axis ticks.

please help.

I have attached screen shpt with this post & my code is pasted below.

Red color circles in attached screenshot will show the miss alignment of columns.
Actually the columns should come on 'E-S' , 'V-S', 'L-S' respectively.



xtype: 'columnchart',
store: chartStore,


url:'SWF/charts.swf',
xField: 'activity',
xAxis: new Ext.chart.CategoryAxis({
// title: 'Activity-Status'
title:xAxisTitle
}),
yAxis: new Ext.chart.NumericAxis({
displayName: 'Number of Records',
title:'Number of Records',


labelRenderer : Ext.util.Format.numberRenderer('0,0')
}),
chartStyle: {
padding: 10,
animationEnabled: true,
font: {
name: 'Tahoma',
color: 0x444444,
size: 11
},
dataTip: {
padding: 5,
border: {
color: 0x99bbe8,
size:1
},
background: {
color: 0xDAE7F6,
alpha: .9
},
font: {
name: 'Tahoma',
color: 0x15428B,
size: 10,
bold: true
}
},
xAxis: {
color: 0x69aBc8,
majorTicks: {color: 0x69aBc8, length: 4},
minorTicks: {color: 0x69aBc8, length: 2},
majorGridLines: {size: 1, color: 0xeeeeee}
},
yAxis: {
color: 0x69aBc8,
majorTicks: {color: 0x69aBc8, length: 4},
minorTicks: {color: 0x69aBc8, length: 2},
majorGridLines: {size: 1, color: 0xdfe8f6},
titleRotation : -90

}
}
,series: [{yField : 'S',
displayName : 'Success',
style : {
fillColor : 0x01FB1E,
borderColor : 0x0B8B1A,
lineColor : 0x0B8B1A
}
},{yField : 'F',
displayName : 'Failed',
style : {
fillColor : 0xF60C18,
borderColor : 0x8B0B1A,
lineColor : 0x8B0B1A
}
},{yField : 'P',
displayName : 'Pending',
style : {
fillColor : 0xB4B4B3,
borderColor : 0x060606,
lineColor : 0x060606
}
},{yField : 'IP',
displayName : 'In-Process',
style : {
fillColor : 0xe8bd00,
borderColor : 0xe8bd00,
lineColor : 0xe8bd00
}
}
]