Hierarchy

Hierarchy

Properties

Properties

actualAppearanceMode?: string | AnnotationAppearanceMode

Gets or sets the mode used for shifting the annotation layer color based on the target series.

actualAreaFillOpacity?: string | number

Gets the actual opacity applied to the area fill visual.

let actualFillOpacity: number = series.actualAreaFillOpacity;
actualBrush?: string

Gets the effective brush for the current series object.

let actualBrush: string = series.actualBrush;
actualFocusBrush?: string

Gets the effective emphasis brush for the current series object.

actualFocusMode?: string | SeriesSelectionMode

Gets actual Selection mode

actualGroupedPositionModeX?: string | DataTooltipGroupedPositionX

Gets the actual resolved tooltip position mode on the X axis for grouped series.

actualGroupedPositionModeY?: string | DataTooltipGroupedPositionY

Gets the actual resolved tooltip position mode on the Y axis for grouped series.

actualGroupingMode?: string | DataToolTipLayerGroupingMode

Gets the actual resolved tooltip layer grouping mode.

actualHighlightedValuesFadeOpacity?: string | number

Gets actual HighlightedValues fade opacity

actualHighlightingFadeOpacity?: string | number

Gets actual highlighting fade opacity

actualHighlightingMode?: string | SeriesHighlightingMode

Gets actual highlighting mode

actualHitTestMode?: string | SeriesHitTestMode

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

let hitTestMode: SeriesHitTestMode = this.series.actualHitTestMode;
actualHorizontalAppearanceMode?: string | AnnotationAppearanceMode

Gets or sets the mode used for shifting the annotation layer color based on the target series.

actualHorizontalDashArray?: string | number[]

Gets or sets the mode used for shifting the annotation layer color based on the target series.

actualHorizontalShiftAmount?: string | number

Gets or sets the percentage amount to shift the appearance mode by. Value must range between -1.0 to 1.0.

actualLegendItemBadgeBrush?: string

Gets the effective legend badge fill for the current series.

actualLegendItemBadgeOutline?: string

Gets the effective legend badge outline for the current series.

actualLegendItemBadgeTemplate?: IgDataTemplate

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

actualMarkerFillOpacity?: string | number

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

actualOutline?: string

Gets the effective outline for the current series object.

let actualOutline: string = series.ActualOutline;
actualResolution?: string | number
actualSelectionBrush?: string

Gets the effective emphasis brush for the current series object.

actualSelectionMode?: string | SeriesSelectionMode

Gets actual Selection mode

actualShiftAmount?: string | number

Gets or sets the percentage amount to shift the appearance mode by. Value must range between -1.0 to 1.0.

actualThickness?: string | number

Gets the effective Thickness for the current series object.

actualVerticalAppearanceMode?: string | AnnotationAppearanceMode

Gets or sets the mode used for shifting the annotation layer color based on the target series.

actualVerticalDashArray?: string | number[]

Gets or sets the mode used for shifting the annotation layer color based on the target series.

actualVerticalShiftAmount?: string | number

Gets or sets the percentage amount to shift the appearance mode by. Value must range between -1.0 to 1.0.

appearanceMode?: string | AnnotationAppearanceMode

Gets or sets the mode used for shifting the annotation layer color based on the target series.

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>
autoCalloutLabelFormat?: string

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

autoCalloutLabelFormatSpecifiers?: any[]

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

autoCalloutValueLabelFormat?: string

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

autoCalloutValueLabelFormatSpecifiers?: any[]

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

badgeMarginBottom?: string | number
badgeMarginLeft?: string | number
badgeMarginRight?: string | number
badgeMarginTop?: string | number
badgeShape?: string | LegendItemBadgeShape

Gets or sets the BadgeShape for the data legend.

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>
children?: ReactNode
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>
cursorPosition?: string | IgPoint

Gets or sets the world position to use instead of the pointer position for this annotation layer. If you set this value, rather than responding to the pointer, this layer will be fixed on the provided world position. A world position has x and y values that range from 0 to 1 that represent the global position of the cursor relative to the entire ranges of the axes. The default of (NaN, NaN) means that the layer should react to pointer movement.

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.

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

