Scatter Chart problem upon adding min and max values

[chaimon]

REQUIRED INFORMATION
Ext version tested:

• Ext 4.0.7

Browser versions tested against:

• Chrome 17.0.963.79 m
• FF 10.02 (firebug 1.9.1 installed)

DOCTYPE tested against:

• xhtml11.dtd

Description:

• On Scatter Chart, once adding minimum and/or maximum axes values the x position of the circle always starts from minimum value and ends at the maximum value, causing the circle to appear on the wrong position, the y position is working as expected.

Steps to reproduce the problem:

• Just run the Scatter Chart with any data and try to change the minimum and maximum values see that the circles x position is always set to the changed values and not to the real value

The result that was expected:

• A gap from left and right, top and bottom

The result that occurs instead:

• The gap appears only at the top and bottom

Test Case:

// store data    
data.push({name: "first", data1: 100, data2: 70, data3: 10, data4: "#f00"});    
data.push({name: "second", data1: 130, data2: 150, data3: 20, data4: "#0f0"});    
data.push({name: "third", data1: 220, data2: 220, data3: 10, data4: "#00f"});    
data.push({name: "forth", data1: 120, data2: 150, data3: 25, data4: "#f0f"});        
/* LEGEND: */    
/*    
name = name (any text)    
data1 = xpos    
data2 = ypos    
data3 = circle radius    
data4 = circle color    
*/        

Ext.require('Ext.chart.*');    
Ext.require(['Ext.Window', 'Ext.fx.target.Sprite', 'Ext.layout.container.Fit']);    
Ext.onReady(function () {                
      var chart = Ext.create('Ext.chart.Chart', {           
      id: 'chartCmp',            
      animate: true,            
      store: store1,
      smooth: true,            
      style: 'background:#FFF',            
      insetPadding: 10,                        
      axes: [{
                    type: 'Numeric',
                    title: 'Application Quality',
                    position: 'left',
                    fields: ['data2'],
                    grid: true,
                    minorTickSteps: 1,
                    minimum: 0,
                    maximum: 300
                 }, {
                    type: 'Numeric',
                    title: 'Rating',
                    position: 'bottom',
                    fields: ['data1'],
                    grid: true,
                    minimum: 0, 
                   maximum: 300
             }],            
       series: [{
                type: 'scatter',
                axis: 'left',
                xField: 'data1',
                yField: 'data2',
                highlight: false,
                tips: {
                    trackMouse: true,
                    width: 60,
                    height: 28,
                    renderer: function(storeItem, item) {
                        this.setTitle(storeItem.get('data1') + "/" + storeItem.get('data2'));
                    }
                },
                markerConfig: {
                    type: 'circle',
                    radius: 20,//default radius
                },
                //renderer: calcRadius('data3')
            }]
        });
        var win = Ext.create('Ext.Window', {
            id: 'myWin',
            width: 400,
            height: 400,
            hidden: false,
            maximizable: true,
            title: '-- Scatter Chart Renderer --',
            renderTo: Ext.getBody(),
            layout: 'fit',
            items: [chart]
        });
    });

HELPFUL INFORMATION
Screenshot or Video:

• no added values
  no_added_values.png
• with added values
  with_added_values.png
  note that x pos of red and purple remained the same but the y pos was changed as expected

Debugging already done:
none
Possible fix:
not provided
Additional CSS used:
only default ext-all.css
Operating System:
win7 64bit

[mitchellsimoens]

Can you check against 4.1.0 RC1?

[chaimon]

Checked it, same problem...
10x

[cmonster]

any fix/workaround for this? thanks.