/**
 * @class Ext.chart.series.Line
 * @extend Ext.chart.series.Cartesian
 * @alias series.line
 *
 * Creates a Line Chart. A Line Chart is a useful visualization technique to display quantitative information for different
 * categories or other real values (as opposed to the bar chart), that can show some progression (or regression) in the dataset.
 * As with all other series, the Line Series must be appended in the *series* Chart array configuration. See the Chart
 * documentation for more information.
 *
 *     @example packages=[charts,reactor]
 *     import React, { Component } from 'react';
 *     import { Container } from '@extjs/ext-react';
 *     import { Cartesian } from '@extjs/ext-react-charts';
 *
 *     export default class MyExample extends Component {
 *
 *        store = new Ext.data.Store({
 *             fields: ['name', 'data1', 'data2', 'data3'],
 *             data: [
 *                 { name: 'metric one', data1: 14, data2: 19 },
 *                 { name: 'metric two', data1: 16, data2: 7 },
 *                 { name: 'metric three', data1: 11, data2: 25 },
 *                 { name: 'metric four', data1: 6, data2: 4 },
 *                 { name: 'metric five', data1: 36, data2: 12 }
 *             ]
 *        })
 *
 *        render() {
 *            return (
 *                 <Cartesian
 *                     store={this.store}
 *                     interactions={['rotate']}
 *                     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',
 *                        style: {
 *                            stroke: '#30BDA7',
 *                            lineWidth: 2
 *                        },
 *                        xField: 'name',
 *                        yField: 'data1',
 *                        marker: {
 *                            type: 'path',
 *                            path: ['M', - 4, 0, 0, 4, 4, 0, 0, - 4, 'Z'],
 *                            stroke: '#30BDA7',
 *                            lineWidth: 2,
 *                            fill: 'white'
 *                        }
 *                     }, {
 *                        type: 'line',
 *                        fill: true,
 *                        style: {
 *                            fill: '#96D4C6',
 *                            fillOpacity: .6,
 *                            stroke: '#0A3F50',
 *                            strokeOpacity: .6,
 *                        },
 *                        xField: 'name',
 *                        yField: 'data2',
 *                        marker: {
 *                            type: 'circle',
 *                            radius: 4,
 *                            lineWidth: 2,
 *                            fill: 'white'
 *                        }
 *                    }]}
 *                 />
 *            )
 *        }
 *     }
 */
 
/**
 * @cfg {Number} [selectionTolerance=20]
 * The offset distance from the cursor position to the line series to trigger
 * events (then used for highlighting series, etc).
 * @accessor
 */
 
/**
 * @cfg {Object} style 
 * An object containing styles for the visualization lines. These styles will override the theme styles.
 * Some options contained within the style object will are described next.
 * @accessor
 */
 
/**
 * @cfg {Boolean} [smooth=false]
 * `true` if the series' line should be smoothed.
 * Line smoothing only works with gap-less data.
 * @accessor
 */
 
/**
 * @cfg {Boolean} [step=false]
 * If set to `true`, the line uses steps instead of straight lines to connect the dots.
 * It is ignored if `smooth` is true.
 * @accessor
 */
 
/**
 * @cfg {"gap"/"connect"/"origin"} [nullStyle="gap"]
 * Possible values:
 * 'gap' - null points are rendered as gaps.
 * 'connect' - non-null points are connected across null points, so that
 * there is no gap, unless null points are at the beginning/end of the line.
 * Only the visible data points are connected - if a visible data point
 * is followed by a series of null points that go off screen and eventually
 * terminate with a non-null point, the connection won't be made.
 * 'origin' - null data points are rendered at the origin,
 * which is the y-coordinate of a point where the x and y axes meet.
 * This requires that at least the x-coordinate of a point is a valid value.
 * @accessor
 */
 
/**
 * @cfg {Boolean} [fill=undefined]
 * If set to `true`, the area underneath the line is filled with the color defined as follows, listed by priority:
 * - The color that is configured for this series ({@link Ext.chart.series.Series#colors}).
 * - The color that is configured for this chart ({@link Ext.chart.AbstractChart#colors}).
 * - The fill color that is set in the {@link #style} prop.
 * - The stroke color that is set in the {@link #style} prop, or the same color as the line.
 *
 * Note: Do not confuse `series.config.fill` (which is a boolean) with `series.style.fill' (which is an alias
 * for the `fillStyle` property and contains a color). For compatibility with previous versions of the API,
 * if `config.fill` is undefined but a `style.fill' color is provided, `config.fill` is considered true.
 * So the default value below must be undefined, not false.
 * @accessor
 */