Ignite UI for React

All
  • Public
  • Public/Protected
  • All

Interface IIgrEaseOfMovementIndicatorProps

Hierarchy

Hierarchy

Properties

Properties

Optional actualAreaFillOpacity

actualAreaFillOpacity?: string | number

Gets the actual opacity applied to the area fill visual.

let actualFillOpacity: number = series.actualAreaFillOpacity;

Optional actualBrush

actualBrush?: string

Gets the effective brush for the current series object.

let actualBrush: string = series.actualBrush;

Optional actualFocusBrush

actualFocusBrush?: string

Gets the effective emphasis brush for the current series object.

Optional actualFocusMode

actualFocusMode?: string | SeriesSelectionMode

Gets actual Selection mode

Optional actualHighlightedValuesFadeOpacity

actualHighlightedValuesFadeOpacity?: string | number

Gets actual HighlightedValues fade opacity

Optional actualHighlightingFadeOpacity

actualHighlightingFadeOpacity?: string | number

Gets actual highlighting fade opacity

Optional actualHighlightingMode

actualHighlightingMode?: string | SeriesHighlightingMode

Gets actual highlighting mode

Optional actualHitTestMode

actualHitTestMode?: string | SeriesHitTestMode

Resolved method of hit testing to use when pointing to items in the chart.

let hitTestMode: SeriesHitTestMode = this.series.actualHitTestMode;

Optional actualLegendItemBadgeBrush

actualLegendItemBadgeBrush?: string

Gets the effective legend badge fill for the current series.

Optional actualLegendItemBadgeOutline

actualLegendItemBadgeOutline?: string

Gets the effective legend badge outline for the current series.

Optional actualLegendItemBadgeTemplate

actualLegendItemBadgeTemplate?: IgDataTemplate

Gets the actual legend item badge template used by the series.

Optional actualMarkerFillOpacity

actualMarkerFillOpacity?: string | number

Gets the actual opacity applied to the fill of the markers.

Optional actualOutline

actualOutline?: string

Gets the effective outline for the current series object.

let actualOutline: string = series.ActualOutline;

Optional actualResolution

actualResolution?: string | number

Optional actualSelectionBrush

actualSelectionBrush?: string

Gets the effective emphasis brush for the current series object.

Optional actualSelectionMode

actualSelectionMode?: string | SeriesSelectionMode

Gets actual Selection mode

Optional actualThickness

actualThickness?: string | number

Gets the effective Thickness for the current series object.

Optional actualTrendLineBrush

actualTrendLineBrush?: string

Gets the effective TrendLineBrush for this indicator.

Use the ActualTrendLineBrush property to Gets the effective TrendLineBrush for the FinancialIndicator.

Optional areaFillOpacity

areaFillOpacity?: string | number

Gets or sets the opacity applied to the area fill visual. This property only applies to series that have area visual.

 <IgrDataChart
    dataSource={this.state.dataSource} >

    <IgrNumericXAxis name="xAxis" />
    <IgrNumericYAxis name="yAxis" />

    <IgrAreaSeries
     name="series1"
    xAxisName="xAxis"
    yAxisName="yAxis"
    valueMemberPath="Value"
   actualAreaFillOpacity= {1} />
 </IgrDataChart>

Optional assigningCategoryStyle

assigningCategoryStyle?: ((s, e) => void)

Type declaration

    • (s, e): void

    • Event raised when Assigning Category Style

      The AssigningCategoryStyle event raised when assigning Category Style.

      series.assigningCategoryStyle= this.chart_AssigningCategoryStyle;
      chart_AssigningCategoryStyle(sender :any,args: AssigningCategoryStyleEventArgs )
        {


        }

      <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>

      series.assigningCategoryStyle= this.chart_AssigningCategoryStyle;
      chart_AssigningCategoryStyle(sender :IgrFinancialSeries,args: AssigningCategoryStyleEventArgs )
        {


        }

      Parameters

      Returns void

Optional autoCalloutLabelFormat

autoCalloutLabelFormat?: string

Gets or sets the AutoCalloutLabel format string to use for the AutoCalloutLabel.

Optional autoCalloutLabelFormatSpecifiers

autoCalloutLabelFormatSpecifiers?: any[]

Gets or sets the format specifiers to use with the AutoCalloutLabelFormat string.

Optional autoCalloutValueLabelFormat

autoCalloutValueLabelFormat?: string

Gets or sets the AutoCalloutLabel format string to use for the AutoCalloutLabel.

Optional autoCalloutValueLabelFormatSpecifiers

autoCalloutValueLabelFormatSpecifiers?: any[]

