ExtJS Bar Chart x-axis to be distributed uniformly.

[VedvratSharma]

Hi,

Context:
I am using a ExtJS Bar chart for my project. The ExtJS version is 4.1.1a.

Problem:
The x-axis chart numbering should be proper.

Not Uniform.png
In the above chart, 0(Zero) - spans to 2 columns. 1 - spans 5 columns, 2 - spans 4 columns
Ideally, there needs to be only one column span for 0, 1 & 2.

The chart works fine if the values are increased above 2
uniform.png
ISSUE : The chart needs to behave/distribute uniformly across all the scenarios.

Code:
Have attached the Code used for the same:

Ext.chart.theme.White = Ext.extend(Ext.chart.theme.Base, {
            constructor: function() {
               Ext.chart.theme.White.superclass.constructor.call(this, {
                   axis: {
                       stroke: 'rgb(8,69,148)',
                       'stroke-width': 1
                   },
                   axisLabel: {
                       fill: 'rgb(8,69,148)',
                       font: '12px Lucida Grande',
                       'font-family': 'Arial, Helvetica, sans-serif',
                       spacing: 2,
                       padding: 5,
                       renderer: function(v) { return v; }
                   },
                   axisTitle: {
                      font: 'bold 18px Lucida Grande'
                   }
               });
            }
    });

    var colors = ['rgb(158, 195, 222)'];
    Ext.chart.theme.Browser = Ext.extend(Ext.chart.theme.Base, {
        constructor: function(config) {
            Ext.chart.theme.Base.prototype.constructor.call(this, Ext.apply({
                colors: colors
            }, config));
        }
    });

barChart = Ext.create('Ext.chart.Chart',{
        renderTo: 'contentTab10',
        id: 'chartCmp',
        xtype: 'chart',
        width: 400,
        height: 110,
        animate: true,
        store: storeIDMgmt,
        theme: 'Browser:gradients',
        style:{            
            marginLeft: '25px',
            marginTop: '-7px'
        },
        axes: [{
            type: 'Numeric',
            position: 'bottom',
            fields: ['data1'],
            grid: true,
            label: {
                renderer: Ext.util.Format.numberRenderer('0,0')
            },
            minimum: 0
        }, {
            type: 'Category',
            position: 'left',
            fields: ['name'],
            label: {
               style:{
                    font:'bold 11px Arial',
                    whiteSpace:'normal'                    
               }
            }
        }],
        series: [{
            type: 'bar',
            axis: 'bottom',
            xField: 'name',
            yField: 'data1',
            highlight: true,
            tips: {
                  trackMouse: true,
                  width: 250,
                  height: 28,
                  renderer: function(storeItem, item) {
                    this.setTitle(storeItem.get('name') + ': ' + storeItem.get('data1') + ' Users');
                  }
                },
            label: {
                display: 'insideEnd',
                field: 'data1',
                renderer: Ext.util.Format.numberRenderer('0'),
                orientation: 'horizontal',
                color: '#333',
               'text-anchor': 'middle'
            },
                xField: 'name',
                yField: ['data1']
        }]
    });
    }

It will be a great help if a solution that helps the chart to distribute x-axis(single column) uniformly across the above mentioned scenarios can be achieved. Please help me with the code change.

Thanks,
Vedvrat

[mitchellsimoens]

In your series, be careful of using duplicate configs, you have two xField and two yField and may lead to confusing. Last one wins.

So currently it works good if things increment by two but you want labels like the first image?

[VedvratSharma]

Thanks for pointing out the duplicate xfield, yfield.

Yes, i need a uniform label spread.
So ideally it should be a unique label not a repeatation of labels as displayed in first image.

[trebor]

Any resolution on this - seeing same problem in 4.2.0

thanks