dataSource?: any
defaultPositionOffsetX?: string | number

Gets or sets the default offset of the tooltip layer on the X axis.

defaultPositionOffsetY?: string | number

Gets or sets the default offset of the tooltip layer on the Y axis.

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.

excludedColumns?: string[]

Gets or sets names of data columns or their labels to exclude from displaying in the data tooltip, e.g. "High, Low" or "H, L" The ExcludedColumns property takes precedence over values of IncludedColumns property

excludedSeries?: string[]

Gets or sets indexes, titles, or names of series to exclude from displaying in the data legend, e.g. "0, 1" or "Series1 Title, Series2 Title" The ExcludedSeries property takes precedence over values of IncludedSeries property

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;
finalValue?: string | number

The final value of this series.

focusBrush?: string

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

groupRowMarginBottom?: string | number
groupRowMarginLeft?: string | number
groupRowMarginRight?: string | number
groupRowMarginTop?: string | number
groupRowVisible?: string | boolean

Gets or sets whether to show Header row.

groupTextColor?: string

Gets or sets the Group text color.

groupTextMarginBottom?: string | number
groupTextMarginLeft?: string | number
groupTextMarginRight?: string | number
groupTextMarginTop?: string | number
groupTextStyle?: string

Gets or Sets the style to use for the Group text.

groupedPositionModeX?: string | DataTooltipGroupedPositionX

Gets or sets the tooltip position mode on the X axis for grouped series.

groupedPositionModeY?: string | DataTooltipGroupedPositionY

Gets or sets the tooltip position mode on the Y axis for grouped series.

groupingMode?: string | DataToolTipLayerGroupingMode

Gets or sets the grouping mode to apply to use for the tooltip layer.

headerFormatCulture?: string

Gets or sets globalization culture when displaying header as date time This property is ignored when setting HeaderFormatSpecifiers or HeaderFormatString properties

headerFormatDate?: string | DataLegendHeaderDateMode

Gets or sets date format for the header This property is ignored when setting HeaderFormatSpecifiers or HeaderFormatString properties

headerFormatSpecifiers?: any[]

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

headerFormatString?: string

Gets or sets the format string for header text displayed in the data legend.

headerFormatTime?: string | DataLegendHeaderTimeMode

Gets or sets time format for the header This property is ignored when setting HeaderFormatSpecifiers or HeaderFormatString properties

headerRowMarginBottom?: string | number
headerRowMarginLeft?: string | number
headerRowMarginRight?: string | number
headerRowMarginTop?: string | number
headerRowVisible?: string | boolean

Gets or sets whether to show Header row.

headerText?: string

Gets or sets the HeaderText for the data legend.

headerTextColor?: string

Gets or sets the header text color.

headerTextMarginBottom?: string | number
headerTextMarginLeft?: string | number
headerTextMarginRight?: string | number
headerTextMarginTop?: string | number
headerTextStyle?: string

Gets or Sets the style to use for the header text.

highlightedDataSource?: any
highlightedLegendItemVisibility?: string | Visibility

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

highlightedTitleSuffix?: string

Gets or sets the HighlightedTitleSuffix property.

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

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.

highlightedValuesFadeOpacity?: string | number

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

highlightingFadeOpacity?: string | number

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

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;
horizontalAppearanceMode?: string | AnnotationAppearanceMode

Gets or sets the mode used for shifting the annotation layer color based on the target series.

horizontalDashArray?: string | number[]

Gets or sets the mode used for shifting the annotation layer color based on the target series.

horizontalShiftAmount?: string | number

Gets or sets the percentage amount to shift the appearance mode by. Value must range between -1.0 to 1.0.

includedColumns?: string[]

Gets or sets names of data columns or their labels to include in displaying in the data tooltip, e.g. "High, Low" or "H, L" The ExcludedColumns property takes precedence over values of IncludedColumns property