Gets or sets the format specifiers to use with the AutoCalloutValueLabelFormat string.

Optional brush

brush?: string

Gets or sets the brush to use for the series.

The Brush along with the Outline and Negative Brush can be used to affect the visuals of the Series.

this.series.brush = "red";

 <IgrDataChart
    dataSource={this.state.dataSource} >

    <IgrNumericXAxis name="xAxis" />
    <IgrNumericYAxis name="yAxis" />

    <IgrAreaSeries
     name="series1"
    xAxisName="xAxis"
    yAxisName="yAxis"
    valueMemberPath="Value"
    brush="Gray"
    outline="Black" />
 </IgrDataChart>

Optional children

children?: ReactNode

Optional closeMemberPath

closeMemberPath?: 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.

<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>

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"

Optional coercionMethods

coercionMethods?: any

Gets or sets the coercion methods to use when loading data from data sources. Should be specified before setting any member paths, if being used. Setting it later will not cause data to be reimported into the chart.

<-- position: content member-->

cMethods: any = {
    ValueCoercion: function(value:number): number {return value+2;}
 }

 <IgrDataChart
    dataSource={this.state.dataSource}
    width="700px"
    height="500px">

    <IgrNumericXAxis name="xAxis" />
    <IgrNumericYAxis name="yAxis" />

    <IgrScatterPolygonSeries
     name="series1"
     shapeMemberPath="Points"
     title="House Floor Plan"
     brush="Gray"
     outline="Black"
     coercionMethods = {this.ValueCoercion} />
 </IgrDataChart>

Optional dashArray

dashArray?: string | number[]

Gets or sets a collection of Double values that indicate the pattern of dashes and gaps that is used to outline the current series object.

Optional dataLegendGroup

dataLegendGroup?: string

Gets or sets a name used for grouping multiple series in the Data Legend If not set, series will be grouped by series family, e.g. Category, Range, Financial, Scatter

Optional dataSource

dataSource?: any

Optional discreteLegendItemTemplate

discreteLegendItemTemplate?: IgDataTemplate

Gets or sets the DiscreteLegendItemTemplate property. The legend item control content is created according to the DiscreteLegendItemTemplate on-demand by the series object itself.

Optional displayType

displayType?: string | IndicatorDisplayType

Gets or sets the display for the current FinancialIndicator object.

The DisplayType property is used to display the current FinancialIndicator object.

 <IgrDataChart
    dataSource={this.state.dataSource}
    width="700px"
    height="500px">


    <IgrOrdinalTimeXAxis name="xAxis" label="Date" />
    <IgrNumericYAxis name="yAxis" />

   <IgrMassIndexIndicator
    name="series3"
    xAxisName="xAxis"
    yAxisName="yAxis"
    displayType="Line"
    lowMemberPath="Low"
    highMemberPath="High"
    openMemberPath="Open"
    closeMemberPath="Close"
    volumeMemberPath="Volume"
    displayType="Column"  />
 </IgrDataChart>

series.displayType= IndicatorDisplayType.Column;

Optional expectFunctions

expectFunctions?: string | boolean

Gets or sets whether the series should expect that properties in its items source may be functions that need to be evaluated to yield their value. This defaults to false, as there will be a subtle performance impact to using this feature. This value must be set before assigning an item's source to take effect.

expectFunctions is used to decide whether the series should expect that its data source members need to be called as functions to get their values.

 <IgrDataChart
    dataSource={this.state.dataSource} >

    <IgrNumericXAxis name="xAxis" />
    <IgrNumericYAxis name="yAxis" />

    <IgrAreaSeries
     name="series1"
    xAxisName="xAxis"
    yAxisName="yAxis"
    valueMemberPath="MyFunction"
    expectFunctions={true} />
 </IgrDataChart>

this.series.expectFunctions=true;

Optional finalValue

finalValue?: string | number

The final value of this series.

Optional focusBrush

focusBrush?: string

Gets or sets the Focus brush to use for the series.

Optional highMemberPath

highMemberPath?: string

Gets or sets the high mapping property for the current series object.

Use HighMemberPath propert for high mapping of the current series object.

<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>

    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";

Optional highlightedCloseMemberPath

highlightedCloseMemberPath?: string

Gets or sets the highlighted Y value mapping property for the current series object.

Optional highlightedDataSource

highlightedDataSource?: any

Optional highlightedHighMemberPath

highlightedHighMemberPath?: string

Gets or sets the highlighted Y value mapping property for the current series object.

Optional highlightedLegendItemVisibility

highlightedLegendItemVisibility?: string | Visibility

Gets or sets whether the highlighted values layer should have a legend item.

