Set maximum bar width in ExtJS 4 column chart?

[renganathan]

Hi All,


I have a 250px wide column chart, it looks great when there are 10+ items in the series, but when there's only 2-3, the bars are drawn really wide, which looks somewhat odd.

_____
| |
| |
-----|-----
I can set the width in the series config:

{
style: { width: 25 }
}
This works, but the thinner bars are still left-aligned with their previous position, so they don't match up with the axis tick and label.
Like so:

_
| |
| |
-----|-----
I don't want to change the axis spacing, I want to end up with widely-spaced, 25px bars (that are correctly centered on the axis tick):

_
| |
| |
-----|-----
Any ideas?

[scottmartin]

What version of ExtJS are you using? I recall reporting this issue and it was corrected.

Regards,
Scott.

[renganathan]

What version of ExtJS are you using? I recall reporting this issue and it was corrected.

Regards,
Scott.

Extjs4.1

[scottmartin]

See if this is working as expected:

Ext.require('Ext.chart.*');
 
Ext.onReady(function() {
 
 var store = Ext.create('Ext.data.JsonStore', {
    fields: ['name', 'data1'],
    data: [
    { 'name': 'metric one',   'data1': 25},
    { 'name': 'metric two',   'data1': 14}
    ]
});
 
var mychart = Ext.create('Ext.chart.Chart', {
    renderTo: Ext.getBody(),
    width: 300,
    height: 300,
    store: store,

    legend: true,
    axes: [
        {
            type: 'Numeric',
            position: 'left',
            fields:  'data1',
            title: 'Sample Values',
			minimum:0,
        },
        {
            type: 'Category',
            position: 'bottom',
            fields: 'name',
            title: 'Sample Metrics',
 
        }
    ],
    series: [{
        type: 'column',
        axis: 'left',
        xField: 'name',
        yField: 'data1',
		style:{
			width:'30',
		},
		 label: {
            field:'data1',
            renderer: Ext.util.Format.numberRenderer('0'),
        },
 
    }]
});
});

f210589.png

Regards,
Scott.

[ajeetsingh85]

Thanks Scott for your valuable help.....the width is reduced but the bar is aligned in left most that is not matching with X-Axis lables.. see screenshotdashboard_chart.png
Any help will be appreciated

[scottmartin]

Can you provide a small working example, or modify my example to display your problem?

Scott.

[ajeetsingh85]

I executed your code in .php file......
It is giving below greaph....graph_error_Scott.png

[scottmartin]

@ajeetsingh85 . what version exact version of ExtJS4, as this was corrected in a previous version.

Scott.

[ajeetsingh85]

@ajeetsingh85 . what version exact version of ExtJS4, as this was corrected in a previous version.

Scott.

I am using Ext JS 4.1

[scottmartin]

I am using Ext JS 4.1

But there are numerous releases of 4.1. Have you tried 4.1.1 RC2?
http://www.sencha.com/forum/showthre...-Now-Available

Scott.