Code:
var store = Ext.create('Ext.data.JsonStore', {
    fields: ['name', 'data1', 'data2', 'data3', 'data4', 'data5'],
    data: [
        { 'name': 'metric one',   'data1':5, 'data2':5, 'data3':20, 'data4':8,  'data5':13 },
        { 'name': 'metric two',   'data1':5,  'data2':4.5,  'data3':30, 'data4':10, 'data5':3  },
        { 'name': 'metric three', 'data1':1,  'data2':1,  'data3':2, 'data4':12, 'data5':7  },
        { 'name': 'metric four', 'data1':10,  'data2':10,  'data3':2, 'data4':12, 'data5':7  }
    ]
});


Ext.create('Ext.chart.Chart', {
    renderTo: Ext.getBody(),
    width: 500,
    height: 350,
    animate: true,
    store: store,
    theme: 'Base:gradients',
    series: [{
        type: 'scatter',
        xField: 'data1',
        yField: 'data2',
        highlight: true,
        renderer: function (sprite, record, attr, index, store) {
                return Ext.apply(attr, {
                    radius: record.get('data3')
                });
        },
        isItemInPoint: function(x, y, item) {
                    var point,
                        tolerance = item.sprite.attr.radius,
                        abs = Math.abs;

                    function dist(point) {
                        var dx = abs(point[0] - x),
                            dy = abs(point[1] - y);
                        return Math.sqrt(dx * dx + dy * dy);
                    }
                    point = item.point;
                    return dist(point)<= tolerance;
        }
    }]
});
isItemInPoint overrided to deal with another issue.
So there are two large bubbles in the center of the chart.
And when I move mouse cursor above intersection of the bubbles than lower one is highlighted. The same is about listeners. So as for me it is because series.Series.getItemForPoint method looks for first item for given coordinates. And if there are several such items(with different zIndex or even with same zIndex) it will lead to abnormal reaction.