Optional highlightedLowMemberPath

highlightedLowMemberPath?: string

Gets or sets the highlighted X value mapping property for the current series object.

Optional highlightedOpenMemberPath

highlightedOpenMemberPath?: string

Gets or sets the highlighted X value mapping property for the current series object.

Optional highlightedTitleSuffix

highlightedTitleSuffix?: string

Gets or sets the HighlightedTitleSuffix property.

Optional highlightedValuesDataLegendGroup

highlightedValuesDataLegendGroup?: string

Gets or sets a name used for grouping highlighted series in the Data Legend If not set, series will default to parent series' DataLegendGroup, e.g. Category, Range, Financial, Scatter

Optional highlightedValuesDisplayMode

highlightedValuesDisplayMode?: string | SeriesHighlightedValuesDisplayMode

Gets or sets whether and how to display highlighted values for the series. Note, this is distinct from the highlighting feature that indicates what is closest or under the mouse.

Optional highlightedValuesFadeOpacity

highlightedValuesFadeOpacity?: string | number

Gets or sets the target opacity to fade to for fade style HighlightedValues.

Optional highlightedVolumeMemberPath

highlightedVolumeMemberPath?: string

Gets or sets the highlighted Y value mapping property for the current series object.

Optional highlightingFadeOpacity

highlightingFadeOpacity?: string | number

Gets or sets the target opacity to fade to for fade style highlighting.

Optional hitTestMode

hitTestMode?: string | SeriesHitTestMode

Method of hit testing to use when pointing to items in this series.

The HitTestMode can be set to either:

  • Auto: automatically decide the appropriate hit test mode for the series.
  • ColorEncoded: use a color encoded off screen buffer for hit testing. Should always be O(1) time for determining a hit series. This increases frame render time and memory usage, however. Consider using this if hit testing time is degrading performance.
  • Computational: use a computational based approach to determine whether the series has been hit. This uses loose bounding boxes, in some cases, and can range in time complexity between O(1) and O(log n) to find a hit. This decreases frame render time compared to color encoded
this.series.hitTestMode = SeriesHitTestMode.Computational;

Optional ignoreFirst

ignoreFirst?: string | number

Gets or sets the number of values to hide at the beginning of the indicator.

Use the IgnoreFirst propert to hide the number of values at the beginning of the indicator.

 <IgrDataChart
    dataSource={this.state.dataSource}
    width="700px"
    height="500px">


    <IgrOrdinalTimeXAxis name="xAxis" label="Date" />
    <IgrNumericYAxis name="yAxis" />

   <IgrMassIndexIndicator
    name="series3"
    xAxisName="xAxis"
    yAxisName="yAxis"
    displayType="Line"
    lowMemberPath="Low"
    highMemberPath="High"
    openMemberPath="Open"
    closeMemberPath="Close"
    volumeMemberPath="Volume"
    ignoreFirst="2"/>
 </IgrDataChart>

series.ignoreFirst  = 2;

Optional isActualLegendFinancial

isActualLegendFinancial?: string | boolean

Gets or sets whether the ActualLegend is FinancialLegend or normal Legend.

Optional isComponentHighlightingModeIgnored

isComponentHighlightingModeIgnored?: string | boolean

Gets or sets whether the component level highlight mode is ignored.

Optional isCustomCategoryStyleAllowed

isCustomCategoryStyleAllowed?: string | boolean

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.

<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>

series.isCustomCategoryStyleAllowed= true;

Optional isDefaultToolTipSelected

isDefaultToolTipSelected?: string | boolean

Gets if the default tooltip has been selected for display.

To use the default tooltip set ShowDefaultTooltip to true.

let isDefaultToolTipSelected: boolean = this.series.isDefaultToolTipSelected;

Optional isDropShadowEnabled

isDropShadowEnabled?: string | boolean

Gets or sets whether drop shadow should be enabled for this series.

IsDropShadowEnabled is used to decide whether drop shadow should be enabled for this series.

this.series.isDropShadowEnabled = true;

<IgrDataChart
    dataSource={this.state.dataSource} >

    <IgrNumericXAxis name="xAxis" />
    <IgrNumericYAxis name="yAxis" />

    <IgrAreaSeries
     name="series1"
    xAxisName="xAxis"
    yAxisName="yAxis"
    valueMemberPath="Value"
    isDropShadowEnabled="true" />
 </IgrDataChart>

Optional isHighlightingEnabled

isHighlightingEnabled?: string | boolean

Gets or sets whether highlighting should be enabled for this series, if this type of series supports highlighting.

this.series.isHighlightingEnabled = true;

