igniteui-react-charts
Version:
Ignite UI React charting components for building rich data visualizations using TypeScript APIs.
1,477 lines (1,468 loc) • 48.7 kB
TypeScript
import { IgPoint } from "igniteui-react-core";
import { IgrCategoryAxisBase } from "./igr-category-axis-base";
import { IgrNumericYAxis } from "./igr-numeric-y-axis";
import { CategoryTransitionInMode } from "./CategoryTransitionInMode";
import { IgrAssigningCategoryStyleEventArgs } from "./igr-assigning-category-style-event-args";
import { IgrFinancialEventArgs } from "./igr-financial-event-args";
import { IgrSeries, IIgrSeriesProps } from "./igr-series";
import { FinancialSeries } from "./FinancialSeries";
import { IgrAxis } from "./igr-axis";
/**
* Represents the base class for all financial indicator and overlay series.
*
* The `FinancialSeries` represents the base class for all financial indicator and overlay series.
*
* ```ts
* <IgrDataChart
* dataSource={this.state.dataSource}
* width="700px"
* height="500px">
*
*
* <IgrCategoryXAxis name="xAxis" label="Date" />
* <IgrNumericYAxis name="yAxis" />
*
*
* <IgrFinancialPriceSeries
* name="series2"
* xAxisName="xAxis"
* yAxisName="yAxis"
* displayType="Candlestick"
* lowMemberPath="Low"
* highMemberPath="High"
* openMemberPath="Open"
* closeMemberPath="Close"
* volumeMemberPath="Volume" />
*
* </IgrDataChart>
* ```
*
* ```ts
* this.financialSeries = new IgrFinancialPriceSeries({name: "financialSeries"});
* this.financialSeries.dataSource = this.financialData;
* this.financialSeries.xAxis = this.timeXAxis;
* this.financialSeries.yAxis = this.numericYAxis;
* this.financialSeries.xAxisName = "timeXAxis";
* this.financialSeries.yAxisName = "numericYAxis";
* this.financialSeries.highMemberPath="High" ;
* this.financialSeries.lowMemberPath="Low" ;
* this.financialSeries.closeMemberPath="Close" ;
* this.financialSeries.openMemberPath="Open";
* this.financialSeries.volumeMemberPath="Volume";
* ```
*/
export declare abstract class IgrFinancialSeries<P extends IIgrFinancialSeriesProps = IIgrFinancialSeriesProps> extends IgrSeries<P> {
/**
* @hidden
*/
get i(): FinancialSeries;
constructor(props: P);
/**
* Gets whether the current series is a financial type series.
*/
get isFinancial(): boolean;
/**
* Gets or sets the brush to use for negative portions of the series.
*
* The `NegativeBrush` property is used to brush the negative portions of the series.
*
* ```ts
* <IgrDataChart
* dataSource={this.state.dataSource}
* width="700px"
* height="500px">
*
*
* <IgrCategoryXAxis name="xAxis" label="Date" />
* <IgrNumericYAxis name="yAxis" />
*
*
* <IgrFinancialPriceSeries
* name="series2"
* xAxisName="xAxis"
* yAxisName="yAxis"
* displayType="Candlestick"
* lowMemberPath="Low"
* highMemberPath="High"
* openMemberPath="Open"
* closeMemberPath="Close"
* volumeMemberPath="Volume"
* negativeBrush="Red" />
* </IgrDataChart>
* ```
*
* ```ts
* series.negativeBrush="red";
* ```
*/
get negativeBrush(): string;
set negativeBrush(v: string);
get hasValueAxis(): boolean;
get isValueAxisInverted(): boolean;
/**
* Gets or sets the effective x-axis for the current FinancialSeries object.
*
* Use `XAxis` property to set effective x-axis for the current FinancialSeries object.
*
* ```ts
* <IgrDataChart
* dataSource={this.state.dataSource}
* width="700px"
* height="500px">
*
*
* <IgrCategoryXAxis name="xAxis" label="Date" />
* <IgrNumericYAxis name="yAxis" />
*
*
* <IgrFinancialPriceSeries
* name="series2"
* xAxisName="xAxis"
* yAxisName="yAxis"
* displayType="Candlestick"
* lowMemberPath="Low"
* highMemberPath="High"
* openMemberPath="Open"
* closeMemberPath="Close"
* volumeMemberPath="Volume" />
* </IgrDataChart>
* ```
*
* ```ts
* this.financialSeries = new IgrFinancialPriceSeries({name: "financialSeries"});
* this.financialSeries.dataSource = this.financialData;
* this.financialSeries.xAxis = this.timeXAxis;
* this.financialSeries.yAxis = this.numericYAxis;
* this.financialSeries.xAxisName = "timeXAxis";
* this.financialSeries.yAxisName = "numericYAxis";
* this.financialSeries.highMemberPath="High" ;
* this.financialSeries.lowMemberPath="Low";
* this.financialSeries.closeMemberPath="Close";
* this.financialSeries.openMemberPath="Open";
* this.financialSeries.volumeMemberPath="Volume";
* ```
*/
get xAxis(): IgrCategoryAxisBase;
set xAxis(v: IgrCategoryAxisBase);
private _xAxisName;
/**
* Gets or sets the name to use to resolve xAxis from markup.
*/
get xAxisName(): string;
set xAxisName(v: string);
/**
* Gets or sets the effective y-axis for the current FinancialSeries object.
*
* Use `YAxis` property to set the effective y-axis for the current FinancialSeries object.
*
* ```ts
* <IgrDataChart
* dataSource={this.state.dataSource}
* width="700px"
* height="500px">
*
*
* <IgrCategoryXAxis name="xAxis" label="Date" />
* <IgrNumericYAxis name="yAxis" />
*
*
* <IgrFinancialPriceSeries
* name="series2"
* xAxisName="xAxis"
* yAxisName="yAxis"
* displayType="Candlestick"
* lowMemberPath="Low"
* highMemberPath="High"
* openMemberPath="Open"
* closeMemberPath="Close"
* volumeMemberPath="Volume" />
* </IgrDataChart>
* ```
*
* ```ts
* this.financialSeries = new IgrFinancialPriceSeries({name: "financialSeries"});
* this.financialSeries.dataSource = this.financialData;
* this.financialSeries.xAxis = this.timeXAxis;
* this.financialSeries.yAxis = this.numericYAxis;
* this.financialSeries.xAxisName = "timeXAxis";
* this.financialSeries.yAxisName = "numericYAxis";
* this.financialSeries.highMemberPath="High" ;
* this.financialSeries.lowMemberPath="Low";
* this.financialSeries.closeMemberPath="Close";
* this.financialSeries.openMemberPath="Open";
* this.financialSeries.volumeMemberPath="Volume";
* ```
*/
get yAxis(): IgrNumericYAxis;
set yAxis(v: IgrNumericYAxis);
private _yAxisName;
/**
* Gets or sets the name to use to resolve yAxis from markup.
*/
get yAxisName(): string;
set yAxisName(v: string);
/**
* Gets or sets the open mapping property for the current series object.
*
* The `OpenMemberPath` property is used for open mapping of the current series object.
*
* ```ts
* <IgrDataChart
* dataSource={this.state.dataSource}
* width="700px"
* height="500px">
*
*
* <IgrCategoryXAxis name="xAxis" label="Date" />
* <IgrNumericYAxis name="yAxis" />
*
*
* <IgrFinancialPriceSeries
* name="series2"
* xAxisName="xAxis"
* yAxisName="yAxis"
* displayType="Candlestick"
* lowMemberPath="Low"
* highMemberPath="High"
* openMemberPath="Open"
* closeMemberPath="Close"
* volumeMemberPath="Volume" />
*
* </IgrDataChart>
* ```
*
* ```ts
* this.series = new IgrFinancialPriceSeries({name: "series"});
* this.series.dataSource = this.financialData;
* this.series.xAxis = this.timeXAxis;
* this.series.yAxis = this.numericYAxis;
* this.series.xAxisName = "timeXAxis";
* this.series.yAxisName = "numericYAxis";
* this.series.highMemberPath="High"
* this.series.lowMemberPath="Low"
* this.series.closeMemberPath="Close"
* this.series.openMemberPath="Open"
* this.series.volumeMemberPath="Volume"
* ```
*/
get openMemberPath(): string;
set openMemberPath(v: string);
/**
* Gets or sets the high mapping property for the current series object.
*
* Use `HighMemberPath` propert for high mapping of the current series object.
*
* ```ts
* <IgrDataChart
* dataSource={this.state.dataSource}
* width="700px"
* height="500px">
*
*
* <IgrCategoryXAxis name="xAxis" label="Date" />
* <IgrNumericYAxis name="yAxis" />
*
*
* <IgrFinancialPriceSeries
* name="series2"
* xAxisName="xAxis"
* yAxisName="yAxis"
* displayType="Candlestick"
* lowMemberPath="Low"
* highMemberPath="High"
* openMemberPath="Open"
* closeMemberPath="Close"
* volumeMemberPath="Volume" />
* </IgrDataChart>
* ```
*
* ```ts
* this.financialSeries = new IgrFinancialPriceSeries({name: "financialSeries"});
* this.financialSeries.dataSource = this.financialData;
* this.financialSeries.xAxis = this.timeXAxis;
* this.financialSeries.yAxis = this.numericYAxis;
* this.financialSeries.xAxisName = "timeXAxis";
* this.financialSeries.yAxisName = "numericYAxis";
* this.financialSeries.highMemberPath="High" ;
* this.financialSeries.lowMemberPath="Low";
* this.financialSeries.closeMemberPath="Close";
* this.financialSeries.openMemberPath="Open";
* this.financialSeries.volumeMemberPath="Volume";
* ```
*/
get highMemberPath(): string;
set highMemberPath(v: string);
/**
* Gets or sets the low mapping property for the current series object.
*
* The `LowMemberPath` is used for low mapping property of the current series object.
*
* ```ts
* <IgrDataChart
* dataSource={this.state.dataSource}
* width="700px"
* height="500px">
*
*
* <IgrCategoryXAxis name="xAxis" label="Date" />
* <IgrNumericYAxis name="yAxis" />
*
*
* <IgrFinancialPriceSeries
* name="series2"
* xAxisName="xAxis"
* yAxisName="yAxis"
* displayType="Candlestick"
* lowMemberPath="Low"
* highMemberPath="High"
* openMemberPath="Open"
* closeMemberPath="Close"
* volumeMemberPath="Volume" />
*
* </IgrDataChart>
* ```
*
* ```ts
* this.financialSeries = new IgrFinancialPriceSeries({name: "financialSeries"});
* this.financialSeries.dataSource = this.financialData;
* this.financialSeries.xAxis = this.timeXAxis;
* this.financialSeries.yAxis = this.numericYAxis;
* this.financialSeries.xAxisName = "timeXAxis";
* this.financialSeries.yAxisName = "numericYAxis";
* this.financialSeries.highMemberPath="High" ;
* this.financialSeries.lowMemberPath="Low";
* this.financialSeries.closeMemberPath="Close";
* this.financialSeries.openMemberPath="Open";
* this.financialSeries.volumeMemberPath="Volume";
* ```
*/
get lowMemberPath(): string;
set lowMemberPath(v: string);
/**
* Gets or sets the close mapping property for the current series object.
*
* Use `CloseMemberPath` property for the close mapping of the current series object.
*
* ```ts
* <IgrDataChart
* dataSource={this.state.dataSource}
* width="700px"
* height="500px">
*
*
* <IgrCategoryXAxis name="xAxis" label="Date" />
* <IgrNumericYAxis name="yAxis" />
*
*
* <IgrFinancialPriceSeries
* name="series2"
* xAxisName="xAxis"
* yAxisName="yAxis"
* displayType="Candlestick"
* lowMemberPath="Low"
* highMemberPath="High"
* openMemberPath="Open"
* closeMemberPath="Close"
* volumeMemberPath="Volume" />
*
* </IgrDataChart>
* ```
*
* ```ts
* this.financialSeries = new IgrFinancialPriceSeries({name: "financialSeries"});
* this.financialSeries.dataSource = this.financialData;
* this.financialSeries.xAxis = this.timeXAxis;
* this.financialSeries.yAxis = this.numericYAxis;
* this.financialSeries.xAxisName = "timeXAxis";
* this.financialSeries.yAxisName = "numericYAxis";
* this.financialSeries.highMemberPath="High"
* this.financialSeries.lowMemberPath="Low"
* this.financialSeries.closeMemberPath="Close"
* this.financialSeries.openMemberPath="Open"
* this.financialSeries.volumeMemberPath="Volume"
* ```
*/
get closeMemberPath(): string;
set closeMemberPath(v: string);
/**
* Gets or sets the volume mapping property for the current series object.
*
* The `VolumeMemberPath` property is used for the volume mapping property of the current series object.
*
* ```ts
* <IgrDataChart
* dataSource={this.state.dataSource}
* width="700px"
* height="500px">
*
*
* <IgrCategoryXAxis name="xAxis" label="Date" />
* <IgrNumericYAxis name="yAxis" />
*
*
* <IgrFinancialPriceSeries
* name="series2"
* xAxisName="xAxis"
* yAxisName="yAxis"
* displayType="Candlestick"
* lowMemberPath="Low"
* highMemberPath="High"
* openMemberPath="Open"
* closeMemberPath="Close"
* volumeMemberPath="Volume" />
* </IgrDataChart>
* ```
*
* ```ts
* this.financialSeries = new IgrFinancialPriceSeries({name: "financialSeries"});
* this.financialSeries.dataSource = this.financialData;
* this.financialSeries.xAxis = this.timeXAxis;
* this.financialSeries.yAxis = this.numericYAxis;
* this.financialSeries.xAxisName = "timeXAxis";
* this.financialSeries.yAxisName = "numericYAxis";
* this.financialSeries.highMemberPath="High" ;
* this.financialSeries.lowMemberPath="Low";
* this.financialSeries.closeMemberPath="Close";
* this.financialSeries.openMemberPath="Open";
* this.financialSeries.volumeMemberPath="Volume";
* ```
*/
get volumeMemberPath(): string;
set volumeMemberPath(v: string);
/**
* Gets or sets the highlighted X value mapping property for the current series object.
*/
get highlightedOpenMemberPath(): string;
set highlightedOpenMemberPath(v: string);
/**
* Gets or sets the highlighted Y value mapping property for the current series object.
*/
get highlightedHighMemberPath(): string;
set highlightedHighMemberPath(v: string);
/**
* Gets or sets the highlighted X value mapping property for the current series object.
*/
get highlightedLowMemberPath(): string;
set highlightedLowMemberPath(v: string);
/**
* Gets or sets the highlighted Y value mapping property for the current series object.
*/
get highlightedCloseMemberPath(): string;
set highlightedCloseMemberPath(v: string);
/**
* Gets or sets the highlighted Y value mapping property for the current series object.
*/
get highlightedVolumeMemberPath(): string;
set highlightedVolumeMemberPath(v: string);
/**
* Gets or sets whether this category series should allow custom style overrides of its individual visuals.
*
* The `IsCustomCategoryStyleAllowed` property is used to check if the category series should allow custom style.
*
* ```ts
* <IgrDataChart
* dataSource={this.state.dataSource}
* width="700px"
* height="500px">
*
*
* <IgrCategoryXAxis name="xAxis" label="Date" />
* <IgrNumericYAxis name="yAxis" />
*
*
* <IgrFinancialPriceSeries
* name="series2"
* xAxisName="xAxis"
* yAxisName="yAxis"
* displayType="Candlestick"
* lowMemberPath="Low"
* highMemberPath="High"
* openMemberPath="Open"
* closeMemberPath="Close"
* volumeMemberPath="Volume"
* isCustomCategoryStyleAllowed="True" />
* </IgrDataChart>
* ```
*
* ```ts
* series.isCustomCategoryStyleAllowed= true;
* ```
*/
get isCustomCategoryStyleAllowed(): boolean;
set isCustomCategoryStyleAllowed(v: boolean);
/**
* Gets or sets the method by which to animate the data into the chart when the chart data source is swapped.
* Note: Transitions are not currently supported for stacked series.
*
* The `TransitionInMode` property is used to gets or sets the method by which to animate the data into the chart when the chart data source is swapped.
*
* ```ts
* <IgrDataChart
* dataSource={this.state.dataSource}
* width="700px"
* height="500px">
*
*
* <IgrCategoryXAxis name="xAxis" label="Date" />
* <IgrNumericYAxis name="yAxis" />
*
*
* <IgrFinancialPriceSeries
* name="series2"
* xAxisName="xAxis"
* yAxisName="yAxis"
* displayType="Candlestick"
* lowMemberPath="Low"
* highMemberPath="High"
* openMemberPath="Open"
* closeMemberPath="Close"
* volumeMemberPath="Volume"
* transitionInMode="Auto"/>
* </IgrDataChart>
* ```
*
* ```ts
* series.transitionInMode =CategoryTransitionInMode.Auto;
* ```
*/
get transitionInMode(): CategoryTransitionInMode;
set transitionInMode(v: CategoryTransitionInMode);
/**
* Gets or sets whether the series should transition into the plot area when a new data source is assigned.
* Note: Transitions are not currently supported for stacked series.
*
* The `IsTransitionInEnabled` property is used to check if the series should transition into the plot area when a new data source is assigned.
*
* ```ts
* <IgrDataChart
* dataSource={this.state.dataSource}
* width="700px"
* height="500px">
*
*
* <IgrCategoryXAxis name="xAxis" label="Date" />
* <IgrNumericYAxis name="yAxis" />
*
*
* <IgrFinancialPriceSeries
* name="series2"
* xAxisName="xAxis"
* yAxisName="yAxis"
* displayType="Candlestick"
* lowMemberPath="Low"
* highMemberPath="High"
* openMemberPath="Open"
* closeMemberPath="Close"
* volumeMemberPath="Volume"
* isTransitionInEnabled="true" />
*
* </IgrDataChart>
* ```
*
* ```ts
* series.isTransitionInEnabled= true;
* ```
*/
get isTransitionInEnabled(): boolean;
set isTransitionInEnabled(v: boolean);
/**
* Overridden by derived series classes to indicate when negative colors are supported or not.
*/
get isNegativeColorSupported(): boolean;
bindAxes(axes: IgrAxis[]): void;
findByName(name: string): any;
protected _styling(container: any, component: any, parent?: any): void;
getItemValue(item: any, memberPathName: string): any;
/**
* Gets the value of a requested member path from the series.
* @param memberPathName * The property name of a valid member path for the series
*/
getMemberPathValue(memberPathName: string): string;
getPreviousOrExactIndex(world: IgPoint, skipUnknowns: boolean): number;
getNextOrExactIndex(world: IgPoint, skipUnknowns: boolean): number;
/**
* Returns the offset value for this series if grouped on a category axis.
*
* The `GetOffsetValue` method returns the offset value for this series if grouped on a category axis.
*
* ```ts
* number offset= series.getOffsetValue();
* ```
*/
getOffsetValue(): number;
/**
* Returns the width of the category grouping this series is in.
*
* The `GetCategoryWidth` method returns the width of the category grouping this series is in.
*
* ```ts
* number width = series.getCategoryWidth();
* ```
*/
getCategoryWidth(): number;
getSeriesValuePosition(world: IgPoint, useInterpolation: boolean, skipUnknowns: boolean): IgPoint;
getSeriesValue(world: IgPoint, useInterpolation: boolean, skipUnknowns: boolean): number;
getSeriesHighValue(world: IgPoint, useInterpolation: boolean, skipUnknowns: boolean): number;
getSeriesLowValue(world: IgPoint, useInterpolation: boolean, skipUnknowns: boolean): number;
getSeriesCloseValue(world: IgPoint, useInterpolation: boolean, skipUnknowns: boolean): number;
getSeriesOpenValue(world: IgPoint, useInterpolation: boolean, skipUnknowns: boolean): number;
getSeriesVolumeValue(world: IgPoint, useInterpolation: boolean, skipUnknowns: boolean): number;
getSeriesHighValuePosition(world: IgPoint, useInterpolation: boolean, skipUnknowns: boolean): IgPoint;
getSeriesLowValuePosition(world: IgPoint, useInterpolation: boolean, skipUnknowns: boolean): IgPoint;
getSeriesOpenValuePosition(world: IgPoint, useInterpolation: boolean, skipUnknowns: boolean): IgPoint;
getSeriesCloseValuePosition(world: IgPoint, useInterpolation: boolean, skipUnknowns: boolean): IgPoint;
getSeriesVolumeValuePosition(world: IgPoint, useInterpolation: boolean, skipUnknowns: boolean): IgPoint;
/**
* Determine if object can be used as YAxis
* @param axis * The object to check
*
* Use `CanUseAsYAxis` method to determine if the object can be used as YAxis.
*
* ```ts
* boolean canY =series.canUseAsYAxis(yAxis);
* ```
*/
canUseAsYAxis(axis: any): boolean;
/**
* Determine if object can be used as XAxis
* @param axis * The object to check
*
* Use `CanUseAsXAxis` method to determine if the object can be used as XAxis.
*
* ```ts
* boolean canX =series.canUseAsXAxis(xAxis);
* ```
*/
canUseAsXAxis(axis: any): boolean;
/**
* Gets the precise item index, if possible, based on the closeness to the previous or next whole integer. If the series cannot provide this information, GetExactItemIndex will return the same integer value as GetItemIndex.
* @param world * The world position for which to return the index.
*
* The `GetExactItemIndex` method gets the precise item index, if possible, based on the closeness to the previous or next whole integer.
*
* If the series cannot provide this information, GetExactItemIndex will return the same integer value as GetItemIndex.
*
* ```ts
* number index = series.getExactItemIndex(world);
* ```
*/
getExactItemIndex(world: IgPoint): number;
/**
* Gets the index of the item that resides at the provided world coordinates.
* @param world * The world coordinates of the requested item.
*
* The `GetItemIndex` method gets the index of the item that resides at the provided world coordinates.
*
* ```ts
* number itemindex= series.getItemIndex(world);
* ```
*/
getItemIndex(world: IgPoint): number;
/**
* Gets the item that is the best match for the specified world coordinates.
* @param world * The world coordinates to use.
*
* The `GetItem` method gets the item that is the best match for the specified world coordinates.
*/
getItem(world: IgPoint): any;
setNegativeColors(negativeBrush: string, negativeOutline: string): void;
private _assigningCategoryStyle;
private _assigningCategoryStyle_wrapped;
/**
* Event raised when Assigning Category Style
*
* The `AssigningCategoryStyle` event raised when assigning Category Style.
*
* ```ts
* series.assigningCategoryStyle= this.chart_AssigningCategoryStyle;
* chart_AssigningCategoryStyle(sender :any,args: AssigningCategoryStyleEventArgs )
* {
*
*
* }
* ```
*
* ```ts
* <IgrDataChart
* ref={this.onChartRef}
* dataSource={this.data}
* width="100%"
* height="100%" >
*
* <IgrCategoryXAxis name="xAxis" label="Label" />
* <IgrNumericYAxis name="yAxis" />
*
* <IgrFinancialPriceSeries
* name="series1"
* xAxisName="xAxis"
* yAxisName="yAxis"
* highMemberPath="High"
* lowMemberPath="Low"
* closeMemberPath="Close"
* openMemberPath="Open"
* volumeMemberPath="Volume"
* trendLineType={this.state.trendLineType}
* displayType= "Candlestick"
* trendLinePeriod = {2}
* actualTrendLineBrush= "blue"
* assigningCategoryStyle ={this.chart_assigningCategoryStyle}/>
*
* </IgrDataChart>
* ```
*
* ```ts
* series.assigningCategoryStyle= this.chart_AssigningCategoryStyle;
* chart_AssigningCategoryStyle(sender :IgrFinancialSeries,args: AssigningCategoryStyleEventArgs )
* {
*
*
* }
* ```
*/
get assigningCategoryStyle(): (s: IgrFinancialSeries, e: IgrAssigningCategoryStyleEventArgs) => void;
set assigningCategoryStyle(ev: (s: IgrFinancialSeries, e: IgrAssigningCategoryStyleEventArgs) => void);
private _typical;
private _typical_wrapped;
/**
* Handle this event in order to perform a custom typical price calculation.
*
* Use `Typical` event to perform a custom typical price calculation.
*
* ```ts
* series.typical= this.chart_typical;
*
* chart_typical(sender :any,args: FinancialEventArgs )
* {
*
*
* }
* ```
*
* ```ts
* <IgrDataChart
* ref={this.onChartRef}
* dataSource={this.data}
* width="100%"
* height="100%" >
*
* <IgrCategoryXAxis name="xAxis" label="Label" />
* <IgrNumericYAxis name="yAxis" />
*
* <IgrFinancialPriceSeries
* name="series1"
* xAxisName="xAxis"
* yAxisName="yAxis"
* highMemberPath="High"
* lowMemberPath="Low"
* closeMemberPath="Close"
* openMemberPath="Open"
* volumeMemberPath="Volume"
* trendLineType={this.state.trendLineType}
* displayType= "Candlestick"
* trendLinePeriod = {2}
* actualTrendLineBrush= "blue"
* typical ={this.chart_typical}/>
*
* </IgrDataChart>
* ```
*
* ```ts
* this.financialSeries.typical=this.chart_typical;
* }
* public chart_typical =( s:IgrFinancialSeries, e: FinancialEventArgs) => {
*
* }
* ```
*/
get typical(): (s: IgrFinancialSeries, e: IgrFinancialEventArgs) => void;
set typical(ev: (s: IgrFinancialSeries, e: IgrFinancialEventArgs) => void);
private _typicalBasedOn;
private _typicalBasedOn_wrapped;
/**
* Handle this event in order to specify which columns the Typical price calculation is based on.
*
* Use `TypicalBasedOn` event to specify which columns the Typical price calculation is based on.
*
* ```ts
* series.typicalBasedOn= this.chart_typicalBasedOn;
* chart_typicalBasedOn(sender :any,args: FinancialEventArgs )
* {
*
* }
* ```
*
* ````ts
* <IgrDataChart
* ref={this.onChartRef}
* dataSource={this.data}
* width="100%"
* height="100%" >
*
* <IgrCategoryXAxis name="xAxis" label="Label" />
* <IgrNumericYAxis name="yAxis" />
*
* <IgrFinancialPriceSeries
* name="series1"
* xAxisName="xAxis"
* yAxisName="yAxis"
* highMemberPath="High"
* lowMemberPath="Low"
* closeMemberPath="Close"
* openMemberPath="Open"
* volumeMemberPath="Volume"
* trendLineType={this.state.trendLineType}
* displayType= "Candlestick"
* trendLinePeriod = {2}
* actualTrendLineBrush= "blue"
* typicalBasedOn ={this.chart_typicalBasedOn}/>
*
* </IgrDataChart>
* ```
*
* ```ts
* this.financialSeries.typicalBasedOn=this.chart_typicalBasedOn;
* public chart_typicalBasedOn =( s:IgrFinancialSeries, e: FinancialEventArgs) => {
*
* }
* ````
*/
get typicalBasedOn(): (s: IgrFinancialSeries, e: IgrFinancialEventArgs) => void;
set typicalBasedOn(ev: (s: IgrFinancialSeries, e: IgrFinancialEventArgs) => void);
}
export interface IIgrFinancialSeriesProps extends IIgrSeriesProps {
/**
* Gets or sets the brush to use for negative portions of the series.
*
* The `NegativeBrush` property is used to brush the negative portions of the series.
*
* ```ts
* <IgrDataChart
* dataSource={this.state.dataSource}
* width="700px"
* height="500px">
*
*
* <IgrCategoryXAxis name="xAxis" label="Date" />
* <IgrNumericYAxis name="yAxis" />
*
*
* <IgrFinancialPriceSeries
* name="series2"
* xAxisName="xAxis"
* yAxisName="yAxis"
* displayType="Candlestick"
* lowMemberPath="Low"
* highMemberPath="High"
* openMemberPath="Open"
* closeMemberPath="Close"
* volumeMemberPath="Volume"
* negativeBrush="Red" />
* </IgrDataChart>
* ```
*
* ```ts
* series.negativeBrush="red";
* ```
*/
negativeBrush?: string;
/**
* Gets or sets the effective x-axis for the current FinancialSeries object.
*
* Use `XAxis` property to set effective x-axis for the current FinancialSeries object.
*
* ```ts
* <IgrDataChart
* dataSource={this.state.dataSource}
* width="700px"
* height="500px">
*
*
* <IgrCategoryXAxis name="xAxis" label="Date" />
* <IgrNumericYAxis name="yAxis" />
*
*
* <IgrFinancialPriceSeries
* name="series2"
* xAxisName="xAxis"
* yAxisName="yAxis"
* displayType="Candlestick"
* lowMemberPath="Low"
* highMemberPath="High"
* openMemberPath="Open"
* closeMemberPath="Close"
* volumeMemberPath="Volume" />
* </IgrDataChart>
* ```
*
* ```ts
* this.financialSeries = new IgrFinancialPriceSeries({name: "financialSeries"});
* this.financialSeries.dataSource = this.financialData;
* this.financialSeries.xAxis = this.timeXAxis;
* this.financialSeries.yAxis = this.numericYAxis;
* this.financialSeries.xAxisName = "timeXAxis";
* this.financialSeries.yAxisName = "numericYAxis";
* this.financialSeries.highMemberPath="High" ;
* this.financialSeries.lowMemberPath="Low";
* this.financialSeries.closeMemberPath="Close";
* this.financialSeries.openMemberPath="Open";
* this.financialSeries.volumeMemberPath="Volume";
* ```
*/
xAxis?: IgrCategoryAxisBase;
/**
* Gets or sets the name to use to resolve xAxis from markup.
*/
xAxisName?: string;
/**
* Gets or sets the effective y-axis for the current FinancialSeries object.
*
* Use `YAxis` property to set the effective y-axis for the current FinancialSeries object.
*
* ```ts
* <IgrDataChart
* dataSource={this.state.dataSource}
* width="700px"
* height="500px">
*
*
* <IgrCategoryXAxis name="xAxis" label="Date" />
* <IgrNumericYAxis name="yAxis" />
*
*
* <IgrFinancialPriceSeries
* name="series2"
* xAxisName="xAxis"
* yAxisName="yAxis"
* displayType="Candlestick"
* lowMemberPath="Low"
* highMemberPath="High"
* openMemberPath="Open"
* closeMemberPath="Close"
* volumeMemberPath="Volume" />
* </IgrDataChart>
* ```
*
* ```ts
* this.financialSeries = new IgrFinancialPriceSeries({name: "financialSeries"});
* this.financialSeries.dataSource = this.financialData;
* this.financialSeries.xAxis = this.timeXAxis;
* this.financialSeries.yAxis = this.numericYAxis;
* this.financialSeries.xAxisName = "timeXAxis";
* this.financialSeries.yAxisName = "numericYAxis";
* this.financialSeries.highMemberPath="High" ;
* this.financialSeries.lowMemberPath="Low";
* this.financialSeries.closeMemberPath="Close";
* this.financialSeries.openMemberPath="Open";
* this.financialSeries.volumeMemberPath="Volume";
* ```
*/
yAxis?: IgrNumericYAxis;
/**
* Gets or sets the name to use to resolve yAxis from markup.
*/
yAxisName?: string;
/**
* Gets or sets the open mapping property for the current series object.
*
* The `OpenMemberPath` property is used for open mapping of the current series object.
*
* ```ts
* <IgrDataChart
* dataSource={this.state.dataSource}
* width="700px"
* height="500px">
*
*
* <IgrCategoryXAxis name="xAxis" label="Date" />
* <IgrNumericYAxis name="yAxis" />
*
*
* <IgrFinancialPriceSeries
* name="series2"
* xAxisName="xAxis"
* yAxisName="yAxis"
* displayType="Candlestick"
* lowMemberPath="Low"
* highMemberPath="High"
* openMemberPath="Open"
* closeMemberPath="Close"
* volumeMemberPath="Volume" />
*
* </IgrDataChart>
* ```
*
* ```ts
* this.series = new IgrFinancialPriceSeries({name: "series"});
* this.series.dataSource = this.financialData;
* this.series.xAxis = this.timeXAxis;
* this.series.yAxis = this.numericYAxis;
* this.series.xAxisName = "timeXAxis";
* this.series.yAxisName = "numericYAxis";
* this.series.highMemberPath="High"
* this.series.lowMemberPath="Low"
* this.series.closeMemberPath="Close"
* this.series.openMemberPath="Open"
* this.series.volumeMemberPath="Volume"
* ```
*/
openMemberPath?: string;
/**
* Gets or sets the high mapping property for the current series object.
*
* Use `HighMemberPath` propert for high mapping of the current series object.
*
* ```ts
* <IgrDataChart
* dataSource={this.state.dataSource}
* width="700px"
* height="500px">
*
*
* <IgrCategoryXAxis name="xAxis" label="Date" />
* <IgrNumericYAxis name="yAxis" />
*
*
* <IgrFinancialPriceSeries
* name="series2"
* xAxisName="xAxis"
* yAxisName="yAxis"
* displayType="Candlestick"
* lowMemberPath="Low"
* highMemberPath="High"
* openMemberPath="Open"
* closeMemberPath="Close"
* volumeMemberPath="Volume" />
* </IgrDataChart>
* ```
*
* ```ts
* this.financialSeries = new IgrFinancialPriceSeries({name: "financialSeries"});
* this.financialSeries.dataSource = this.financialData;
* this.financialSeries.xAxis = this.timeXAxis;
* this.financialSeries.yAxis = this.numericYAxis;
* this.financialSeries.xAxisName = "timeXAxis";
* this.financialSeries.yAxisName = "numericYAxis";
* this.financialSeries.highMemberPath="High" ;
* this.financialSeries.lowMemberPath="Low";
* this.financialSeries.closeMemberPath="Close";
* this.financialSeries.openMemberPath="Open";
* this.financialSeries.volumeMemberPath="Volume";
* ```
*/
highMemberPath?: string;
/**
* Gets or sets the low mapping property for the current series object.
*
* The `LowMemberPath` is used for low mapping property of the current series object.
*
* ```ts
* <IgrDataChart
* dataSource={this.state.dataSource}
* width="700px"
* height="500px">
*
*
* <IgrCategoryXAxis name="xAxis" label="Date" />
* <IgrNumericYAxis name="yAxis" />
*
*
* <IgrFinancialPriceSeries
* name="series2"
* xAxisName="xAxis"
* yAxisName="yAxis"
* displayType="Candlestick"
* lowMemberPath="Low"
* highMemberPath="High"
* openMemberPath="Open"
* closeMemberPath="Close"
* volumeMemberPath="Volume" />
*
* </IgrDataChart>
* ```
*
* ```ts
* this.financialSeries = new IgrFinancialPriceSeries({name: "financialSeries"});
* this.financialSeries.dataSource = this.financialData;
* this.financialSeries.xAxis = this.timeXAxis;
* this.financialSeries.yAxis = this.numericYAxis;
* this.financialSeries.xAxisName = "timeXAxis";
* this.financialSeries.yAxisName = "numericYAxis";
* this.financialSeries.highMemberPath="High" ;
* this.financialSeries.lowMemberPath="Low";
* this.financialSeries.closeMemberPath="Close";
* this.financialSeries.openMemberPath="Open";
* this.financialSeries.volumeMemberPath="Volume";
* ```
*/
lowMemberPath?: string;
/**
* Gets or sets the close mapping property for the current series object.
*
* Use `CloseMemberPath` property for the close mapping of the current series object.
*
* ```ts
* <IgrDataChart
* dataSource={this.state.dataSource}
* width="700px"
* height="500px">
*
*
* <IgrCategoryXAxis name="xAxis" label="Date" />
* <IgrNumericYAxis name="yAxis" />
*
*
* <IgrFinancialPriceSeries
* name="series2"
* xAxisName="xAxis"
* yAxisName="yAxis"
* displayType="Candlestick"
* lowMemberPath="Low"
* highMemberPath="High"
* openMemberPath="Open"
* closeMemberPath="Close"
* volumeMemberPath="Volume" />
*
* </IgrDataChart>
* ```
*
* ```ts
* this.financialSeries = new IgrFinancialPriceSeries({name: "financialSeries"});
* this.financialSeries.dataSource = this.financialData;
* this.financialSeries.xAxis = this.timeXAxis;
* this.financialSeries.yAxis = this.numericYAxis;
* this.financialSeries.xAxisName = "timeXAxis";
* this.financialSeries.yAxisName = "numericYAxis";
* this.financialSeries.highMemberPath="High"
* this.financialSeries.lowMemberPath="Low"
* this.financialSeries.closeMemberPath="Close"
* this.financialSeries.openMemberPath="Open"
* this.financialSeries.volumeMemberPath="Volume"
* ```
*/
closeMemberPath?: string;
/**
* Gets or sets the volume mapping property for the current series object.
*
* The `VolumeMemberPath` property is used for the volume mapping property of the current series object.
*
* ```ts
* <IgrDataChart
* dataSource={this.state.dataSource}
* width="700px"
* height="500px">
*
*
* <IgrCategoryXAxis name="xAxis" label="Date" />
* <IgrNumericYAxis name="yAxis" />
*
*
* <IgrFinancialPriceSeries
* name="series2"
* xAxisName="xAxis"
* yAxisName="yAxis"
* displayType="Candlestick"
* lowMemberPath="Low"
* highMemberPath="High"
* openMemberPath="Open"
* closeMemberPath="Close"
* volumeMemberPath="Volume" />
* </IgrDataChart>
* ```
*
* ```ts
* this.financialSeries = new IgrFinancialPriceSeries({name: "financialSeries"});
* this.financialSeries.dataSource = this.financialData;
* this.financialSeries.xAxis = this.timeXAxis;
* this.financialSeries.yAxis = this.numericYAxis;
* this.financialSeries.xAxisName = "timeXAxis";
* this.financialSeries.yAxisName = "numericYAxis";
* this.financialSeries.highMemberPath="High" ;
* this.financialSeries.lowMemberPath="Low";
* this.financialSeries.closeMemberPath="Close";
* this.financialSeries.openMemberPath="Open";
* this.financialSeries.volumeMemberPath="Volume";
* ```
*/
volumeMemberPath?: string;
/**
* Gets or sets the highlighted X value mapping property for the current series object.
*/
highlightedOpenMemberPath?: string;
/**
* Gets or sets the highlighted Y value mapping property for the current series object.
*/
highlightedHighMemberPath?: string;
/**
* Gets or sets the highlighted X value mapping property for the current series object.
*/
highlightedLowMemberPath?: string;
/**
* Gets or sets the highlighted Y value mapping property for the current series object.
*/
highlightedCloseMemberPath?: string;
/**
* Gets or sets the highlighted Y value mapping property for the current series object.
*/
highlightedVolumeMemberPath?: string;
/**
* Gets or sets whether this category series should allow custom style overrides of its individual visuals.
*
* The `IsCustomCategoryStyleAllowed` property is used to check if the category series should allow custom style.
*
* ```ts
* <IgrDataChart
* dataSource={this.state.dataSource}
* width="700px"
* height="500px">
*
*
* <IgrCategoryXAxis name="xAxis" label="Date" />
* <IgrNumericYAxis name="yAxis" />
*
*
* <IgrFinancialPriceSeries
* name="series2"
* xAxisName="xAxis"
* yAxisName="yAxis"
* displayType="Candlestick"
* lowMemberPath="Low"
* highMemberPath="High"
* openMemberPath="Open"
* closeMemberPath="Close"
* volumeMemberPath="Volume"
* isCustomCategoryStyleAllowed="True" />
* </IgrDataChart>
* ```
*
* ```ts
* series.isCustomCategoryStyleAllowed= true;
* ```
*/
isCustomCategoryStyleAllowed?: boolean | string;
/**
* Gets or sets the method by which to animate the data into the chart when the chart data source is swapped.
* Note: Transitions are not currently supported for stacked series.
*
* The `TransitionInMode` property is used to gets or sets the method by which to animate the data into the chart when the chart data source is swapped.
*
* ```ts
* <IgrDataChart
* dataSource={this.state.dataSource}
* width="700px"
* height="500px">
*
*
* <IgrCategoryXAxis name="xAxis" label="Date" />
* <IgrNumericYAxis name="yAxis" />
*
*
* <IgrFinancialPriceSeries
* name="series2"
* xAxisName="xAxis"
* yAxisName="yAxis"
* displayType="Candlestick"
* lowMemberPath="Low"
* highMemberPath="High"
* openMemberPath="Open"
* closeMemberPath="Close"
* volumeMemberPath="Volume"
* transitionInMode="Auto"/>
* </IgrDataChart>
* ```
*
* ```ts
* series.transitionInMode =CategoryTransitionInMode.Auto;
* ```
*/
transitionInMode?: CategoryTransitionInMode | string;
/**
* Gets or sets whether the series should transition into the plot area when a new data source is assigned.
* Note: Transitions are not currently supported for stacked series.
*
* The `IsTransitionInEnabled` property is used to check if the series should transition into the plot area when a new data source is assigned.
*
* ```ts
* <IgrDataChart
* dataSource={this.state.dataSource}
* width="700px"
* height="500px">
*
*
* <IgrCategoryXAxis name="xAxis" label="Date" />
* <IgrNumericYAxis name="yAxis" />
*
*
* <IgrFinancialPriceSeries
* name="series2"
* xAxisName="xAxis"
* yAxisName="yAxis"
* displayType="Candlestick"
* lowMemberPath="Low"
* highMemberPath="High"
* openMemberPath="Open"
* closeMemberPath="Close"
* volumeMemberPath="Volume"
* isTransitionInEnabled="true" />
*
* </IgrDataChart>
* ```
*
* ```ts
* series.isTransitionInEnabled= true;
* ```
*/
isTransitionInEnabled?: boolean | string;
/**
* Event raised when Assigning Category Style
*
* The `AssigningCategoryStyle` event raised when assigning Category Style.
*
* ```ts
* series.assigningCategoryStyle= this.chart_AssigningCategoryStyle;
* chart_AssigningCategoryStyle(sender :any,args: AssigningCategoryStyleEventArgs )
* {
*
*
* }
* ```
*
* ```ts
* <IgrDataChart
* ref={this.onChartRef}
* dataSource={this.data}
* width="100%"
* height="100%" >
*
* <IgrCategoryXAxis name="xAxis" label="Label" />
* <IgrNumericYAxis name="yAxis" />
*
* <IgrFinancialPriceSeries
* name="series1"
* xAxisName="xAxis"
* yAxisName="yAxis"
* highMemberPath="High"
* lowMemberPath="Low"
* closeMemberPath="Close"
* openMemberPath="Open"
* volumeMemberPath="Volume"
* trendLineType={this.state.trendLineType}
* displayType= "Candlestick"
* trendLinePeriod = {2}
* actualTrendLineBrush= "blue"
* assigningCategoryStyle ={this.chart_assigningCategoryStyle}/>
*
* </IgrDataChart>
* ```
*
* ```ts
* series.assigningCategoryStyle= this.chart_AssigningCategoryStyle;
* chart_AssigningCategoryStyle(sender :IgrFinancialSeries,args: AssigningCategoryStyleEventArgs )
* {
*
*
* }
* ```
*/
assigningCategoryStyle?: (s: IgrFinancialSeries, e: IgrAssigningCategoryStyleEventArgs) => void;
/**
* Handle this event in order to perform a custom typical price calculation.
*
* Use `Typical` event to perform a custom typical price calculation.
*
* ```ts
* series.typical= this.chart_typical;
*
* chart_typical(sender :any,args: FinancialEventArgs )
* {
*
*
* }
* ```
*
* ```ts
* <IgrDataChart
* ref={this.onChartRef}
* dataSource={this.data}
* width="100%"
* height="100%" >
*
* <IgrCategoryXAxis name="xAxis" label="Label" />
* <IgrNumericYAxis name="yAxis" />
*
* <IgrFinancialPriceSeries
* name="series1"
* xAxisName="xAxis"
* yAxisName="yAxis"
* highMemberPath="High"
* lowMemberPath="Low"
* closeMemberPath="Close"
* openMemberPath="Open"
* volumeMemberPath="Volume"
* trendLineType={this.state.trendLineType}
* displayType= "Candlestick"
* trendLinePeriod = {2}
* actualTrendLineBrush= "blue"
* typical ={this.chart_typical}/>
*
* </IgrDataChart>
* ```
*
* ```ts
* this.financialSeries.typical=this.chart_typical;
* }
* public chart_typical =( s:IgrFinancialSeries, e: FinancialEventArgs) => {
*
* }
* ```
*/
typical?: (s: IgrFinancialSeries, e: IgrFinancialEventArgs) => void;
/**
* Handle this event in order to specify which columns the Typical price calculation is based on.
*
* Use `TypicalBasedOn` event to specify which columns the Typical price calculation is based on.
*
* ```ts
* series.typicalBasedOn= this.chart_typicalBasedOn;
* chart_typicalBasedOn(sender :any,args: FinancialEventArgs )
* {
*
* }
* ```
*
* ````ts
* <IgrDataChart
* ref={this.onChartRef}
* dataSource={this.data}
* width="100%"
* height="100%" >
*
* <IgrCategoryXAxis name="xAxis" label="Label" />
* <IgrNumericYAxis name="yAxis" />
*
* <IgrFinancialPriceSeries
* name="series1"
* xAxisName="xAxis"
* yAxisName="yAxis"
* highMemberPath="High"
* lowMemberPath="Low"
* closeMemberPath="Close"
* openMemberPath="Open"
* volumeMemberPath="Volume"
* trendLineType={this.state.trendLineType}
* displayType= "Candlestick"
* trendLinePeriod = {2}
* actualTrendLineBrush= "blue"
* typicalBasedOn ={this.chart_typicalBasedOn}/>
*
* </IgrDataChart>
* ```
*
* ```ts
* this.financialSeries.typicalBasedOn=this.chart_typicalBasedOn;
* public chart_typicalBasedOn =( s:IgrFinancialSeries, e: FinancialEventArgs) => {
*
* }
* ````
*/
typicalBasedOn?: (s: IgrFinancialSeries, e: IgrFinancialEventArgs) => void;
}