    /** * @class Ext.chart.series.Scatter * @extends Ext.chart.series.Cartesian * * Creates a Scatter Chart. The scatter plot is useful when trying to display more than two variables in the same visualization. * These variables can be mapped into x, y coordinates and also to an element's radius/size, color, etc. * As with all other series, the Scatter Series must be appended in the *series* Chart array configuration. See the Chart * documentation for more information on creating charts. A typical configuration object for the scatter could be: * *     @example *     Ext.create({ *        xtype: 'cartesian',  *        renderTo: document.body, *        width: 600, *        height: 400, *        insetPadding: 40, *        interactions: ['itemhighlight'], *        store: { *            fields: ['name', 'data1', 'data2'], *            data: [{ *                'name': 'metric one', *                'data1': 10, *                'data2': 14 *            }, { *                'name': 'metric two', *                'data1': 7, *                'data2': 16 *            }, { *                'name': 'metric three', *                'data1': 5, *                'data2': 14 *            }, { *                'name': 'metric four', *                'data1': 2, *                'data2': 6 *            }, { *                'name': 'metric five', *                'data1': 27, *                'data2': 36 *            }] *        }, *        axes: [{ *            type: 'numeric', *            position: 'left', *            fields: ['data1'], *            title: { *                text: 'Sample Values', *                fontSize: 15 *            }, *            grid: true, *            minimum: 0 *        }, { *            type: 'category', *            position: 'bottom', *            fields: ['name'], *            title: { *                text: 'Sample Values', *                fontSize: 15 *            } *        }], *        series: { *            type: 'scatter', *            highlight: { *                size: 12, *                radius: 12, *                fill: '#96D4C6', *                stroke: '#30BDA7' *            }, *            fill: true, *            xField: 'name', *            yField: 'data2', *            marker: { *                type: 'circle', *                fill: '#30BDA7', *                radius: 10, *                lineWidth: 0 *            } *        } *     }); * * In this configuration we add three different categories of scatter series. Each of them is bound to a different field of the same data store, * `data1`, `data2` and `data3` respectively. All x-fields for the series must be the same field, in this case `name`. * Each scatter series has a different styling configuration for markers, specified by the `marker` object. Finally we set the left axis as * axis to show the current values of the elements. * */Ext.define('Ext.chart.series.Scatter', {     extend: 'Ext.chart.series.Cartesian',     alias: 'series.scatter',     type: 'scatter',    seriesType: 'scatterSeries',     requires: [        'Ext.chart.series.sprite.Scatter'    ],     config: {        itemInstancing: {            fx: {                customDurations: {                    translationX: 0,                    translationY: 0                }            }        }    },     themeMarkerCount: function() {        return 1;    },     applyMarker: function (marker, oldMarker) {        this.getItemInstancing();        this.setItemInstancing(marker);        return this.callParent(arguments);    },     provideLegendInfo: function (target) {        var me = this,            style = me.getMarkerStyleByIndex(0),            fill = style.fillStyle;         target.push({            name: me.getTitle() || me.getYField() || me.getId(),            mark: (Ext.isObject(fill) ? fill.stops && fill.stops[0].color : fill) || style.strokeStyle || 'black',            disabled: me.getHidden(),            series: me.getId(),            index: 0        });    }});