<IgrDataChart
    dataSource={this.state.dataSource} >

    <IgrNumericXAxis name="xAxis" />
    <IgrNumericYAxis name="yAxis" />

    <IgrAreaSeries
     name="series1"
    xAxisName="xAxis"
    yAxisName="yAxis"
    valueMemberPath="Value"
    isHighlightingEnabled="true" />
 </IgrDataChart>

Optional isTransitionInEnabled

isTransitionInEnabled?: string | boolean

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.

<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>

series.isTransitionInEnabled= true;

Optional legend

legend?: any

Gets or sets the legend used for the current series.

Optional legendItemBadgeMode

legendItemBadgeMode?: string | LegendItemBadgeMode

Gets or sets the mode of legend badge representing the current series in a legend. This property will be ignored when the LegendItemTemplate/LegendItemBadgeTemplate property is set on the series

Optional legendItemBadgeShape

legendItemBadgeShape?: string | LegendItemBadgeShape

Gets or sets the type of legend badge representing the current series in a legend. This property will be ignored when the LegendItemTemplate/LegendItemBadgeTemplate property is set on the series

Optional legendItemBadgeTemplate

legendItemBadgeTemplate?: IgDataTemplate

Gets or sets the LegendItemBadgeTemplate property. The legend item badge is created according to the LegendItemBadgeTemplate on-demand by the series object itself.

Optional legendItemTemplate

legendItemTemplate?: IgDataTemplate

Gets or sets the LegendItemTemplate property. The legend item control content is created according to the LegendItemTemplate on-demand by the series object itself.

Optional legendItemVisibility

legendItemVisibility?: string | Visibility

Gets or sets whether or not the current series will have a legend item displayed in a legend.

The LegendItemVisibilty can be used to exclude only certain Series from the Legend.

 <IgrDataChart
    dataSource={this.state.dataSource} >

    <IgrNumericXAxis name="xAxis" />
    <IgrNumericYAxis name="yAxis" />

    <IgrAreaSeries
     name="series1"
    xAxisName="xAxis"
    yAxisName="yAxis"
    valueMemberPath="Value"
    legendItemVisibility= "collapsed" />
 </IgrDataChart>

Optional lineCap

lineCap?: string | PenLineCap

Gets or sets the style of the starting point of any lines or polylines representing this series. Not every series type has a line at which it would be appropriate to display a start cap, so this property does not affect every series type. LineSeries, for example, is affected by StartCap, but ColumnSeries is not.

Optional lineJoin

lineJoin?: string | PenLineJoin

Gets or sets the brush that specifies current series object's line join style.

Optional lowMemberPath

lowMemberPath?: 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.

<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>

    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";

Optional markerFillOpacity

markerFillOpacity?: string | number

Gets or sets the opacity applied to the fill of the markers. This property only applies to series that have area visual.

Optional mouseOverEnabled

mouseOverEnabled?: string | boolean

Gets or sets the whether the chart reacts to mouse move events.

name

name: string

Sets or gets a required unique name for the series.

Optional negativeBrush

negativeBrush?: string

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.

<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>

series.negativeBrush="red";

Optional opacity

opacity?: string | number

Optional openMemberPath

openMemberPath?: 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.

<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>

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"

Optional outline

outline?: string

Gets or sets the brush to use for the outline of the series. Some series types, such as LineSeries, do not display outlines. Therefore, this property does not affect some charts.

The Outline along with the Brush and NegativeBrush can be used to affect the visuals of the Series.

this.series.brush = "red";

 <IgrDataChart
    dataSource={this.state.dataSource} >

    <IgrNumericXAxis name="xAxis" />
    <IgrNumericYAxis name="yAxis" />

    <IgrAreaSeries
     name="series1"
    xAxisName="xAxis"
    yAxisName="yAxis"
    valueMemberPath="Value"
    brush="Gray"
    outline="Black" />
 </IgrDataChart>

Optional outlineMode

outlineMode?: string | SeriesOutlineMode

Gets or sets the outline mode to use for the series.

Optional percentChange

percentChange?: string | number

The percent change from the beginning to the end of this series.

Optional renderRequested

renderRequested?: ((s, e) => void)

Type declaration

    • (s, e): void

    • This event is raised every time a render has been requested from a series.

       const series1 = new IgrAreaSeries({ name: "series1" });
      series1.valueMemberPath = "USA";
      series1.title = "USA";
      series1.xAxisName = "xAxis";
      series1.yAxisName = "yAxis";
      series1.renderRequested= this.onRenderRequested;

      public onRenderRequested =( s:IgrSeries, e: RenderRequestedEventArgs) => {
                }

       <IgrDataChart
          dataSource={this.state.dataSource} >

          <IgrNumericXAxis name="xAxis" />
          <IgrNumericYAxis name="yAxis" />

          <IgrAreaSeries
           name="series1"
          xAxisName="xAxis"
          yAxisName="yAxis"
          valueMemberPath="Value"
          shadowBlur="7"
          shadowColor="blue"
          renderRequested= {this.onRenderRequested}/>
       </IgrDataChart>

      Parameters

      Returns void

