/** * @class Ext.chart.interactions.CrossZoom * @extend Ext.chart.interactions.Abstract * @alias interaction.crosszoom * * The CrossZoom interaction allows the user to zoom in on a selected area of the chart. * * @example * Ext.create({ * xtype: 'cartesian', * renderTo: Ext.getBody(), * width: 600, * height: 400, * insetPadding: 40, * interactions: 'crosszoom', * store: { * fields: ['name', 'data1', 'data2', 'data3', 'data4', 'data5'], * data: [{ * 'name': 'metric one', * 'data1': 10, * 'data2': 12, * 'data3': 14, * 'data4': 8, * 'data5': 13 * }, { * 'name': 'metric two', * 'data1': 7, * 'data2': 8, * 'data3': 16, * 'data4': 10, * 'data5': 3 * }, { * 'name': 'metric three', * 'data1': 5, * 'data2': 2, * 'data3': 14, * 'data4': 12, * 'data5': 7 * }, { * 'name': 'metric four', * 'data1': 2, * 'data2': 14, * 'data3': 6, * 'data4': 1, * 'data5': 23 * }, { * 'name': 'metric five', * 'data1': 27, * 'data2': 38, * 'data3': 36, * 'data4': 13, * 'data5': 33 * }] * }, * 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: 'line', * highlight: { * size: 7, * radius: 7 * }, * style: { * stroke: 'rgb(143,203,203)' * }, * xField: 'name', * yField: 'data1', * marker: { * type: 'path', * path: ['M', - 2, 0, 0, 2, 2, 0, 0, - 2, 'Z'], * stroke: 'blue', * lineWidth: 0 * } * }, { * type: 'line', * highlight: { * size: 7, * radius: 7 * }, * fill: true, * xField: 'name', * yField: 'data3', * marker: { * type: 'circle', * radius: 4, * lineWidth: 0 * } * }] * }); *//** * @cfg {Object/Array} [axes=true] * Specifies which axes should be made navigable. The config value can take the following formats: * * - An Object whose keys correspond to the {@link Ext.chart.axis.Axis#position position} of each * axis that should be made navigable. Each key's value can either be an Object with further * configuration options for each axis or simply `true` for a default set of options. * { * type: 'crosszoom', * axes: { * left: { * maxZoom: 5, * allowPan: false * }, * bottom: true * } * } * * If using the full Object form, the following options can be specified for each axis: * * - minZoom (Number) A minimum zoom level for the axis. Defaults to `1` which is its natural size. * - maxZoom (Number) A maximum zoom level for the axis. Defaults to `10`. * - startZoom (Number) A starting zoom level for the axis. Defaults to `1`. * - allowZoom (Boolean) Whether zooming is allowed for the axis. Defaults to `true`. * - allowPan (Boolean) Whether panning is allowed for the axis. Defaults to `true`. * - startPan (Boolean) A starting panning offset for the axis. Defaults to `0`. * * - An Array of strings, each one corresponding to the {@link Ext.chart.axis.Axis#position position} * of an axis that should be made navigable. The default options will be used for each named axis. * * { * type: 'crosszoom', * axes: ['left', 'bottom'] * } * * If the `axes` config is not specified, it will default to making all axes navigable with the * default axis options. * @accessor */