includedSeries?: string[]

Gets or sets indexes, titles, or names of series to include in displaying in the data legend, e.g. "0, 1" or "Series1 Title, Series2 Title" The ExcludedSeries property takes precedence over values of IncludedSeries property

isActualLegendFinancial?: string | boolean

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

isComponentHighlightingModeIgnored?: string | boolean

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

isDefaultCrosshairDisabled?: string | boolean

Gets or sets whether the series viewer's default crosshair should be disabled by the presence of this layer.

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;
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>
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>
labelDisplayMode?: string | DataLegendLabelMode

Gets or sets the mode for displaying labels before series values in the data legend, e.g. O: H: L: C: for financial series

labelTextColor?: string

Gets or sets the units text color.

labelTextMarginBottom?: string | number
labelTextMarginLeft?: string | number
labelTextMarginRight?: string | number
labelTextMarginTop?: string | number
labelTextStyle?: string

Gets or Sets the style to use for the units text.

layoutMode?: string | DataLegendLayoutMode

Gets or sets the layout of content in the data legend

legend?: any

Gets or sets the legend used for the current series.

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

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

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.

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.

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

lineJoin?: string | PenLineJoin

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

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.

mouseOverEnabled?: string | boolean

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

name: string

Sets or gets a required unique name for the series.

opacity?: string | number
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>
outlineMode?: string | SeriesOutlineMode

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

percentChange?: string | number

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

positionOffsetX?: string | number

Gets or sets the offset of the tooltip layer on the X axis.

positionOffsetY?: string | number

Gets or sets the offset of the tooltip layer on the Y axis.

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

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>
safeActualBrush?: string

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

selectionBrush?: string

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

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>
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>
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>
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>
shiftAmount?: string | number

Gets or sets the percentage amount to shift the appearance mode by. Value must range between -1.0 to 1.0.

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.

shouldHideAutoCallouts?: string | boolean

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

shouldRemoveHighlightedDataOnLayerHidden?: string | boolean

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

shouldRenderAsOverlay?: string | boolean

Gets or sets whether this layer renders as an overlay or not.

shouldShiftOpacityForSafeActualBrush?: string | boolean

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

shouldUpdateWhenSeriesDataChanges?: string | boolean

Gets or sets whether the data legend should update when the series data is mutated.

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";
summaryLabelText?: string

Gets or sets the units text for the data legend.

summaryLabelTextColor?: string

Gets or sets the units text color.

summaryLabelTextStyle?: string

Gets or Sets the style to use for the units text.

summaryRowMarginBottom?: string | number
summaryRowMarginLeft?: string | number
summaryRowMarginRight?: string | number
summaryRowMarginTop?: string | number
summaryTitleText?: string

Gets or sets the SummaryTitleText for the data legend.

summaryTitleTextColor?: string

Gets or sets the summary text color.

summaryTitleTextMarginBottom?: string | number
summaryTitleTextMarginLeft?: string | number
summaryTitleTextMarginRight?: string | number
summaryTitleTextMarginTop?: string | number
summaryTitleTextStyle?: string

Gets or Sets the style to use for the summary text.

summaryType?: string | DataLegendSummaryType

Gets or sets the SummaryType for the data legend.

summaryUnitsText?: string

Gets or sets the units text for the data legend.

summaryUnitsTextColor?: string

Gets or sets the units text color.

summaryUnitsTextStyle?: string

Gets or Sets the style to use for the units text.

summaryValueTextColor?: string

Gets or sets the units text color.

summaryValueTextStyle?: string

Gets or Sets the style to use for the units text.

targetAxis?: IgrAxis<IIgrAxisProps>

Gets or sets the Axis to target this annotation to. If null, this annotation layer will not render content.

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>
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>
titleTextColor?: string

Gets or sets the display text color.

titleTextMarginBottom?: string | number
titleTextMarginLeft?: string | number
titleTextMarginRight?: string | number
titleTextMarginTop?: string | number
titleTextStyle?: string