Optional resolution

resolution?: string | number

Gets or sets the current series object's rendering resolution.

Setting the Resolution on a Series to a higher value can help with performance, but it will lower the graphical fidelity of the line. As such, it can be increased up until the fidelity is unacceptable.

this.series.resolution = 1.5;

 <IgrDataChart
    dataSource={this.state.dataSource} >

    <IgrNumericXAxis name="xAxis" />
    <IgrNumericYAxis name="yAxis" />

    <IgrAreaSeries
     name="series1"
    xAxisName="xAxis"
    yAxisName="yAxis"
    valueMemberPath="Value"
    resolution= {1.5} />
 </IgrDataChart>

Optional safeActualBrush

safeActualBrush?: string

Gets the effective brush for the current series object with opacity removed so its contrasty for use as a font color.

Optional selectionBrush

selectionBrush?: string

Gets or sets the selection brush to use for the series.

Optional shadowBlur

shadowBlur?: string | number

Gets or sets the shadow blur. This property is ignored when Series.UseSingleShadow is set to true.

ShadowBlur can be set in conjection with IsDropShadowEnabled to further define the drop shadow effect.

this.series.shadowBlur = 7;

 <IgrDataChart
    dataSource={this.state.dataSource} >

    <IgrNumericXAxis name="xAxis" />
    <IgrNumericYAxis name="yAxis" />

    <IgrAreaSeries
     name="series1"
    xAxisName="xAxis"
    yAxisName="yAxis"
    valueMemberPath="Value"
    shadowBlur={7}
    shadowColor="blue" />
 </IgrDataChart>

Optional shadowColor

shadowColor?: string

Gets or sets the drop shadow color.

ShadowColor can be set in conjection with IsDropShadowEnabled to further define the drop shadow effect.

this.series.shadowColor = "blue";

 <IgrDataChart
    dataSource={this.state.dataSource} >

    <IgrNumericXAxis name="xAxis" />
    <IgrNumericYAxis name="yAxis" />

    <IgrAreaSeries
     name="series1"
    xAxisName="xAxis"
    yAxisName="yAxis"
    valueMemberPath="Value"
    shadowBlur="7"
    shadowColor="blue" />
 </IgrDataChart>

Optional shadowOffsetX

shadowOffsetX?: string | number

Gets or sets the drop shadow x-offset.

ShadowOffsetX can be set in conjection with IsDropShadowEnabled to further define the drop shadow effect.

this.series.shadowOffsetX = 10;

 <IgrDataChart
    dataSource={this.state.dataSource} >

    <IgrNumericXAxis name="xAxis" />
    <IgrNumericYAxis name="yAxis" />

    <IgrAreaSeries
     name="series1"
    xAxisName="xAxis"
    yAxisName="yAxis"
    valueMemberPath="Value"
    shadowOffsetX= {10}
    shadowOffsetY={10] />
 </IgrDataChart>

Optional shadowOffsetY

shadowOffsetY?: string | number

Gets or sets the drop shadow y-offset.

ShadowOffsetY can be set in conjection with IsDropShadowEnabled to further define the drop shadow effect.

this.series.shadowOffsetY = 10;

 <IgrDataChart
    dataSource={this.state.dataSource} >

    <IgrNumericXAxis name="xAxis" />
    <IgrNumericYAxis name="yAxis" />

    <IgrAreaSeries
     name="series1"
    xAxisName="xAxis"
    yAxisName="yAxis"
    valueMemberPath="Value"
    shadowOffsetX= {10}
    shadowOffsetY= {10} />
 </IgrDataChart>

Optional shouldAnimateOnDataSourceSwap

shouldAnimateOnDataSourceSwap?: string | boolean

Gets or sets whether and how to display highlighted values for the series. Note, this is distinct from the highlighting feature that indicates what is closest or under the mouse.

Optional shouldHideAutoCallouts

shouldHideAutoCallouts?: string | boolean

Gets or sets whether this series should suppress it's auto callouts

Optional shouldRemoveHighlightedDataOnLayerHidden

shouldRemoveHighlightedDataOnLayerHidden?: string | boolean

Gets or sets whether the opacity should be automatically shifted for the safe actual brush.

