import * as React from 'react';
import { FinancialChart } from './FinancialChart';
import { FinancialChartType } from './FinancialChartType';
import { IgrXYChart, IIgrXYChartProps } from './igr-xy-chart';
import { DataSeriesType } from "igniteui-react-core/ES2015/DataSeriesType";
import { FinancialChartVolumeType } from './FinancialChartVolumeType';
import { FinancialChartXAxisMode } from './FinancialChartXAxisMode';
import { FinancialChartYAxisMode } from './FinancialChartYAxisMode';
import { HorizontalAlignment } from "igniteui-react-core/ES2015/HorizontalAlignment";
import { AxisLabelsLocation } from './AxisLabelsLocation';
import { FinancialChartZoomSliderType } from './FinancialChartZoomSliderType';
import { FinancialIndicatorTypeCollection } from './igr-financial-indicator-type-collection';
import { FinancialOverlayTypeCollection } from './igr-financial-overlay-type-collection';
import { IndicatorDisplayTypeCollection } from './igr-indicator-display-type-collection';
import { FinancialChartRangeSelectorOptionCollection } from './igr-financial-chart-range-selector-option-collection';
import { FinancialChartCustomIndicatorArgs } from './igr-financial-chart-custom-indicator-args';
import { CustomIndicatorNameCollection } from './igr-custom-indicator-name-collection';
import { IgCollection } from "igniteui-react-core/ES2015/IgCollection";
export declare class IgrFinancialChart extends IgrXYChart<IIgrFinancialChartProps> {
    private _container;
    private _defaultTemplates;
    private _height;
    private _width;
    private _mainGridElement;
    private _toolbarTemplateComponent;
    private _sliderPortal;
    private _mainElement;
    render(): React.DetailedReactHTMLElement<{
        key: string;
        children: any[];
        ref: (t: any) => void;
    }, any>;
    protected _tooltipRef(t: any): void;
    protected _toolbarRef(t: any): void;
    protected _toolTemplateRef(t: any): void;
    protected _mainGridRef(t: any): void;
    protected _mainRef(t: any): void;
    height: string;
    width: string;
    private _rangeSelectorTemplate;
    rangeSelectorTemplate: any;
    private _chartTypePickerTemplate;
    chartTypePickerTemplate: any;
    private _indicatorMenuTemplate;
    indicatorMenuTemplate: any;
    private _toolbarTemplate;
    toolbarTemplate: any;
    private _chartTemplate;
    chartTemplate: any;
    private _wrapper;
    private _initialized;
    private _toolbarElement;
    constructor(props: IIgrFinancialChartProps);
    private _checkToolbarSize;
    componentWillUnmount(): void;
    private onDocumentClick;
    private rewrapAxis;
    protected createImplementation(): FinancialChart;
    readonly i: FinancialChart;
    protected createSeriesComponent(type: string): any;
    protected createIndicator(typeName: string): any;
    protected createOverlay(typeName: string): any;
    protected createSeries(type: DataSeriesType): any;
    protected createXAxis(type: FinancialChartXAxisMode): any;
    protected createYAxis(type: FinancialChartYAxisMode): any;
    private _chart;
    private _dataSource;
    dataSource: Array<any>;
    bindData(): void;
    private _toolRef;
    private _defaultTooltips;
    componentDidMount(): void;
    initializeContent(): void;
    private _dynamicContent;
    private _createZoomSlider;
    private _activeTooltips;
    private _activeTooltipElements;
    private _currentTooltips;
    private _uniqueTooltipId;
    private createTooltip;
    private _ensureTooltipCreated;
    private _ensureDefaultTooltip;
    private _onDefaultTooltipsReady;
    private _updateTooltipState;
    private _xAxisBreaks;
    /**
     * TimeAxisBreaks to apply to this chart when in time axis mode, representing spans of time to omit, such as weekends.
    */
    xAxisBreaks: IgCollection<any, any>;
    leftMargin: number;
    isHorizontalZoomEnabled: boolean;
    toolbarHeight: number;
    /**
     * Gets or sets whether the Y-axis should use a logarithmic scale instead of a linear one.
     * Since log(-1) is imaginary and log(0) is undefined, it is recommended to enable this property only when the Y-axis minimum is greater than zero.
    */
    yAxisIsLogarithmic: boolean;
    /**
     * Gets or sets the base value to use in the log function when mapping the position of data items along the Y-axis.
     * This property is effective only when YAxisIsLogarithmic is true.
    */
    yAxisLogarithmBase: number;
    /**
     * Gets or sets the distance between each label and grid line along the Y-axis.
    *
    * The `yAxisInterval` determines how often to show a label, tickmark, and/or gridline along the y-axis.  Set this property to a number less than the numeric range of the y-axis.
    *
    * ```ts
    * <IgrFinancialChart
    *     width="100%"
    *     height="400px"
    *     dataSource={this.data}
    * 	yAxisInterval={20}
    *  />
    * ```
    */
    yAxisInterval: number;
    /**
     * Gets or sets the data value corresponding to the minimum value of the Y-axis.
    *
    * The `yAxisMinimumValue` determines starting value of labels, tickmarks, and gridlines on the y-axis.
    *
    * ```ts
    * <IgrFinancialChart
    *     yAxisMinimumValue={-200}
    *     yAxisMaximumValue={1000}
    *     dataSource={this.data} />
    * ```
    */
    yAxisMinimumValue: number;
    /**
     * Gets or sets the data value corresponding to the maximum value of the Y-axis.
    *
    * The `yAxisMaximumValue` determines ending value of labels, tickmarks, and gridlines on the y-axis.
    *
    * ```ts
    * <IgrFinancialChart
    *  yAxisMinimumValue={-200}
    *     yAxisMaximumValue={100}
    *     dataSource={this.data} />
    * ```
    */
    yAxisMaximumValue: number;
    /**
     * Gets or sets the frequency of displayed minor lines along the Y-axis.
    *
    * The `yAxisMinorInterval` determines how often to show minor gridline along the y-axis.  Set this property to a number less than the `yAxisInterval` and the numeric range of the y-axis.
    *
    * ```ts
    * <IgrFinancialChart
    *      yAxisMinorInterval={50}
    *     dataSource={this.data} />
    * ```
    */
    yAxisMinorInterval: number;
    /**
     * Gets the current minimum value for the Y-axis.
    */
    readonly yAxisActualMinimum: number;
    /**
     * Gets the current maximum value for the Y-axis.
    */
    readonly yAxisActualMaximum: number;
    /**
     * The type of series to display in the volume pane.
    *
    * Use the `volumeType` property to set a type of all series that will be rendered in the volume pane, e.g.
    *
    * ```ts
    * <IgrFinancialChart
    *     width="100%"
    *     height="400px"
    *     dataSource={this.data}
    * 	volumeType="Column" />
    * ```
    */
    volumeType: FinancialChartVolumeType;
    /**
     * The scaling mode of the X-axis.
    *
    * Use the `xAxisMode` property to plot data items without any breaks in data range (Ordinal mode) or with breaks in data range (Time mode) such as weekends/holidays. Note that the Ordinal axis mode is less expensive to use in the financial chart than the Time axis mode.
    *
    * ```ts
    * <IgrFinancialChart
    *      xAxisMode="time"
    *     dataSource={this.data} />
    * ```
    */
    xAxisMode: FinancialChartXAxisMode;
    /**
     * The scaling mode of the Y-axis.
    *
    * Use the `yAxisMode` property to plot data items using their actual values (Numeric) or using percent changes from the first data point (PercentChange), e.g.
    *
    * ```ts
    * <IgrFinancialChart
    *      yAxisMode="percentChange"
    *     dataSource={this.data} />
    * ```
    */
    yAxisMode: FinancialChartYAxisMode;
    /**
     * A boolean property controlling the visibility of the toolbar.
    *
    * The `isToolbarVisible` property is used to hide the toolbar.
    *
    * ```ts
    *  <IgrFinancialChart
    *     isToolbarVisible={false}>
    *  </IgrFinancialChart>
    * ```
    */
    isToolbarVisible: boolean;
    /**
     * The type of price series to display in the main chart.
    *
    * Use the `chartType` property to set a type of series that will be used to render prices in the Financial Chart control, e.g.
    *
    * ```ts
    * <IgrFinancialChart
    *   width="100%"
    *   height="400px"
    * 	chartType="Candle"
    *   dataSource={this.data} />
    * ```
    */
    chartType: FinancialChartType;
    /**
     * Gets or sets Horizontal alignment of Y-axis labels.
    */
    yAxisLabelHorizontalAlignment: HorizontalAlignment;
    /**
     * A boolean indicating whether the chart should automatically zoom in vertically on the currently visible range of data.
     * When this property is set to true, panning and zooming along the X-axis will result in a corresponding zoom on the Y-axis, so that the visible range of data fills the zoom window as fully as possible.
    */
    isWindowSyncedToVisibleRange: boolean;
    private _indicatorTypes;
    /**
     * A collection indicating what financial indicator types to display on the Financial Chart.
    *
    * Use the `indicatorTypes` property to set types of indicators that will be rendered below the price pane in the Financial Chart control, e.g.
    *
    * ```ts
    * <IgrFinancialChart
    *     width="100%"
    *     height="400px"
    *     dataSource={this.data}
    * 	indicatorTypes="ForceIndex" />
    * ```
    */
    indicatorTypes: FinancialIndicatorTypeCollection;
    private _overlayTypes;
    /**
     * A collection indicating what financial overlay types to display on the Financial Chart.
    *
    * Use the `overlayTypes` property to set types of overlays that will be rendered behind price series in the Financial Chart control, e.g.
    *
    * ```ts
    * <IgrFinancialChart
    *     width="100%"
    *     height="400px"
    *     dataSource={this.data}
    * 	overlayTypes ="PriceChannel" />
    * ```
    */
    overlayTypes: FinancialOverlayTypeCollection;
    /**
     * Gets or sets whether the large numbers on the Y-axis labels are abbreviated.
    */
    yAxisAbbreviateLargeNumbers: boolean;
    /**
     * Gets or sets the rendering resolution for all series in this chart.
     * Where n = Resolution, for every n horizontal pixels, combine all items into a single datapoint.  When Resolution = 0, all datapoints will be rendered as graphical objects.  Charts with a higher resolution will have faster performance.
    */
    resolution: number;
    /**
     * Gets or sets the location of Y-axis labels, relative to the plot area.
    */
    yAxisLabelLocation: AxisLabelsLocation;
    /**
     * Gets or sets type of series to display in the zoom slider pane.
    *
    * Use the `zoomSliderType` property to set a type of all series that will be rendered in the zoom pane, e.g.
    *
    * ```ts
    * <IgrFinancialChart
    *     zoomSliderType="Candle"
    *     dataSource={this.data} />
    * ```
    */
    zoomSliderType: FinancialChartZoomSliderType;
    /**
     * Gets or sets the palette used for coloring negative items of Waterfall chart type.
    *
    * Use the `negativeBrushes` property to set a collection of brushes that will be used to render fill area of negative elements in the price pane, e.g.
    *
    * ```ts
    * <IgrFinancialChart
    *     width="100%"
    *     height="400px"
    *     dataSource={this.data}
    * 	negativeBrushes="Red" />
    * ```
    */
    negativeBrushes: string[];
    /**
     * Brushes to use for drawing negative elements, when using a chart type with contextual coloring, such as Waterfall.
    *
    * Use the `negativeOutlines` property to set a collection of brushes that will be used to render outline of negative elements in the price pane, e.g.
    *
    * ```ts
    * <IgrFinancialChart
    *     width="100%"
    *     height="400px"
    *     dataSource={this.data}
    * 	negativeOutlines= "green"/>
    * ```
    */
    negativeOutlines: string[];
    /**
     * Brushes to use for filling financial overlays.
    *
    * Use the `overlayBrushes` property to set a collection of brushes that will be used to render fill area of overlays in the Financial Chart control, e.g.
    *
    * ```ts
    * <IgrFinancialChart
    *     width="100%"
    *     height="400px"
    *     dataSource={this.data}
    * 	overlayBrushes="Green" />
    * ```
    */
    overlayBrushes: string[];
    /**
     * Brushes to use for outlining financial overlays.
    *
    * Use the `overlayOutlines` property to set a collection of brushes that will be used to render outlines of overlays in the Financial Chart control, e.g.
    *
    * ```ts
    * <IgrFinancialChart
    *     width="100%"
    *     height="400px"
    *     dataSource={this.data}
    * 	overlayOutlines="red" />
    * ```
    */
    overlayOutlines: string[];
    /**
     * Brushes to use for outlining volume series in the volume pane.
    *
    * Use the `volumeOutlines` property to set a collection of brushes that will be used to render outline of multiple series in the volume pane of the Financial Chart control, e.g.
    *
    * ```ts
    * <IgrFinancialChart
    *     width="100%"
    *     height="400px"
    *     dataSource={this.data}
    * 	volumeOutlines="Green" />
    * ```
    */
    volumeOutlines: string[];
    /**
     * Brushes to use for filling volume series in the volume pane.
    *
    * Use the `volumeBrushes` property to set a collection of brushes that will be used to render fill area of multiple series in the volume pane of the Financial Chart control, e.g.
    *
    * ```ts
    * <IgrFinancialChart
    *     width="100%"
    *     height="400px"
    *     dataSource={this.data}
    * 	volumeBrushes="Green" />
    * ```
    */
    volumeBrushes: string[];
    /**
     * Brushes to use for negative elements in financial indicators.
    *
    * Use the `indicatorNegativeBrushes` property to set a collection of brushes that will be used to render negative elements of indicators in the Financial Chart control, e.g.
    *
    * ```ts
    * <IgrFinancialChart
    *     width="100%"
    *     height="400px"
    *     dataSource={this.data}
    * 	indicatorNegativeBrushes="Red"/>
    * ```
    */
    indicatorNegativeBrushes: string[];
    /**
     * Brushes to use for financial indicators.
    *
    * Use the `indicatorBrushes` property to set a collection of brushes that will be used to render positive elements of indicators in the Financial Chart control, e.g.
    *
    * ```ts
    * <IgrFinancialChart
    *     width="100%"
    *     height="400px"
    *     dataSource={this.data}
    * 	indicatorBrushes="Green" />
    * ```
    */
    indicatorBrushes: string[];
    /**
     * The outline thickness of volume series in the volume pane.
    *
    * Use the `volumeThickness` property to set a number that will be used to render outline thickness of all series in the volume pane, e.g.
    *
    * ```ts
    * <IgrFinancialChart
    *     width="100%"
    *     height="400px"
    *     dataSource={this.data}
    * 	volumeThickness= "2.5"/>
    * ```
    */
    volumeThickness: number;
    /**
     * The outline thickness of financial overlays.
    *
    * Use the `overlayThickness` property to set a number that will be used to render outline thickness of all overlays in the Financial Chart control, e.g.
    *
    * ```ts
    * <IgrFinancialChart
    *     width="100%"
    *     height="400px"
    *     dataSource={this.data}
    * 	overlayThickness ="2.5"  />
    * ```
    */
    overlayThickness: number;
    /**
     * The outline or stroke thickness of financial indicators.
    *
    * Use the `indicatorThickness` property to set a number that will be used to render outline thickness of all indicators in the Financial Chart control, e.g.
    *
    * ```ts
    * <IgrFinancialChart
    *     width="100%"
    *     height="400px"
    *     dataSource={this.data}
    * 	indicatorThickness="2.5"  />
    * ```
    */
    indicatorThickness: number;
    private _indicatorDisplayTypes;
    /**
     * The display types of financial indicators.
    *
    * Use the `indicatorDisplayTypes` property to set display types that will determine whether render all indicators as area, lines, or columns in the Financial Chart control, e.g.
    *
    * ```ts
    * <IgrFinancialChart
    *     width="100%"
    *     height="400px"
    *     dataSource={this.data}
    * 	indicatorDisplayTypes="line" />
    * ```
    */
    indicatorDisplayTypes: IndicatorDisplayTypeCollection;
    /**
     * The period of financial indicators, where applicable.
    *
    * The `indicatorPeriod` property applies to only the `BollingerBands` overlay as well as to these indicators types: `AverageDirectionalIndex`, `AverageTrueRange`, `BollingerBandWidth`, `ChaikinVolatility`, `CommodityChannelIndex`, `DetrendedPriceOscillator`, `FastStochasticOscillator`, `ForceIndex`, `FullStochasticOscillator`, `MoneyFlowIndex`, `IgrPriceChannelOverlay`, `RateOfChangeAndMomentum`, `RelativeStrengthIndex`, `SlowStochasticOscillator`, `StandardDeviation`, `StochRSI`, `TRIX`, `WilliamsPercentR`
    *
    * ```ts
    * <IgrFinancialChart
    *     width="100%"
    *     height="400px"
    *     dataSource={this.data}
    * 	indicatorPeriod="8" />
    * ```
    */
    indicatorPeriod: number;
    /**
     * The multiplier of financial indicators, where applicable.
    *
    * The `indicatorMultiplier` property applies to only to BollingerBandWidth indicator type.
    *
    * ```ts
    * <IgrFinancialChart
    *     width="100%"
    *     height="400px"
    *     dataSource={this.data}
    * 	indicatorMultiplier= "8" />
    * ```
    */
    indicatorMultiplier: number;
    /**
     * The smoothing period of financial indicators, where applicable.
    *
    * The `indicatorSmoothingPeriod` property applies to only to `FullStochasticOscillator` indicator type.
    *
    * ```ts
    * <IgrFinancialChart
    *     width="100%"
    *     height="400px"
    *     dataSource={this.data}
    * 	 indicatorSmoothingPeriod="8"     />
    * ```
    */
    indicatorSmoothingPeriod: number;
    /**
     * The short period of financial indicators, where applicable.
    *
    * The `indicatorShortPeriod` property applies only to these indicator types:
    *
    * -   AbsoluteVolumeOscillator,
    * -   ChaikinOscillator,
    * -   MovingAverageConvergenceDivergence,
    * -   PercentagePriceOscillator,
    * -   PercentageVolumeOscillator,
    *
    * ```ts
    * <IgrFinancialChart
    *     width="100%"
    *     height="400px"
    *     dataSource={this.data}
    * 	indicatorShortPeriod="8" />
    * ```
    */
    indicatorShortPeriod: number;
    /**
     * The long period of financial indicators, where applicable.
    *
    * The `indicatorLongPeriod` property applies only to these indicator types:
    *
    * -   AbsoluteVolumeOscillator,
    * -   ChaikinOscillator,
    * -   MovingAverageConvergenceDivergence,
    * -   PercentagePriceOscillator,
    * -   PercentageVolumeOscillator,
    *
    * ```ts
    * <IgrFinancialChart
    *     width="100%"
    *     height="400px"
    *     dataSource={this.data}
    * 	indicatorLongPeriod="8" />
    * ```
    */
    indicatorLongPeriod: number;
    /**
     * The signal period of financial indicators, where applicable.
    *
    * The `indicatorSignalPeriod` property applies to only to MovingAverageConvergenceDivergence indicator type.
    *
    * ```ts
    * <IgrFinancialChart
    *     width="100%"
    *     height="400px"
    *     dataSource={this.data}
    * 	indicatorSignalPeriod="8"
    * 	 />
    * ```
    */
    indicatorSignalPeriod: number;
    private _rangeSelectorOptions;
    /**
     * A FinancialChartRangeSelectorOptionCollection containing the available range selector options on the toolbar.
    */
    rangeSelectorOptions: FinancialChartRangeSelectorOptionCollection;
    private _customIndicatorNames;
    /**
     * The names of custom indicators to add to the chart.
     * When CustomIndicatorNames is set, the ApplyCustomIndicators event will be raised for each custom indicator name.
    */
    customIndicatorNames: CustomIndicatorNameCollection;
    isVerticalZoomEnabled: boolean;
    /**
     * Gets or sets stroke brush of major gridlines on x-axis of the zoom slider pane
    */
    zoomSliderXAxisMajorStroke: string;
    /**
     * Gets or sets thickness of major gridlines on x-axis of the zoom slider pane
    */
    zoomSliderXAxisMajorStrokeThickness: number;
    /**
     * Gets or sets weather or not a legend is visible between toolbar and chart's plot area
    */
    isLegendVisible: boolean;
    /**
     * Gets or sets minimum value on x-axis
    */
    xAxisMinimumValue: Date;
    /**
     * Gets or sets maximum value on x-axis
    */
    xAxisMaximumValue: Date;
    /**
 * Called by the UI framework to provide a UI container for rendering this control.

* @param container  * The UI container element.
*/
    provideContainer(container: any): void;
    notifyInsertItem(source_: any, index: number, newItem: any): void;
    notifyRemoveItem(source_: any, index: number, oldItem: any): void;
    notifyClearItems(source_: any): void;
    notifySetItem(source_: any, index: number, oldItem: any, newItem: any): void;
    /**
     * Returns visuals as a serialized string.
    
    */
    exportSerializedVisualData(): string;
    private _applyCustomIndicators;
    private _applyCustomIndicators_wrapped;
    /**
     * Event raised by the chart when custom indicator data is needed from the application.
     * During series rendering, event will be raised once for each value in the CustomIndicatorNames collection.
    */
    applyCustomIndicators: (s: IgrFinancialChart, e: FinancialChartCustomIndicatorArgs) => void;
}
export interface IIgrFinancialChartProps extends IIgrXYChartProps {
    width?: string;
    height?: string;
    /**
  * Gets or sets the data for the chart to use. This can be overriden at the series and axis level.
  */
    dataSource?: any[];
    leftMargin?: number | string;
    isHorizontalZoomEnabled?: boolean | string;
    toolbarHeight?: number | string;
    /**
     * Gets or sets whether the Y-axis should use a logarithmic scale instead of a linear one.
     * Since log(-1) is imaginary and log(0) is undefined, it is recommended to enable this property only when the Y-axis minimum is greater than zero.
    */
    yAxisIsLogarithmic?: boolean | string;
    /**
     * Gets or sets the base value to use in the log function when mapping the position of data items along the Y-axis.
     * This property is effective only when YAxisIsLogarithmic is true.
    */
    yAxisLogarithmBase?: number | string;
    /**
     * Gets or sets the distance between each label and grid line along the Y-axis.
    *
    * The `yAxisInterval` determines how often to show a label, tickmark, and/or gridline along the y-axis.  Set this property to a number less than the numeric range of the y-axis.
    *
    * ```ts
    * <IgrFinancialChart
    *     width="100%"
    *     height="400px"
    *     dataSource={this.data}
    * 	yAxisInterval={20}
    *  />
    * ```
    */
    yAxisInterval?: number | string;
    /**
     * Gets or sets the data value corresponding to the minimum value of the Y-axis.
    *
    * The `yAxisMinimumValue` determines starting value of labels, tickmarks, and gridlines on the y-axis.
    *
    * ```ts
    * <IgrFinancialChart
    *     yAxisMinimumValue={-200}
    *     yAxisMaximumValue={1000}
    *     dataSource={this.data} />
    * ```
    */
    yAxisMinimumValue?: number | string;
    /**
     * Gets or sets the data value corresponding to the maximum value of the Y-axis.
    *
    * The `yAxisMaximumValue` determines ending value of labels, tickmarks, and gridlines on the y-axis.
    *
    * ```ts
    * <IgrFinancialChart
    *  yAxisMinimumValue={-200}
    *     yAxisMaximumValue={100}
    *     dataSource={this.data} />
    * ```
    */
    yAxisMaximumValue?: number | string;
    /**
     * Gets or sets the frequency of displayed minor lines along the Y-axis.
    *
    * The `yAxisMinorInterval` determines how often to show minor gridline along the y-axis.  Set this property to a number less than the `yAxisInterval` and the numeric range of the y-axis.
    *
    * ```ts
    * <IgrFinancialChart
    *      yAxisMinorInterval={50}
    *     dataSource={this.data} />
    * ```
    */
    yAxisMinorInterval?: number | string;
    /**
     * The type of series to display in the volume pane.
    *
    * Use the `volumeType` property to set a type of all series that will be rendered in the volume pane, e.g.
    *
    * ```ts
    * <IgrFinancialChart
    *     width="100%"
    *     height="400px"
    *     dataSource={this.data}
    * 	volumeType="Column" />
    * ```
    */
    volumeType?: FinancialChartVolumeType | string;
    /**
     * The scaling mode of the X-axis.
    *
    * Use the `xAxisMode` property to plot data items without any breaks in data range (Ordinal mode) or with breaks in data range (Time mode) such as weekends/holidays. Note that the Ordinal axis mode is less expensive to use in the financial chart than the Time axis mode.
    *
    * ```ts
    * <IgrFinancialChart
    *      xAxisMode="time"
    *     dataSource={this.data} />
    * ```
    */
    xAxisMode?: FinancialChartXAxisMode | string;
    /**
     * The scaling mode of the Y-axis.
    *
    * Use the `yAxisMode` property to plot data items using their actual values (Numeric) or using percent changes from the first data point (PercentChange), e.g.
    *
    * ```ts
    * <IgrFinancialChart
    *      yAxisMode="percentChange"
    *     dataSource={this.data} />
    * ```
    */
    yAxisMode?: FinancialChartYAxisMode | string;
    /**
     * A boolean property controlling the visibility of the toolbar.
    *
    * The `isToolbarVisible` property is used to hide the toolbar.
    *
    * ```ts
    *  <IgrFinancialChart
    *     isToolbarVisible={false}>
    *  </IgrFinancialChart>
    * ```
    */
    isToolbarVisible?: boolean | string;
    /**
     * The type of price series to display in the main chart.
    *
    * Use the `chartType` property to set a type of series that will be used to render prices in the Financial Chart control, e.g.
    *
    * ```ts
    * <IgrFinancialChart
    *   width="100%"
    *   height="400px"
    * 	chartType="Candle"
    *   dataSource={this.data} />
    * ```
    */
    chartType?: FinancialChartType | string;
    /**
     * Gets or sets Horizontal alignment of Y-axis labels.
    */
    yAxisLabelHorizontalAlignment?: HorizontalAlignment | string;
    /**
     * A boolean indicating whether the chart should automatically zoom in vertically on the currently visible range of data.
     * When this property is set to true, panning and zooming along the X-axis will result in a corresponding zoom on the Y-axis, so that the visible range of data fills the zoom window as fully as possible.
    */
    isWindowSyncedToVisibleRange?: boolean | string;
    /**
     * A collection indicating what financial indicator types to display on the Financial Chart.
    *
    * Use the `indicatorTypes` property to set types of indicators that will be rendered below the price pane in the Financial Chart control, e.g.
    *
    * ```ts
    * <IgrFinancialChart
    *     width="100%"
    *     height="400px"
    *     dataSource={this.data}
    * 	indicatorTypes="ForceIndex" />
    * ```
    */
    indicatorTypes?: FinancialIndicatorTypeCollection | string;
    /**
     * A collection indicating what financial overlay types to display on the Financial Chart.
    *
    * Use the `overlayTypes` property to set types of overlays that will be rendered behind price series in the Financial Chart control, e.g.
    *
    * ```ts
    * <IgrFinancialChart
    *     width="100%"
    *     height="400px"
    *     dataSource={this.data}
    * 	overlayTypes ="PriceChannel" />
    * ```
    */
    overlayTypes?: FinancialOverlayTypeCollection | string;
    /**
     * Gets or sets whether the large numbers on the Y-axis labels are abbreviated.
    */
    yAxisAbbreviateLargeNumbers?: boolean | string;
    /**
     * Gets or sets the rendering resolution for all series in this chart.
     * Where n = Resolution, for every n horizontal pixels, combine all items into a single datapoint.  When Resolution = 0, all datapoints will be rendered as graphical objects.  Charts with a higher resolution will have faster performance.
    */
    resolution?: number | string;
    /**
     * Gets or sets the location of Y-axis labels, relative to the plot area.
    */
    yAxisLabelLocation?: AxisLabelsLocation | string;
    /**
     * Gets or sets type of series to display in the zoom slider pane.
    *
    * Use the `zoomSliderType` property to set a type of all series that will be rendered in the zoom pane, e.g.
    *
    * ```ts
    * <IgrFinancialChart
    *     zoomSliderType="Candle"
    *     dataSource={this.data} />
    * ```
    */
    zoomSliderType?: FinancialChartZoomSliderType | string;
    /**
     * Gets or sets the palette used for coloring negative items of Waterfall chart type.
    *
    * Use the `negativeBrushes` property to set a collection of brushes that will be used to render fill area of negative elements in the price pane, e.g.
    *
    * ```ts
    * <IgrFinancialChart
    *     width="100%"
    *     height="400px"
    *     dataSource={this.data}
    * 	negativeBrushes="Red" />
    * ```
    */
    negativeBrushes?: string[] | string;
    /**
     * Brushes to use for drawing negative elements, when using a chart type with contextual coloring, such as Waterfall.
    *
    * Use the `negativeOutlines` property to set a collection of brushes that will be used to render outline of negative elements in the price pane, e.g.
    *
    * ```ts
    * <IgrFinancialChart
    *     width="100%"
    *     height="400px"
    *     dataSource={this.data}
    * 	negativeOutlines= "green"/>
    * ```
    */
    negativeOutlines?: string[] | string;
    /**
     * Brushes to use for filling financial overlays.
    *
    * Use the `overlayBrushes` property to set a collection of brushes that will be used to render fill area of overlays in the Financial Chart control, e.g.
    *
    * ```ts
    * <IgrFinancialChart
    *     width="100%"
    *     height="400px"
    *     dataSource={this.data}
    * 	overlayBrushes="Green" />
    * ```
    */
    overlayBrushes?: string[] | string;
    /**
     * Brushes to use for outlining financial overlays.
    *
    * Use the `overlayOutlines` property to set a collection of brushes that will be used to render outlines of overlays in the Financial Chart control, e.g.
    *
    * ```ts
    * <IgrFinancialChart
    *     width="100%"
    *     height="400px"
    *     dataSource={this.data}
    * 	overlayOutlines="red" />
    * ```
    */
    overlayOutlines?: string[] | string;
    /**
     * Brushes to use for outlining volume series in the volume pane.
    *
    * Use the `volumeOutlines` property to set a collection of brushes that will be used to render outline of multiple series in the volume pane of the Financial Chart control, e.g.
    *
    * ```ts
    * <IgrFinancialChart
    *     width="100%"
    *     height="400px"
    *     dataSource={this.data}
    * 	volumeOutlines="Green" />
    * ```
    */
    volumeOutlines?: string[] | string;
    /**
     * Brushes to use for filling volume series in the volume pane.
    *
    * Use the `volumeBrushes` property to set a collection of brushes that will be used to render fill area of multiple series in the volume pane of the Financial Chart control, e.g.
    *
    * ```ts
    * <IgrFinancialChart
    *     width="100%"
    *     height="400px"
    *     dataSource={this.data}
    * 	volumeBrushes="Green" />
    * ```
    */
    volumeBrushes?: string[] | string;
    /**
     * Brushes to use for negative elements in financial indicators.
    *
    * Use the `indicatorNegativeBrushes` property to set a collection of brushes that will be used to render negative elements of indicators in the Financial Chart control, e.g.
    *
    * ```ts
    * <IgrFinancialChart
    *     width="100%"
    *     height="400px"
    *     dataSource={this.data}
    * 	indicatorNegativeBrushes="Red"/>
    * ```
    */
    indicatorNegativeBrushes?: string[] | string;
    /**
     * Brushes to use for financial indicators.
    *
    * Use the `indicatorBrushes` property to set a collection of brushes that will be used to render positive elements of indicators in the Financial Chart control, e.g.
    *
    * ```ts
    * <IgrFinancialChart
    *     width="100%"
    *     height="400px"
    *     dataSource={this.data}
    * 	indicatorBrushes="Green" />
    * ```
    */
    indicatorBrushes?: string[] | string;
    /**
     * The outline thickness of volume series in the volume pane.
    *
    * Use the `volumeThickness` property to set a number that will be used to render outline thickness of all series in the volume pane, e.g.
    *
    * ```ts
    * <IgrFinancialChart
    *     width="100%"
    *     height="400px"
    *     dataSource={this.data}
    * 	volumeThickness= "2.5"/>
    * ```
    */
    volumeThickness?: number | string;
    /**
     * The outline thickness of financial overlays.
    *
    * Use the `overlayThickness` property to set a number that will be used to render outline thickness of all overlays in the Financial Chart control, e.g.
    *
    * ```ts
    * <IgrFinancialChart
    *     width="100%"
    *     height="400px"
    *     dataSource={this.data}
    * 	overlayThickness ="2.5"  />
    * ```
    */
    overlayThickness?: number | string;
    /**
     * The outline or stroke thickness of financial indicators.
    *
    * Use the `indicatorThickness` property to set a number that will be used to render outline thickness of all indicators in the Financial Chart control, e.g.
    *
    * ```ts
    * <IgrFinancialChart
    *     width="100%"
    *     height="400px"
    *     dataSource={this.data}
    * 	indicatorThickness="2.5"  />
    * ```
    */
    indicatorThickness?: number | string;
    /**
     * The display types of financial indicators.
    *
    * Use the `indicatorDisplayTypes` property to set display types that will determine whether render all indicators as area, lines, or columns in the Financial Chart control, e.g.
    *
    * ```ts
    * <IgrFinancialChart
    *     width="100%"
    *     height="400px"
    *     dataSource={this.data}
    * 	indicatorDisplayTypes="line" />
    * ```
    */
    indicatorDisplayTypes?: IndicatorDisplayTypeCollection | string;
    /**
     * The period of financial indicators, where applicable.
    *
    * The `indicatorPeriod` property applies to only the `BollingerBands` overlay as well as to these indicators types: `AverageDirectionalIndex`, `AverageTrueRange`, `BollingerBandWidth`, `ChaikinVolatility`, `CommodityChannelIndex`, `DetrendedPriceOscillator`, `FastStochasticOscillator`, `ForceIndex`, `FullStochasticOscillator`, `MoneyFlowIndex`, `IgrPriceChannelOverlay`, `RateOfChangeAndMomentum`, `RelativeStrengthIndex`, `SlowStochasticOscillator`, `StandardDeviation`, `StochRSI`, `TRIX`, `WilliamsPercentR`
    *
    * ```ts
    * <IgrFinancialChart
    *     width="100%"
    *     height="400px"
    *     dataSource={this.data}
    * 	indicatorPeriod="8" />
    * ```
    */
    indicatorPeriod?: number | string;
    /**
     * The multiplier of financial indicators, where applicable.
    *
    * The `indicatorMultiplier` property applies to only to BollingerBandWidth indicator type.
    *
    * ```ts
    * <IgrFinancialChart
    *     width="100%"
    *     height="400px"
    *     dataSource={this.data}
    * 	indicatorMultiplier= "8" />
    * ```
    */
    indicatorMultiplier?: number | string;
    /**
     * The smoothing period of financial indicators, where applicable.
    *
    * The `indicatorSmoothingPeriod` property applies to only to `FullStochasticOscillator` indicator type.
    *
    * ```ts
    * <IgrFinancialChart
    *     width="100%"
    *     height="400px"
    *     dataSource={this.data}
    * 	 indicatorSmoothingPeriod="8"     />
    * ```
    */
    indicatorSmoothingPeriod?: number | string;
    /**
     * The short period of financial indicators, where applicable.
    *
    * The `indicatorShortPeriod` property applies only to these indicator types:
    *
    * -   AbsoluteVolumeOscillator,
    * -   ChaikinOscillator,
    * -   MovingAverageConvergenceDivergence,
    * -   PercentagePriceOscillator,
    * -   PercentageVolumeOscillator,
    *
    * ```ts
    * <IgrFinancialChart
    *     width="100%"
    *     height="400px"
    *     dataSource={this.data}
    * 	indicatorShortPeriod="8" />
    * ```
    */
    indicatorShortPeriod?: number | string;
    /**
     * The long period of financial indicators, where applicable.
    *
    * The `indicatorLongPeriod` property applies only to these indicator types:
    *
    * -   AbsoluteVolumeOscillator,
    * -   ChaikinOscillator,
    * -   MovingAverageConvergenceDivergence,
    * -   PercentagePriceOscillator,
    * -   PercentageVolumeOscillator,
    *
    * ```ts
    * <IgrFinancialChart
    *     width="100%"
    *     height="400px"
    *     dataSource={this.data}
    * 	indicatorLongPeriod="8" />
    * ```
    */
    indicatorLongPeriod?: number | string;
    /**
     * The signal period of financial indicators, where applicable.
    *
    * The `indicatorSignalPeriod` property applies to only to MovingAverageConvergenceDivergence indicator type.
    *
    * ```ts
    * <IgrFinancialChart
    *     width="100%"
    *     height="400px"
    *     dataSource={this.data}
    * 	indicatorSignalPeriod="8"
    * 	 />
    * ```
    */
    indicatorSignalPeriod?: number | string;
    /**
     * A FinancialChartRangeSelectorOptionCollection containing the available range selector options on the toolbar.
    */
    rangeSelectorOptions?: FinancialChartRangeSelectorOptionCollection | string;
    /**
     * The names of custom indicators to add to the chart.
     * When CustomIndicatorNames is set, the ApplyCustomIndicators event will be raised for each custom indicator name.
    */
    customIndicatorNames?: CustomIndicatorNameCollection | string;
    isVerticalZoomEnabled?: boolean | string;
    /**
     * Gets or sets stroke brush of major gridlines on x-axis of the zoom slider pane
    */
    zoomSliderXAxisMajorStroke?: string;
    /**
     * Gets or sets thickness of major gridlines on x-axis of the zoom slider pane
    */
    zoomSliderXAxisMajorStrokeThickness?: number | string;
    /**
     * Gets or sets weather or not a legend is visible between toolbar and chart's plot area
    */
    isLegendVisible?: boolean | string;
    /**
     * Gets or sets minimum value on x-axis
    */
    xAxisMinimumValue?: Date;
    /**
     * Gets or sets maximum value on x-axis
    */
    xAxisMaximumValue?: Date;
    /**
 * Event raised by the chart when custom indicator data is needed from the application.
 * During series rendering, event will be raised once for each value in the CustomIndicatorNames collection.
*/
    applyCustomIndicators?: (s: IgrFinancialChart, e: FinancialChartCustomIndicatorArgs) => void;
}
