/**
 * @class Ext.chart.interactions.Crosshair
 * @extend Ext.chart.interactions.Abstract
 * @alias interaction.crosshair
 *
 * The Crosshair interaction allows the user to get precise values for a specific point on the chart.
 * The values are obtained by single-touch dragging on the chart.
 *
 *     @example
 *     Ext.create('Ext.Container', {
 *         renderTo: Ext.getBody(),
 *         width: 600,
 *         height: 400,
 *         layout: 'fit',
 *         items: {
 *             xtype: 'cartesian',
 *             innerPadding: 20,
 *             interactions: {
 *                 type: 'crosshair',
 *                 axes: {
 *                     left: {
 *                         label: {
 *                             fillStyle: 'white'
 *                         },
 *                         rect: {
 *                             fillStyle: 'brown',
 *                             radius: 6
 *                         }
 *                     },
 *                     bottom: {
 *                         label: {
 *                             fontSize: '14px',
 *                             fontWeight: 'bold'
 *                         }
 *                     }
 *                 },
 *                 lines: {
 *                     horizontal: {
 *                         strokeStyle: 'brown',
 *                         lineWidth: 2,
 *                         lineDash: [20, 2, 2, 2, 2, 2, 2, 2]
 *                     }
 *                 }
 *             },
 *             store: {
 *                 fields: ['name', 'data'],
 *                 data: [
 *                     {name: 'apple', data: 300},
 *                     {name: 'orange', data: 900},
 *                     {name: 'banana', data: 800},
 *                     {name: 'pear', data: 400},
 *                     {name: 'grape', data: 500}
 *                 ]
 *             },
 *             axes: [{
 *                 type: 'numeric',
 *                 position: 'left',
 *                 fields: ['data'],
 *                 title: {
 *                     text: 'Value',
 *                     fontSize: 15
 *                 },
 *                 grid: true,
 *                 label: {
 *                     rotationRads: -Math.PI / 4
 *                 }
 *             }, {
 *                 type: 'category',
 *                 position: 'bottom',
 *                 fields: ['name'],
 *                 title: {
 *                     text: 'Category',
 *                     fontSize: 15
 *                 }
 *             }],
 *             series: {
 *                 type: 'line',
 *                 style: {
 *                     strokeStyle: 'black'
 *                 },
 *                 xField: 'name',
 *                 yField: 'data',
 *                 marker: {
 *                     type: 'circle',
 *                     radius: 5,
 *                     fillStyle: 'lightblue'
 *                 }
 *             }
 *         }
 *     });
 */
 
/**
 * @cfg {Object} axes 
 * Specifies label text and label rect configs on per axis basis or as a single config for all axes.
 *
 *     {
 *         type: 'crosshair',
 *         axes: {
 *             label: { fillStyle: 'white' },
 *             rect: { fillStyle: 'maroon'}
 *         }
 *     }
 *
 * In case per axis configuration is used, an object with keys corresponding
 * to the {@link Ext.chart.axis.Axis#position position} must be provided.
 *
 *     {
 *         type: 'crosshair',
 *         axes: {
 *             left: {
 *                 label: { fillStyle: 'white' },
 *                 rect: {
 *                     fillStyle: 'maroon',
 *                     radius: 4
 *                 }
 *             },
 *             bottom: {
 *                 label: {
 *                     fontSize: '14px',
 *                     fontWeight: 'bold'
 *                 },
 *                 rect: { fillStyle: 'white' }
 *             }
 *         }
 *
 * If the `axes` config is not specified, the following defaults will be used:
 * - `label` will use values from the {@link Ext.chart.axis.Axis#label label} config.
 * - `rect` will use the 'white' fillStyle.
 * @accessor
 */
 
/**
 * @cfg {Object} lines 
 * Specifies attributes of horizontal and vertical lines that make up the crosshair.
 * If this config is missing, black dashed lines will be used.
 *
 *     {
 *         horizontal: {
 *             strokeStyle: 'red',
 *             lineDash: [] // solid line
 *         },
 *         vertical: {
 *             lineWidth: 2,
 *             lineDash: [15, 5, 5, 5]
 *         }
 *     }
 *
 * @accessor
 */
 
/**
 * @cfg {String} [gesture='drag']
 * Specifies which gesture should be used for starting/maintaining/ending the interaction.
 * @accessor
 */