Optional shouldShiftOpacityForSafeActualBrush

shouldShiftOpacityForSafeActualBrush?: string | boolean

Gets or sets whether the opacity should be automatically shifted for the safe actual brush.

Optional showDefaultTooltip

showDefaultTooltip?: string | boolean

Gets or sets whether default tooltip will be shown.

The default tooltips display all the information relevant to the particular series item (series title, data values, axis values etc.) and are styled to match the series' style. When using default tooltips, you should also set the series Title.

 <IgrDataChart
    dataSource={this.state.dataSource} >

    <IgrNumericXAxis name="xAxis" />
    <IgrNumericYAxis name="yAxis" />

    <IgrAreaSeries
     name="series1"
    xAxisName="xAxis"
    yAxisName="yAxis"
    valueMemberPath="Value"
    showDefaultTooltip ="true"
    title="InStock Items" />
 </IgrDataChart>

this.series.showDefaultTooltip ="true";

Optional thickness

thickness?: string | number

Gets or sets the width of the current series object's line thickness.

Depending on the Series type, this can be the main brush used, or just the outline. For example, when using a LineSeries it will affect the thickness of the lines drawn, whereas when using a ColumnSeries it will affect the outer border thickness of the columns.

this.series.thickness=5;

 <IgrDataChart
    dataSource={this.state.dataSource} >

    <IgrNumericXAxis name="xAxis" />
    <IgrNumericYAxis name="yAxis" />

    <IgrAreaSeries
     name="series1"
    xAxisName="xAxis"
    yAxisName="yAxis"
    valueMemberPath="Value"
    thickness= {5} />
 </IgrDataChart>

Optional title

title?: any

Gets or sets the Title property. The legend item control is created according to the Title on-demand by the series object itself.

The Series Title may be used in tooltips and legends.

this.series.title = "InStock Items";

 <IgrDataChart
    dataSource={this.state.dataSource} >

    <IgrNumericXAxis name="xAxis" />
    <IgrNumericYAxis name="yAxis" />

    <IgrAreaSeries
     name="series1"
    xAxisName="xAxis"
    yAxisName="yAxis"
    valueMemberPath="Value"
   title="InStock Items" />
 </IgrDataChart>

Optional tooltipTemplate

tooltipTemplate?: FunctionComponent<IChartTooltipProps> | Component<IChartTooltipProps, {}, any>

Optional transitionDuration

transitionDuration?: string | number

Gets or sets the duration of the current series' morph.

The TransitionDuration can be used to play animation when data is added or removed from a Series. To play an initial animation see TransitionInDuration.

this.series.transitionDuration = 500;

 <IgrDataChart
    dataSource={this.state.dataSource} >

    <IgrNumericXAxis name="xAxis" />
    <IgrNumericYAxis name="yAxis" />

    <IgrAreaSeries
     name="series1"
    xAxisName="xAxis"
    yAxisName="yAxis"
    valueMemberPath="Value"
    isTransitionInEnabled=true
    transitionInSpeedType="indexScaled"
    transitionDuration= {500}
    transitionInDuration = {500} />
 </IgrDataChart>

Optional transitionEasingFunction

transitionEasingFunction?: ((time) => number)

Type declaration

    • (time): number

    • Gets or sets the easing function used to morph the current series.

      The TransitioninDuration and TransitionEasingFunction can be used to play animation when data is added or removed from a Series. To play an initial animation see TransitionInDuration.

       <IgrDataChart
          dataSource={this.state.dataSource} >

          <IgrNumericXAxis name="xAxis" />
          <IgrNumericYAxis name="yAxis" />

          <IgrAreaSeries
           name="series1"
          xAxisName="xAxis"
          yAxisName="yAxis"
          valueMemberPath="Value"
          isDropShadowEnabled=true
          markerType="circle"
         transitionEasingFunction ="cubicEase"
         isTransitionInEnabled= {true}  />
       </IgrDataChart>

      this.series.transitionEasingFunction =  EasingFunctions.cubicEase;

      Parameters

      • time: number

      Returns number

Optional transitionInDuration

transitionInDuration?: string | number

Gets or sets the duration of the current series' transition in morph.

The TransitionInDuration can be used with IsTransitionInEnabled to cofigure the animation when a new datasource is loaded.

this.series.transitionDuration = 500;

 <IgrDataChart
    dataSource={this.state.dataSource} >

    <IgrNumericXAxis name="xAxis" />
    <IgrNumericYAxis name="yAxis" />

    <IgrAreaSeries
     name="series1"
    xAxisName="xAxis"
    yAxisName="yAxis"
    valueMemberPath="Value"
    isTransitionInEnabled= {true}
    transitionInSpeedType="indexScaled"
    transitionDuration={500}
    transitionInDuration= {500} />
 </IgrDataChart>

