View Full Version : Fixed height for bars in a bar-chart

6 Dec 2011, 12:26 AM
Whenever bar charts are used the behavior is to stretch their heights to fill the available space. I could not find any information on how to set static height for bars. The issue is that if there are just a few bars their height will be enormous.

Is it possible to have static height for bars? I imagine that if the total height of bars is too high then the chart would be scroll-able.

The chart is added to a panel that has layout 'fit'.

6 Dec 2011, 5:16 AM
I have found a solution that I have not tested yet:


The discussion is for ExtJS 3 and I guess it applies to ExtJS 4 as well. Will report whether this works first thing today when I get to the studio.

6 Dec 2011, 9:44 AM
This sadly does not apply to ExtJS4.

7 Dec 2011, 6:38 AM
Although I don't need this anymore (I re-thought logic in the application completely) there a possibility to make this work by using a custom renderer. Taking queues from the sample bar chart example you can alter the renderer and add "height" to "attr":

series: [{
type: 'bar',
axis: 'bottom',
label: {
display: 'insideEnd',
field: 'data1',
renderer: Ext.util.Format.numberRenderer('0'),
orientation: 'horizontal',
color: '#333',
'text-anchor': 'middle',
contrast: true
xField: 'name',
yField: ['data1'],
//color renderer
renderer: function(sprite, record, attr, index, store) {
var fieldValue = Math.random() * 20 + 10;
var value = (record.get('data1') >> 0) % 5;
var color = ['rgb(213, 70, 121)',
'rgb(44, 153, 201)',
'rgb(146, 6, 157)',
'rgb(49, 149, 0)',
'rgb(249, 153, 0)'][value];
return Ext.apply(attr, {
fill: color,
height: 30

The change alone is not enough as labels will be misplaced. But it's a start.

17 Feb 2012, 3:06 AM

The ability to set a max width of a bar in a chart would be great. Also a minimum width would be cool, when scrolling would be enabled.