Gets or Sets the style to use for the display text.

tooltipTemplate?: FunctionComponent<IChartTooltipProps> | Component<IChartTooltipProps, {}, any>
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>
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

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

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>
transitionOutCompleted?: ((s, e) => void)

Type declaration

transitionOutDuration?: string | number

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

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

transitionOutSpeedType?: string | TransitionOutSpeedType

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

unitsDisplayMode?: string | DataLegendUnitsMode

Gets or sets the UnitsMode for the data legend.

unitsText?: string

Gets or sets the units text for the data legend.

unitsTextColor?: string

Gets or sets the units text color.

unitsTextMarginBottom?: string | number
unitsTextMarginLeft?: string | number
unitsTextMarginRight?: string | number
unitsTextMarginTop?: string | number
unitsTextStyle?: string

Gets or Sets the style to use for the units text.

useIndex?: string | boolean

Gets or sets whether this series should take up an index for auto brush coloring.

useInterpolation?: string | boolean

Gets or sets whether to use value interpolation when drawing the tooltips.

useItemWiseColors?: string | boolean

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

useLegend?: string | boolean

Gets or sets whether this series interacts with the chart legend.

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>
valueFormatAbbreviation?: string | DataAbbreviationMode

Gets or sets mode for abbreviating large numbers displayed in the legend This property is ignored when setting ValueFormatSpecifiers or ValueFormatString properties

valueFormatCulture?: string

Gets or sets globalization culture when displaying values as currencies, e.g. use "en-GB" to display British pound symbol when the ValueFormatMode property is set to 'Currency' mode This property is ignored when setting ValueFormatSpecifiers or ValueFormatString properties

valueFormatMaxFractions?: string | number

Gets or sets maximum digits for formatting numbers displayed in the legend This property is ignored when setting ValueFormatSpecifiers or ValueFormatString properties

valueFormatMinFractions?: string | number

Gets or sets minimum digits for formatting numbers displayed in the legend This property is ignored when setting ValueFormatSpecifiers or ValueFormatString properties

valueFormatMode?: string | DataLegendValueMode

Gets or sets the mode for displaying values in the data legend, e.g. Currency ($500.25), Decimal (500.25), Integer (500)

valueFormatSpecifiers?: any[]

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

valueFormatString?: string

Gets or sets the format string for values displayed in the data legend.

valueFormatUseGrouping?: string | boolean

Gets or sets whether or not use grouping separator, e.g, 15,000 for 15000 This property is ignored when setting ValueFormatSpecifiers or ValueFormatString properties

valueRowMarginBottom?: string | number
valueRowMarginLeft?: string | number
valueRowMarginRight?: string | number
valueRowMarginTop?: string | number
valueRowVisible?: string | boolean

Gets or sets whether to show series rows.

valueTextColor?: string

Gets or sets the units text color.

valueTextMarginBottom?: string | number
valueTextMarginLeft?: string | number
valueTextMarginRight?: string | number
valueTextMarginTop?: string | number
valueTextStyle?: string

Gets or Sets the style to use for the units text.

valueTextUseSeriesColors?: string | boolean

Gets or sets whether to use series colors when displaying values in the legend

valueTextWhenMissingData?: string

Gets or sets text displayed when data column is missing a value, e.g. "no data"

verticalAppearanceMode?: string | AnnotationAppearanceMode

Gets or sets the mode used for shifting the annotation layer color based on the target series.

verticalDashArray?: string | number[]

Gets or sets the mode used for shifting the annotation layer color based on the target series.

verticalShiftAmount?: string | number

Gets or sets the percentage amount to shift the appearance mode by. Value must range between -1.0 to 1.0.

visibility?: string | Visibility
visibleRangeMarginBottom?: string | number

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

visibleRangeMarginLeft?: string | number

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

visibleRangeMarginRight?: string | number

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

visibleRangeMarginTop?: string | number

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

visibleRangeMode?: string | SeriesVisibleRangeMode

Gets or sets the visible range mode to use.