View Full Version : Limit the width of each column in a column chart

19 Aug 2012, 5:13 AM
I have a column chart...however when I insert one column alone....it stretches all over the width of the chart....
Now it makes sense that the columns get more narrow as the number of columns on a fixed width grows...however I would like to limit the column's width to a minimum width, so that it won't get to wide every time it has a wider space to spread over...

this is the column :

var trendsChart = Ext.create('Ext.chart.Chart', { renderTo: Ext.getBody(),
id: 'trendsChart',
width: 500,
height: 300,
style: 'background:#fff',
animate: true,
store: Ext.getStore('d_barStore'),
//legend: {
// position: 'right'
// },
axes: [{
type: 'Numeric',
position: 'left',
fields: ['Total'],
minimum: 0,
label: {
renderer: Ext.util.Format.numberRenderer('0,0')
grid: true,
title: 'Total',

}, {
type: 'Category',
position: 'bottom',
fields: ['group'],
title: 'Alert'
series: [
type: 'column',
axis: 'left',
highlight: true,
tips: {
trackMouse: true,
width: 200,
height: 40,
renderer: function(storeItem, item) {
this.setTitle(storeItem.get('rule')+":\n High:"+storeItem.get('High')+", Medium:"+storeItem.get('Medium')+", Low:"+ storeItem.get('Low') );
//var scoreType = (item.attr.fill=='rgb(173, 51, 51)'? "High" : (item.attr.fill=="rgb(129, 160, 00)"? "Low":"Medium" ));
alertType = [storeItem.get('rule'),"None"]
label: {
display: 'insideEnd',
'text-anchor': 'middle',
field: 'Total',
renderer: Ext.util.Format.numberRenderer('0'),
orientation: 'horizontal',
color: '#000'
xField: 'group',
yField: 'Total'

Thanks :-)

20 Aug 2012, 12:54 PM
You can set the width:

series: [{
type: 'column',
axis: 'left',
xField: 'name',
yField: 'data1',
label: {
renderer: Ext.util.Format.numberRenderer('0'),



22 Aug 2012, 10:07 AM
Thanks for you help
I did just that...However it seems to only narrow the filling color...the grey shading and the number on top remained the same width
so now I get a half-colored bar...

any idea why?

It seems to be the right direction though...


22 Aug 2012, 10:43 AM
What version of ExtJS4 are you using? I recall this problem in earlier versions than 4.1.1


22 Aug 2012, 11:26 PM
I'm a licensed user and I don't quite know the version I've been using so far but it wasn't 4.1.1

now the manual says that in order to upgrade I need to extract the zip to my root (/var/www/) to a folder called extjs ....and I did however I don't see any change....is there anything I need to change in the Architect's settings in order for the upgrade to take effect?



22 Aug 2012, 11:47 PM
OK..I've now changed in the index.html file the paths to be root/extjs/ext-all-debug.js and the css file as well

Everything works fine but for the fact the the columns completely disappeared ...the pies remained great...

I checked for the store of the graph and it contains data...

any idea why it happened? or how I should have upgraded to 4.1.1 in a non hard coded way??



23 Aug 2012, 7:07 AM
So you are using Architect? The latest version should already support 4.1.1. So you see the options when you startup?


25 Aug 2012, 11:29 PM
Yes Scott...

I can see the option to start a new project with 4.1.1 environment ...

But my project is already written ...and when I open it it says it's a version of 4.0

Any idea of how to upgrade an existing project from 4.0 to 4.1 on Architect??

Thanks :-)

26 Aug 2012, 6:58 AM
Do you have the latest version if SA? 4.1 option ... you should be able to update in settings for project ... perhaps start 4.1 project to see setting changes.