Optional transitionInEasingFunction

transitionInEasingFunction?: ((time) => number)

Type declaration

    • (time): number

    • Gets or sets the EasingFunction used to morph the current series during the initial transition.

      The TransitionInEasingFunction can be used with IsTransitionInEnabled to cofigure the animation when a new datasource is loaded.

       <IgrDataChart
          dataSource={this.state.dataSource} >

          <IgrNumericXAxis name="xAxis" />
          <IgrNumericYAxis name="yAxis" />

          <IgrAreaSeries
           name="series1"
          xAxisName="xAxis"
          yAxisName="yAxis"
          valueMemberPath="Value"
          isDropShadowEnabled=true
          markerType="circle"
         transitionInEasingFunction ="cubicEase"
         isTransitionInEnabled= {true}  />
       </IgrDataChart>

      this.series.transitionInEasingFunction =  EasingFunctions.cubicEase;

      Parameters

      • time: number

      Returns number

Optional transitionInMode

transitionInMode?: string | CategoryTransitionInMode

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.

<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>

series.transitionInMode =CategoryTransitionInMode.Auto;

Optional transitionInSpeedType

transitionInSpeedType?: string | TransitionInSpeedType

Gets or sets the duration of the current series' transition in morph.

The TransitionInSpeedType can be used with IsTransitionInEnabled to cofigure the animation when a new datasource is loaded.

this.series.transitionInSpeedType = TransitionInSpeedType.IndexScaled;

 <IgrDataChart
    dataSource={this.state.dataSource} >

    <IgrNumericXAxis name="xAxis" />
    <IgrNumericYAxis name="yAxis" />

    <IgrAreaSeries
     name="series1"
    xAxisName="xAxis"
    yAxisName="yAxis"
    valueMemberPath="Value"
    isTransitionInEnabled=true
    transitionInSpeedType="indexScaled"
    transitionDuration=500
    transitionInDuration=500 />
 </IgrDataChart>

Optional transitionOutCompleted

transitionOutCompleted?: ((s, e) => void)

Type declaration

Optional transitionOutDuration

transitionOutDuration?: string | number

Gets or sets the duration of the current series' transition out morph.

Optional transitionOutEasingFunction

transitionOutEasingFunction?: ((time) => number)

Type declaration

    • (time): number

    • Gets or sets the EasingFunction used to morph the current series during the initial transition.

      Parameters

      • time: number

      Returns number

Optional transitionOutSpeedType

transitionOutSpeedType?: string | TransitionOutSpeedType

Gets or sets the duration of the current series' transition out morph.

Optional trendLineBrush

trendLineBrush?: string

Gets or sets the brush to use to draw the trend line.

Use the TrendLineBrush propert to draw the trend line.

 <IgrDataChart
    dataSource={this.state.dataSource}
    width="700px"
    height="500px">


    <IgrOrdinalTimeXAxis name="xAxis" label="Date" />
    <IgrNumericYAxis name="yAxis" />

   <IgrMassIndexIndicator
    name="series3"
    xAxisName="xAxis"
    yAxisName="yAxis"
    displayType="Line"
    lowMemberPath="Low"
    highMemberPath="High"
    openMemberPath="Open"
    closeMemberPath="Close"
    volumeMemberPath="Volume"
    trendLineBrush="Red"/>
 </IgrDataChart>

Optional trendLineDashArray

trendLineDashArray?: string | number[]

Gets or sets a collection of double values that indicate the pattern of dashes and gaps that is used to draw the trend line for the current indicator object.

Optional trendLinePeriod

trendLinePeriod?: string | number

Gets or sets the trend line period for the current series. The typical, and initial, value for trend line period is 7.

Use TrendLinePeriod property for the trend line period of the current series.

 <IgrDataChart
    dataSource={this.state.dataSource}
    width="700px"
    height="500px">


    <IgrOrdinalTimeXAxis name="xAxis" label="Date" />
    <IgrNumericYAxis name="yAxis" />

   <IgrMassIndexIndicator
    name="series3"
    xAxisName="xAxis"
    yAxisName="yAxis"
    displayType="Line"
    lowMemberPath="Low"
    highMemberPath="High"
    openMemberPath="Open"
    closeMemberPath="Close"
    volumeMemberPath="Volume"
    trendLinePeriod="30"/>
 </IgrDataChart>

series.trendLinePeriod  =30;

Optional trendLineThickness

trendLineThickness?: string | number

