igniteui-react-charts

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"; import { FinancialChartVolumeType } from './FinancialChartVolumeType'; import { FinancialChartXAxisMode } from './FinancialChartXAxisMode'; import { FinancialChartYAxisMode } from './FinancialChartYAxisMode'; import { HorizontalAlignment } from "igniteui-react-core"; import { FinancialChartZoomSliderType } from './FinancialChartZoomSliderType'; import { IgrFinancialIndicatorTypeCollection } from './igr-financial-indicator-type-collection'; import { IgrFinancialOverlayTypeCollection } from './igr-financial-overlay-type-collection'; import { IgrIndicatorDisplayTypeCollection } from './igr-indicator-display-type-collection'; import { IgrFinancialChartRangeSelectorOptionCollection } from './igr-financial-chart-range-selector-option-collection'; import { IgrFinancialChartCustomIndicatorArgs } from './igr-financial-chart-custom-indicator-args'; import { IgrCustomIndicatorNameCollection } from './igr-custom-indicator-name-collection'; import { IgCollection } from "igniteui-react-core"; import { DomainType } from "./DomainType"; 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<{ className: string; 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; set height(value: string); get height(): string; set width(value: string); get width(): string; private _rangeSelectorTemplate; get rangeSelectorTemplate(): any; set rangeSelectorTemplate(value: any); private _chartTypePickerTemplate; get chartTypePickerTemplate(): any; set chartTypePickerTemplate(value: any); private _indicatorMenuTemplate; get indicatorMenuTemplate(): any; set indicatorMenuTemplate(value: any); private _toolbarTemplate; get toolbarTemplate(): any; set toolbarTemplate(value: any); private _chartTemplate; get chartTemplate(): any; set chartTemplate(value: any); private _wrapper; private _initialized; private _toolbarElement; constructor(props: IIgrFinancialChartProps); private _checkToolbarSize; destroy(): void; componentWillUnmount(): void; private onDocumentClick; 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; private _chart; private _dataSource; set dataSource(value: Array<any>); get dataSource(): Array<any>; bindData(): void; private _toolRef; private _defaultTooltips; private _mounted; 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. */ get xAxisBreaks(): IgCollection<any, any>; set xAxisBreaks(v: IgCollection<any, any>); get leftMargin(): number; set leftMargin(v: number); get isHorizontalZoomEnabled(): boolean; set isHorizontalZoomEnabled(v: boolean); get toolbarHeight(): number; set toolbarHeight(v: number); /** * Gets domain type of this chart */ get domainType(): DomainType; /** * 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); /** * 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); /** * 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} * /> * ``` */ get yAxisInterval(): number; set yAxisInterval(v: 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} /> * ``` */ get yAxisMinimumValue(): number; set yAxisMinimumValue(v: 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} /> * ``` */ get yAxisMaximumValue(): number; set yAxisMaximumValue(v: 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} /> * ``` */ get yAxisMinorInterval(): number; set yAxisMinorInterval(v: number); /** * Gets the current minimum value for the Y-axis. */ get yAxisActualMinimum(): number; /** * Gets the current maximum value for the Y-axis. */ get 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" /> * ``` */ get volumeType(): FinancialChartVolumeType; set volumeType(v: 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} /> * ``` */ get xAxisMode(): FinancialChartXAxisMode; set xAxisMode(v: FinancialChartXAxisMode); /** * 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); /** * 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); /** * 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); /** * 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); /** * 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); /** * 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={this.state.yAxisMode} * dataSource={this.data} /> * ``` */ get yAxisMode(): FinancialChartYAxisMode; set yAxisMode(v: FinancialChartYAxisMode); /** * A boolean property controlling the visibility of the toolbar. */ get isToolbarVisible(): boolean; set isToolbarVisible(v: 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} /> * ``` */ get chartType(): FinancialChartType; set chartType(v: FinancialChartType); /** * Gets or sets Horizontal alignment of Y-axis labels. */ get yAxisLabelHorizontalAlignment(): HorizontalAlignment; set yAxisLabelHorizontalAlignment(v: 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. */ get isWindowSyncedToVisibleRange(): boolean; set isWindowSyncedToVisibleRange(v: 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" /> * ``` */ get indicatorTypes(): IgrFinancialIndicatorTypeCollection; set indicatorTypes(v: IgrFinancialIndicatorTypeCollection); 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} * overlayType ="PriceChannel" /> * ``` */ get overlayTypes(): IgrFinancialOverlayTypeCollection; set overlayTypes(v: IgrFinancialOverlayTypeCollection); /** * Gets or sets whether the large numbers on the Y-axis labels are abbreviated. */ get yAxisAbbreviateLargeNumbers(): boolean; set yAxisAbbreviateLargeNumbers(v: 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. */ get resolution(): number; set resolution(v: number); /** * 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); /** * 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); /** * 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} /> * ``` */ get zoomSliderType(): FinancialChartZoomSliderType; set zoomSliderType(v: 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" /> * ``` */ get negativeBrushes(): string[]; set negativeBrushes(v: 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"/> * ``` */ get negativeOutlines(): string[]; set negativeOutlines(v: 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" /> * ``` */ get overlayBrushes(): string[]; set overlayBrushes(v: 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" /> * ``` */ get overlayOutlines(): string[]; set overlayOutlines(v: 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" /> * ``` */ get volumeOutlines(): string[]; set volumeOutlines(v: 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" /> * ``` */ get volumeBrushes(): string[]; set volumeBrushes(v: 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"/> * ``` */ get indicatorNegativeBrushes(): string[]; set indicatorNegativeBrushes(v: 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" /> * ``` */ get indicatorBrushes(): string[]; set indicatorBrushes(v: 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}/> * ``` */ get volumeThickness(): number; set volumeThickness(v: 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} /> * ``` */ get overlayThickness(): number; set overlayThickness(v: number); /** * The multiplier of financial overlay, e.g. BollingerBands overlay. */ get overlayMultiplier(): number; set overlayMultiplier(v: 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} /> * ``` */ get indicatorThickness(): number; set indicatorThickness(v: 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" /> * ``` */ get indicatorDisplayTypes(): IgrIndicatorDisplayTypeCollection; set indicatorDisplayTypes(v: IgrIndicatorDisplayTypeCollection); /** * 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` * * ```ts * <IgrFinancialChart * width="100%" * height="400px" * dataSource={this.data} * indicatorPeriod={8} /> * ``` */ get indicatorPeriod(): number; set indicatorPeriod(v: number); /** * The multiplier of financial indicators, e.g. BollingerBandWidth indicator. * * The `IndicatorMultiplier` property applies to only to BollingerBandWidth indicator type. * * ```ts * <IgrFinancialChart * width="100%" * height="400px" * dataSource={this.data} * indicatorMultiplier= {8} /> * ``` */ get indicatorMultiplier(): number; set indicatorMultiplier(v: 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} /> * ``` */ get indicatorSmoothingPeriod(): number; set indicatorSmoothingPeriod(v: 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} /> * ``` */ get indicatorShortPeriod(): number; set indicatorShortPeriod(v: 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} /> * ``` */ get indicatorLongPeriod(): number; set indicatorLongPeriod(v: 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} /> * ``` */ get indicatorSignalPeriod(): number; set indicatorSignalPeriod(v: number); private _rangeSelectorOptions; /** * A FinancialChartRangeSelectorOptionCollection containing the available range selector options on the toolbar. */ get rangeSelectorOptions(): IgrFinancialChartRangeSelectorOptionCollection; set rangeSelectorOptions(v: IgrFinancialChartRangeSelectorOptionCollection); 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(): IgrCustomIndicatorNameCollection; set customIndicatorNames(v: IgrCustomIndicatorNameCollection); get isVerticalZoomEnabled(): boolean; set isVerticalZoomEnabled(v: boolean); /** * 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); /** * Gets or sets weather or not a legend is visible between toolbar and chart's plot area */ get isLegendVisible(): boolean; set isLegendVisible(v: boolean); /** * 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; 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. */ get applyCustomIndicators(): (s: IgrFinancialChart, e: IgrFinancialChartCustomIndicatorArgs) => void; set applyCustomIndicators(ev: (s: IgrFinancialChart, e: IgrFinancialChartCustomIndicatorArgs) => void); } export interface IIgrFinancialChartProps extends IIgrXYChartProps { width?: string; height?: string; legend?: any; /** * 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; /** * 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 */ 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 */ 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 */ 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 */ 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 */ 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. * * ```ts * <IgrFinancialChart * yAxisMode={this.state.yAxisMode} * dataSource={this.data} /> * ``` */ yAxisMode?: FinancialChartYAxisMode | string; /** * A boolean property controlling the visibility of the toolbar. */ 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?: IgrFinancialIndicatorTypeCollection | 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} * overlayType ="PriceChannel" /> * ``` */ overlayTypes?: IgrFinancialOverlayTypeCollection | 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 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. */ 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. */ 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. * * ```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 multiplier of financial overlay, e.g. BollingerBands overlay. */ 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. * * ```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?: IgrIndicatorDisplayTypeCollection | 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` * * ```ts * <IgrFinancialChart * width="100%" * height="400px" * dataSource={this.data} * indicatorPeriod={8} /> * ``` */ indicatorPeriod?: number | string; /** * The multiplier of financial indicators, e.g. BollingerBandWidth indicator. * * 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?: IgrFinancialChartRangeSelectorOptionCollection | 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?: IgrCustomIndicatorNameCollection | 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: IgrFinancialChartCustomIndicatorArgs) => void; }