igniteui-angular-charts
Version:
Ignite UI Angular charting components for building rich data visualizations for modern web apps.
753 lines (750 loc) • 35.7 kB
TypeScript
import { OnDestroy, EventEmitter, TemplateRef, AfterViewInit, ViewContainerRef, Injector, ComponentFactoryResolver, Renderer2, QueryList, ElementRef, NgZone } from '@angular/core';
import { FinancialChart } from './FinancialChart';
import { FinancialChartType } from './FinancialChartType';
import { IgCollection } from "igniteui-angular-core";
import { IgxXYChartComponent } from './igx-xy-chart-component';
import { DataSeriesType } from "igniteui-angular-core";
import { FinancialChartVolumeType } from './FinancialChartVolumeType';
import { FinancialChartXAxisMode } from './FinancialChartXAxisMode';
import { FinancialChartYAxisMode } from './FinancialChartYAxisMode';
import { HorizontalAlignment } from "igniteui-angular-core";
import { FinancialChartZoomSliderType } from './FinancialChartZoomSliderType';
import { IgxFinancialChartDefaultTemplatesComponent } from './igx-financial-chart-default-templates-component';
import { IgxTemplateContentComponent } from "igniteui-angular-core";
import { IgxFinancialIndicatorTypeCollection } from './igx-financial-indicator-type-collection';
import { IgxFinancialOverlayTypeCollection } from './igx-financial-overlay-type-collection';
import { IgxIndicatorDisplayTypeCollection } from './igx-indicator-display-type-collection';
import { IgxFinancialChartRangeSelectorOptionCollection } from './igx-financial-chart-range-selector-option-collection';
import { IgxFinancialChartCustomIndicatorArgs } from './igx-financial-chart-custom-indicator-args';
import { IgxCustomIndicatorNameCollection } from './igx-custom-indicator-name-collection';
import { DomainType } from "./DomainType";
import * as i0 from "@angular/core";
/**
* Represents a chart with an ordinal X-axis and a numeric Y-axis.
*
* **Ignite UI for Angular Financial Chart** - [Documentation](https://www.infragistics.com/products/ignite-ui-angular/angular/components/FinancialChart.html)
*
* The Ignite UI Financial Chart is a lightweight, highly performant chart. It can be easily configured to display category data using an extremely simple and intuitive API. It offers multiple ways for the user to visualize data, including several display modes for price and volume, and many financial indicators.
*
* ```html
* <igx-financial-chart [dataSource]="data"
* width="850px" height="600px">
* </igx-financial-chart>
* ```
*/
export declare class IgxFinancialChartComponent extends IgxXYChartComponent implements AfterViewInit, OnDestroy {
private renderer;
private _elRef;
private ngZone;
private injector;
private componentFactoryResolver;
container: Element;
_dynamicContent: ViewContainerRef;
_defaultTemplates: IgxFinancialChartDefaultTemplatesComponent;
_templates: QueryList<IgxTemplateContentComponent>;
_toolbarElement: ElementRef;
_mainElement: ElementRef;
private _height;
private _width;
set height(value: string);
get height(): string;
set width(value: string);
get width(): string;
rangeSelectorTemplate: TemplateRef<any>;
chartTypePickerTemplate: TemplateRef<any>;
indicatorMenuTemplate: TemplateRef<any>;
toolbarTemplate: TemplateRef<any>;
chartTemplate: TemplateRef<any>;
private _wrapper;
constructor(renderer: Renderer2, _elRef: ViewContainerRef, ngZone: NgZone, injector: Injector, componentFactoryResolver: ComponentFactoryResolver);
private _checkToolbarSize;
ngOnDestroy(): void;
onDocumentClick(ev: Event): void;
private rewrapAxis;
protected createImplementation(): FinancialChart;
get 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;
protected createTimeAxisBreakCollection(): any;
private _chart;
private _dataSource;
set dataSource(value: Array<any>);
get dataSource(): Array<any>;
bindData(): void;
private _defaultTooltips;
ngAfterViewInit(): void;
private _createZoomSlider;
private createTooltip;
private _ensureTooltipCreated;
private _ensureDefaultTooltip;
private _onDefaultTooltipsReady;
protected onImplementationCreated(): void;
private _xAxisBreaks;
/**
* TimeAxisBreaks to apply to this chart when in time axis mode, representing spans of time to omit, such as weekends.
*/
get xAxisBreaks(): IgCollection<any, any>;
set xAxisBreaks(v: IgCollection<any, any>);
get leftMargin(): number;
set leftMargin(v: number);
static ngAcceptInputType_leftMargin: number | string;
get isHorizontalZoomEnabled(): boolean;
set isHorizontalZoomEnabled(v: boolean);
static ngAcceptInputType_isHorizontalZoomEnabled: boolean | string;
get toolbarHeight(): number;
set toolbarHeight(v: number);
static ngAcceptInputType_toolbarHeight: number | string;
/**
* Gets domain type of this chart
*/
get domainType(): DomainType;
static ngAcceptInputType_domainType: DomainType | 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.
*/
get yAxisIsLogarithmic(): boolean;
set yAxisIsLogarithmic(v: boolean);
static ngAcceptInputType_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.
*/
get yAxisLogarithmBase(): number;
set yAxisLogarithmBase(v: number);
static ngAcceptInputType_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.
*
* ```html
* <igx-financial-chart
* [dataSource]="data"
* yAxisInterval="10">
* </igx-financial-chart>
* ```
*/
get yAxisInterval(): number;
set yAxisInterval(v: number);
static ngAcceptInputType_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.
*
* ```html
* <igx-financial-chart
* [dataSource]="data"
* yAxisMinimumValue="10">
* </igx-financial-chart>
* ```
*/
get yAxisMinimumValue(): number;
set yAxisMinimumValue(v: number);
static ngAcceptInputType_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.
*
* ```html
* <igx-financial-chart
* [dataSource]="data"
* yAxisMaximumValue="100">
* </igx-financial-chart>
* ```
*/
get yAxisMaximumValue(): number;
set yAxisMaximumValue(v: number);
static ngAcceptInputType_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.
*
* ```html
* <igx-financial-chart
* [dataSource]="data"
* yAxisMinorInterval="5">
* </igx-financial-chart>
* ```
*/
get yAxisMinorInterval(): number;
set yAxisMinorInterval(v: number);
static ngAcceptInputType_yAxisMinorInterval: number | string;
/**
* Gets the current minimum value for the Y-axis.
*/
get yAxisActualMinimum(): number;
static ngAcceptInputType_yAxisActualMinimum: number | string;
/**
* Gets the current maximum value for the Y-axis.
*/
get yAxisActualMaximum(): number;
static ngAcceptInputType_yAxisActualMaximum: 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.
*
* ```html
* <igx-financial-chart
* [dataSource]="data"
* volumeType="Column">
* </igx-financial-chart>
* ```
*/
get volumeType(): FinancialChartVolumeType;
set volumeType(v: FinancialChartVolumeType);
static ngAcceptInputType_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.
*
* ```html
* <igx-financial-chart
* [dataSource]="data"
* xAxisMode="Time">
* </igx-financial-chart>
* ```
*/
get xAxisMode(): FinancialChartXAxisMode;
set xAxisMode(v: FinancialChartXAxisMode);
static ngAcceptInputType_xAxisMode: FinancialChartXAxisMode | string;
/**
* Gets or sets number of visible categories at maximum zooming level
* This property works only with ordinal XAxisMode and it is overridden by chart's WindowRectMinWidth property
*/
get xAxisZoomMaximumCategoryRange(): number;
set xAxisZoomMaximumCategoryRange(v: number);
static ngAcceptInputType_xAxisZoomMaximumCategoryRange: number | string;
/**
* Gets or sets starting category that chart will move its zoom window. Acceptable value is between 0 and number of data items
* This property works only with ordinal XAxisMode and it is overridden by chart's WindowRect or WindowScaleHorizontal properties
*/
get xAxisZoomToCategoryStart(): number;
set xAxisZoomToCategoryStart(v: number);
static ngAcceptInputType_xAxisZoomToCategoryStart: number | string;
/**
* Gets or sets maximum pixel span of series item that will be visible at maximum zooming level
* This property ensures that series item does not get stretch above specified value.
* This property works only with ordinal XAxisMode and it is overridden by chart's WindowRectMinWidth property
*/
get xAxisZoomMaximumItemSpan(): number;
set xAxisZoomMaximumItemSpan(v: number);
static ngAcceptInputType_xAxisZoomMaximumItemSpan: number | string;
/**
* Gets or sets number of categories that the chart will zoom in and fill plot area
* This property is overridden by chart's WindowRect or WindowScaleHorizontal properties
*/
get xAxisZoomToCategoryRange(): number;
set xAxisZoomToCategoryRange(v: number);
static ngAcceptInputType_xAxisZoomToCategoryRange: number | string;
/**
* Gets or sets pixel span of series item that will be used to zoom chart such that the item has desired span
* Chart will automatically zoom in until series item has specified pixel span.
* This property works only with ordinal XAxisMode and it is overridden by chart's WindowRect or WindowScaleHorizontal properties
*/
get xAxisZoomToItemSpan(): number;
set xAxisZoomToItemSpan(v: number);
static ngAcceptInputType_xAxisZoomToItemSpan: number | 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.
*
* ```html
* <igx-financial-chart
* [dataSource]="data"
* yAxisMode="PercentChange">
* </igx-financial-chart>
* ```
*/
get yAxisMode(): FinancialChartYAxisMode;
set yAxisMode(v: FinancialChartYAxisMode);
static ngAcceptInputType_yAxisMode: FinancialChartYAxisMode | string;
/**
* A boolean property controlling the visibility of the toolbar.
*/
get isToolbarVisible(): boolean;
set isToolbarVisible(v: boolean);
static ngAcceptInputType_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.
*
* ```html
* <igx-financial-chart
* [dataSource]="data"
* chartType="Candle">
* </igx-financial-chart>
* ```
*/
get chartType(): FinancialChartType;
set chartType(v: FinancialChartType);
static ngAcceptInputType_chartType: FinancialChartType | string;
/**
* Gets or sets Horizontal alignment of Y-axis labels.
*/
get yAxisLabelHorizontalAlignment(): HorizontalAlignment;
set yAxisLabelHorizontalAlignment(v: HorizontalAlignment);
static ngAcceptInputType_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.
*/
get isWindowSyncedToVisibleRange(): boolean;
set isWindowSyncedToVisibleRange(v: boolean);
static ngAcceptInputType_isWindowSyncedToVisibleRange: boolean | string;
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.
*
* ```html
* <igx-financial-chart
* [dataSource]="data"
* indicatorTypes="MoneyFlowIndex, AverageTrueRange">
* </igx-financial-chart>
* ```
*/
get indicatorTypes(): IgxFinancialIndicatorTypeCollection;
set indicatorTypes(v: IgxFinancialIndicatorTypeCollection);
static ngAcceptInputType_indicatorTypes: IgxFinancialIndicatorTypeCollection | string;
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.
*
* ```html
* <igx-financial-chart
* [dataSource]="data"
* overlayTypes="BollingerBands">
* </igx-financial-chart>
* ```
*/
get overlayTypes(): IgxFinancialOverlayTypeCollection;
set overlayTypes(v: IgxFinancialOverlayTypeCollection);
static ngAcceptInputType_overlayTypes: IgxFinancialOverlayTypeCollection | string;
/**
* Gets or sets whether the large numbers on the Y-axis labels are abbreviated.
*/
get yAxisAbbreviateLargeNumbers(): boolean;
set yAxisAbbreviateLargeNumbers(v: boolean);
static ngAcceptInputType_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.
*/
get resolution(): number;
set resolution(v: number);
static ngAcceptInputType_resolution: number | string;
/**
* Gets or sets whether the x axis enhanced interval management should prefer to show all the labels if possible without collisions for supported types of category axes. This is for use with EnhancedIntervalMinimumCharacters = -1 and axes that have an integral interval.
*/
get xAxisEnhancedIntervalPreferMoreCategoryLabels(): boolean;
set xAxisEnhancedIntervalPreferMoreCategoryLabels(v: boolean);
static ngAcceptInputType_xAxisEnhancedIntervalPreferMoreCategoryLabels: boolean | string;
/**
* Gets or sets whether the y axis enhanced interval management should prefer to show all the labels if possible without collisions for supported types of category axes. This is for use with EnhancedIntervalMinimumCharacters = -1 and axes that have an integral interval.
*/
get yAxisEnhancedIntervalPreferMoreCategoryLabels(): boolean;
set yAxisEnhancedIntervalPreferMoreCategoryLabels(v: boolean);
static ngAcceptInputType_yAxisEnhancedIntervalPreferMoreCategoryLabels: boolean | 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.
*
* ```html
* <igx-financial-chart
* [dataSource]="data"
* zoomSliderType="Candle">
* </igx-financial-chart>
* ```
*/
get zoomSliderType(): FinancialChartZoomSliderType;
set zoomSliderType(v: FinancialChartZoomSliderType);
static ngAcceptInputType_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.
*
* ```html
* <igx-financial-chart
* [dataSource]="data"
* negativeBrushes="Red, Orange">
* </igx-financial-chart>
* ```
*/
get negativeBrushes(): string[];
set negativeBrushes(v: string[]);
static ngAcceptInputType_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.
*
* ```html
* <igx-financial-chart
* [dataSource]="data"
* negativeOutlines="Red, Orange">
* </igx-financial-chart>
* ```
*/
get negativeOutlines(): string[];
set negativeOutlines(v: string[]);
static ngAcceptInputType_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.
*
* ```html
* <igx-financial-chart
* [dataSource]="data"
* overlayTypes="BollingerBands"
* overlayBrushes="Green">
* </igx-financial-chart>
* ```
*/
get overlayBrushes(): string[];
set overlayBrushes(v: string[]);
static ngAcceptInputType_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.
*
* ```html
* <igx-financial-chart
* [dataSource]="data"
* overlayTypes="BollingerBands"
* overlayOutlines="Green">
* </igx-financial-chart>
* ```
*/
get overlayOutlines(): string[];
set overlayOutlines(v: string[]);
static ngAcceptInputType_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.
*
* ```html
* <igx-financial-chart
* [dataSource]="data"
* volumeOutlines="Green, Blue">
* </igx-financial-chart>
* ```
*/
get volumeOutlines(): string[];
set volumeOutlines(v: string[]);
static ngAcceptInputType_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.
*
* ```html
* <igx-financial-chart
* [dataSource]="data"
* volumeBrushes="Green, Blue">
* </igx-financial-chart>
* ```
*/
get volumeBrushes(): string[];
set volumeBrushes(v: string[]);
static ngAcceptInputType_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.
*
* ```html
* <igx-financial-chart
* [dataSource]="data"
* indicatorTypes="MoneyFlowIndex, AverageTrueRange"
* indicatorNegativeBrushes="Red, Orange">
* </igx-financial-chart>
* ```
*/
get indicatorNegativeBrushes(): string[];
set indicatorNegativeBrushes(v: string[]);
static ngAcceptInputType_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.
*
* ```html
* <igx-financial-chart
* [dataSource]="data"
* indicatorTypes="MoneyFlowIndex, AverageTrueRange"
* indicatorBrushes="Green, Blue">
* </igx-financial-chart>
* ```
*/
get indicatorBrushes(): string[];
set indicatorBrushes(v: string[]);
static ngAcceptInputType_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.
*
* ```html
* <igx-financial-chart
* [dataSource]="data"
* volumeThickness="2.5">
* </igx-financial-chart>
* ```
*/
get volumeThickness(): number;
set volumeThickness(v: number);
static ngAcceptInputType_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.
*
* ```html
* <igx-financial-chart
* [dataSource]="data"
* overlayTypes="BollingerBands"
* overlayThickness="2.5">
* </igx-financial-chart>
* ```
*/
get overlayThickness(): number;
set overlayThickness(v: number);
static ngAcceptInputType_overlayThickness: number | string;
/**
* The multiplier of financial overlay, e.g. BollingerBands overlay.
*/
get overlayMultiplier(): number;
set overlayMultiplier(v: number);
static ngAcceptInputType_overlayMultiplier: 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.
*
* ```html
* <igx-financial-chart
* [dataSource]="data"
* indicatorTypes="MoneyFlowIndex, AverageTrueRange"
* indicatorThickness="2.5">
* </igx-financial-chart>
* ```
*/
get indicatorThickness(): number;
set indicatorThickness(v: number);
static ngAcceptInputType_indicatorThickness: number | string;
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.
*
* ```html
* <igx-financial-chart
* [dataSource]="data"
* indicatorTypes="MoneyFlowIndex, AverageTrueRange"
* indicatorDisplayTypes="Line, Line">
* </igx-financial-chart>
* ```
*/
get indicatorDisplayTypes(): IgxIndicatorDisplayTypeCollection;
set indicatorDisplayTypes(v: IgxIndicatorDisplayTypeCollection);
static ngAcceptInputType_indicatorDisplayTypes: IgxIndicatorDisplayTypeCollection | 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`, `PriceChannelOverlay`, `RateOfChangeAndMomentum`, `RelativeStrengthIndex`, `SlowStochasticOscillator`, `StandardDeviation`, `StochRSI`, `TRIX`, `WilliamsPercentR`
*
* ```html
* <igx-financial-chart
* [dataSource]="data"
* indicatorTypes="AverageTrueRange"
* indicatorPeriod="8">
* </igx-financial-chart>
* ```
*/
get indicatorPeriod(): number;
set indicatorPeriod(v: number);
static ngAcceptInputType_indicatorPeriod: number | string;
/**
* The multiplier of financial indicators, e.g. BollingerBandWidth indicator.
*
* The `IndicatorMultiplier` property applies to only to BollingerBandWidth indicator type.
*
* ```html
* <igx-financial-chart
* [dataSource]="data"
* indicatorTypes="BollingerBandWidth"
* indicatorMultiplier="8">
* </igx-financial-chart>
* ```
*/
get indicatorMultiplier(): number;
set indicatorMultiplier(v: number);
static ngAcceptInputType_indicatorMultiplier: number | string;
/**
* The smoothing period of financial indicators, where applicable.
*
* The `IndicatorSmoothingPeriod` property applies to only to `FullStochasticOscillator` indicator type.
*
* ```html
* <igx-financial-chart
* [dataSource]="data"
* indicatorTypes="FullStochasticOscillator"
* indicatorSmoothingPeriod="8">
* </igx-financial-chart>
* ```
*/
get indicatorSmoothingPeriod(): number;
set indicatorSmoothingPeriod(v: number);
static ngAcceptInputType_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,
*
* ```html
* <igx-financial-chart
* [dataSource]="data"
* indicatorTypes="ChaikinOscillator"
* indicatorShortPeriod="8">
* </igx-financial-chart>
* ```
*/
get indicatorShortPeriod(): number;
set indicatorShortPeriod(v: number);
static ngAcceptInputType_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,
*
* ```html
* <igx-financial-chart
* [dataSource]="data"
* indicatorTypes="ChaikinOscillator"
* indicatorLongPeriod="8">
* </igx-financial-chart>
* ```
*/
get indicatorLongPeriod(): number;
set indicatorLongPeriod(v: number);
static ngAcceptInputType_indicatorLongPeriod: number | string;
/**
* The signal period of financial indicators, where applicable.
*
* The `IndicatorSignalPeriod` property applies to only to MovingAverageConvergenceDivergence indicator type.
*
* ```html
* <igx-financial-chart
* [dataSource]="data"
* indicatorTypes="MovingAverageConvergenceDivergence"
* indicatorSignalPeriod="8">
* </igx-financial-chart>
* ```
*/
get indicatorSignalPeriod(): number;
set indicatorSignalPeriod(v: number);
static ngAcceptInputType_indicatorSignalPeriod: number | string;
private _rangeSelectorOptions;
/**
* A FinancialChartRangeSelectorOptionCollection containing the available range selector options on the toolbar.
*/
get rangeSelectorOptions(): IgxFinancialChartRangeSelectorOptionCollection;
set rangeSelectorOptions(v: IgxFinancialChartRangeSelectorOptionCollection);
static ngAcceptInputType_rangeSelectorOptions: IgxFinancialChartRangeSelectorOptionCollection | string;
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.
*/
get customIndicatorNames(): IgxCustomIndicatorNameCollection;
set customIndicatorNames(v: IgxCustomIndicatorNameCollection);
static ngAcceptInputType_customIndicatorNames: IgxCustomIndicatorNameCollection | string;
get isVerticalZoomEnabled(): boolean;
set isVerticalZoomEnabled(v: boolean);
static ngAcceptInputType_isVerticalZoomEnabled: boolean | string;
/**
* Gets or sets stroke brush of major gridlines on x-axis of the zoom slider pane
*/
get zoomSliderXAxisMajorStroke(): string;
set zoomSliderXAxisMajorStroke(v: string);
/**
* Gets or sets thickness of major gridlines on x-axis of the zoom slider pane
*/
get zoomSliderXAxisMajorStrokeThickness(): number;
set zoomSliderXAxisMajorStrokeThickness(v: number);
static ngAcceptInputType_zoomSliderXAxisMajorStrokeThickness: number | string;
/**
* Gets or sets weather or not a legend is visible between toolbar and chart's plot area
*/
get isLegendVisible(): boolean;
set isLegendVisible(v: boolean);
static ngAcceptInputType_isLegendVisible: boolean | string;
/**
* Gets or sets minimum value on x-axis
*/
get xAxisMinimumValue(): Date;
set xAxisMinimumValue(v: Date);
/**
* Gets or sets maximum value on x-axis
*/
get xAxisMaximumValue(): Date;
set xAxisMaximumValue(v: Date);
findByName(name: string): any;
/**
* 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;
/**
* 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.
*/
get applyCustomIndicators(): EventEmitter<{
sender: any;
args: IgxFinancialChartCustomIndicatorArgs;
}>;
static ɵfac: i0.ɵɵFactoryDeclaration<IgxFinancialChartComponent, never>;
static ɵcmp: i0.ɵɵComponentDeclaration<IgxFinancialChartComponent, "igx-financial-chart", never, { "height": "height"; "width": "width"; "rangeSelectorTemplate": "rangeSelectorTemplate"; "chartTypePickerTemplate": "chartTypePickerTemplate"; "indicatorMenuTemplate": "indicatorMenuTemplate"; "toolbarTemplate": "toolbarTemplate"; "chartTemplate": "chartTemplate"; "dataSource": "dataSource"; "xAxisBreaks": "xAxisBreaks"; "leftMargin": "leftMargin"; "isHorizontalZoomEnabled": "isHorizontalZoomEnabled"; "toolbarHeight": "toolbarHeight"; "yAxisIsLogarithmic": "yAxisIsLogarithmic"; "yAxisLogarithmBase": "yAxisLogarithmBase"; "yAxisInterval": "yAxisInterval"; "yAxisMinimumValue": "yAxisMinimumValue"; "yAxisMaximumValue": "yAxisMaximumValue"; "yAxisMinorInterval": "yAxisMinorInterval"; "volumeType": "volumeType"; "xAxisMode": "xAxisMode"; "xAxisZoomMaximumCategoryRange": "xAxisZoomMaximumCategoryRange"; "xAxisZoomToCategoryStart": "xAxisZoomToCategoryStart"; "xAxisZoomMaximumItemSpan": "xAxisZoomMaximumItemSpan"; "xAxisZoomToCategoryRange": "xAxisZoomToCategoryRange"; "xAxisZoomToItemSpan": "xAxisZoomToItemSpan"; "yAxisMode": "yAxisMode"; "isToolbarVisible": "isToolbarVisible"; "chartType": "chartType"; "yAxisLabelHorizontalAlignment": "yAxisLabelHorizontalAlignment"; "isWindowSyncedToVisibleRange": "isWindowSyncedToVisibleRange"; "indicatorTypes": "indicatorTypes"; "overlayTypes": "overlayTypes"; "yAxisAbbreviateLargeNumbers": "yAxisAbbreviateLargeNumbers"; "resolution": "resolution"; "xAxisEnhancedIntervalPreferMoreCategoryLabels": "xAxisEnhancedIntervalPreferMoreCategoryLabels"; "yAxisEnhancedIntervalPreferMoreCategoryLabels": "yAxisEnhancedIntervalPreferMoreCategoryLabels"; "zoomSliderType": "zoomSliderType"; "negativeBrushes": "negativeBrushes"; "negativeOutlines": "negativeOutlines"; "overlayBrushes": "overlayBrushes"; "overlayOutlines": "overlayOutlines"; "volumeOutlines": "volumeOutlines"; "volumeBrushes": "volumeBrushes"; "indicatorNegativeBrushes": "indicatorNegativeBrushes"; "indicatorBrushes": "indicatorBrushes"; "volumeThickness": "volumeThickness"; "overlayThickness": "overlayThickness"; "overlayMultiplier": "overlayMultiplier"; "indicatorThickness": "indicatorThickness"; "indicatorDisplayTypes": "indicatorDisplayTypes"; "indicatorPeriod": "indicatorPeriod"; "indicatorMultiplier": "indicatorMultiplier"; "indicatorSmoothingPeriod": "indicatorSmoothingPeriod"; "indicatorShortPeriod": "indicatorShortPeriod"; "indicatorLongPeriod": "indicatorLongPeriod"; "indicatorSignalPeriod": "indicatorSignalPeriod"; "rangeSelectorOptions": "rangeSelectorOptions"; "customIndicatorNames": "customIndicatorNames"; "isVerticalZoomEnabled": "isVerticalZoomEnabled"; "zoomSliderXAxisMajorStroke": "zoomSliderXAxisMajorStroke"; "zoomSliderXAxisMajorStrokeThickness": "zoomSliderXAxisMajorStrokeThickness"; "isLegendVisible": "isLegendVisible"; "xAxisMinimumValue": "xAxisMinimumValue"; "xAxisMaximumValue": "xAxisMaximumValue"; }, { "applyCustomIndicators": "applyCustomIndicators"; }, never, never>;
}