Gets or sets the thickness of the current indicator object's trend line.

Use TrendLineThickness property for the thickness of the current indicator object's trend line.

 <IgrDataChart
    dataSource={this.state.dataSource}
    width="700px"
    height="500px">


    <IgrOrdinalTimeXAxis name="xAxis" label="Date" />
    <IgrNumericYAxis name="yAxis" />

   <IgrMassIndexIndicator
    name="series3"
    xAxisName="xAxis"
    yAxisName="yAxis"
    displayType="Line"
    lowMemberPath="Low"
    highMemberPath="High"
    openMemberPath="Open"
    closeMemberPath="Close"
    volumeMemberPath="Volume"
    trendLineThickness="2"/>
 </IgrDataChart>

 series.trendLineThickness=2 ;

Optional trendLineType

trendLineType?: string | TrendLineType

Gets or sets the trend type for the current indicator series.

Use TrendLineType property to get the trend type for the current indicator series.

 <IgrDataChart
    dataSource={this.state.dataSource}
    width="700px"
    height="500px">


    <IgrOrdinalTimeXAxis name="xAxis" label="Date" />
    <IgrNumericYAxis name="yAxis" />

   <IgrMassIndexIndicator
    name="series3"
    xAxisName="xAxis"
    yAxisName="yAxis"
    displayType="Line"
    lowMemberPath="Low"
    highMemberPath="High"
    openMemberPath="Open"
    closeMemberPath="Close"
    volumeMemberPath="Volume"
    trendLineType="CubicFit"/>
 </IgrDataChart>

series.trendLineType= TrendLineType.CubicFit;

Optional typical

typical?: ((s, e) => void)

Type declaration

    • (s, e): void

    • Handle this event in order to perform a custom typical price calculation.

      Use Typical event to perform a custom typical price calculation.

      series.typical= this.chart_typical;

        chart_typical(sender :any,args: FinancialEventArgs )
        {


        }

      <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>

       this.financialSeries.typical=this.chart_typical;
          }
          public chart_typical =( s:IgrFinancialSeries, e: FinancialEventArgs) => {

             }

      Parameters

      Returns void

Optional typicalBasedOn

typicalBasedOn?: ((s, e) => void)

Type declaration

    • (s, e): 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.

         series.typicalBasedOn= this.chart_typicalBasedOn;
          chart_typicalBasedOn(sender :any,args: FinancialEventArgs )
        {

        }

         <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) => {

      }

      Parameters

      Returns void

Optional useItemWiseColors

useItemWiseColors?: string | boolean

Gets or sets whether the series should use individual palette colors for each item.

Optional useSingleShadow

useSingleShadow?: string | boolean

Gets or sets whether drop shadow is applied to the whole series visual or to each of the individual shapes forming the series. When this property is set to true, no Series.ShadowBlur is applied.

this.series.useSingleShadow = true;

 <IgrDataChart
    dataSource={this.state.dataSource} >

    <IgrNumericXAxis name="xAxis" />
    <IgrNumericYAxis name="yAxis" />

    <IgrAreaSeries
     name="series1"
    xAxisName="xAxis"
    yAxisName="yAxis"
    valueMemberPath="Value"
    isDropShadowEnabled=true
    markerType="circle"
    useSingleShadow= {true} />
 </IgrDataChart>

Optional visibility

visibility?: string | Visibility

Optional visibleRangeMarginBottom

visibleRangeMarginBottom?: string | number

Gets or sets the bottom margin to use when getting a visible axis range for the series.

Optional visibleRangeMarginLeft

visibleRangeMarginLeft?: string | number

Gets or sets the left margin to use when getting a visible axis range for the series.

Optional visibleRangeMarginRight

visibleRangeMarginRight?: string | number

Gets or sets the right margin to use when getting a visible axis range for the series.

Optional visibleRangeMarginTop

visibleRangeMarginTop?: string | number

Gets or sets the top margin to use when getting a visible axis range for the series.

Optional visibleRangeMode

visibleRangeMode?: string | SeriesVisibleRangeMode

Gets or sets the visible range mode to use.

Optional volumeMemberPath

volumeMemberPath?: 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.

<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>

    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";

Optional xAxis

xAxis?: IgrCategoryAxisBase<IIgrCategoryAxisBaseProps>

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.

<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>

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";

Optional xAxisName

xAxisName?: string

Gets or sets the name to use to resolve xAxis from markup.

Optional yAxis

yAxis?: IgrNumericYAxis<IIgrNumericYAxisProps>

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.

<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>

    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";

Optional yAxisName

yAxisName?: string

Gets or sets the name to use to resolve yAxis from markup.