If using the new style context, re-declare this in your class to be the
React.ContextType of your static contextType.
Should be used with type annotation or static contextType.
static contextType = MyContext
// For TS pre-3.7:
context!: React.ContextType<typeof MyContext>
// For TS 3.7 and above:
declare context: React.ContextType<typeof MyContext>
Readonly propsStatic Optional contextIf set, this.context will be set at runtime to the current value of the given Context.
Usage:
type MyContext = number
const Ctx = React.createContext<MyContext>(0)
class Foo extends React.Component {
static contextType = Ctx
context!: React.ContextType<typeof Ctx>
render () {
return <>My context's value: {this.context}</>;
}
}
Gets or sets the mode used for shifting the annotation layer color based on the target series.
Gets the actual opacity applied to the area fill visual.
let actualFillOpacity: number = series.actualAreaFillOpacity;
Gets the effective brush for the current series object.
let actualBrush: string = series.actualBrush;
Gets the text that is displayed for the Close label in the tooltip.
Gets the effective emphasis brush for the current series object.
Gets actual Selection mode
Gets the text that is displayed for the High label in the tooltip.
Gets actual HighlightedValues fade opacity
Gets actual highlighting fade opacity
Gets actual highlighting mode
Resolved method of hit testing to use when pointing to items in the chart.
let hitTestMode: SeriesHitTestMode = this.series.actualHitTestMode;
Gets or sets the mode used for shifting the annotation layer color based on the target series.
Gets or sets the mode used for shifting the annotation layer color based on the target series.
Gets or sets the percentage amount to shift the appearance mode by. Value must range between -1.0 to 1.0.
Gets the actual extra layers for the series.
Gets the effective legend badge fill for the current series.
Gets the effective legend badge outline for the current series.
Gets the actual legend item badge template used by the series.
Gets the text that is displayed for the Low label in the tooltip.
Gets the actual opacity applied to the fill of the markers.
Gets the text that is displayed for the Open label in the tooltip.
Gets the effective outline for the current series object.
let actualOutline: string = series.ActualOutline;
Gets the text that is displayed for the Value label in the tooltip.
Gets the effective emphasis brush for the current series object.
Gets actual Selection mode
Gets or sets the percentage amount to shift the appearance mode by. Value must range between -1.0 to 1.0.
Gets the effective Thickness for the current series object.
Gets the text that is displayed for the Value label in the tooltip.
Gets or sets the mode used for shifting the annotation layer color based on the target series.
Gets or sets the mode used for shifting the annotation layer color based on the target series.
Gets or sets the percentage amount to shift the appearance mode by. Value must range between -1.0 to 1.0.
Gets the text that is displayed for the Volume label in the tooltip.
Gets or sets the allowed positions that the callout layer is allowed to use.
Gets or sets the mode used for shifting the annotation layer color based on the target series.
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>
Gets or sets the AutoCalloutLabel format string to use for the AutoCalloutLabel.
Gets or sets the format specifiers to use with the AutoCalloutLabelFormat string.
Gets or sets the precision to use when values are used for the auto callout labels.
Gets or sets the AutoCalloutLabel format string to use for the AutoCalloutLabel.
Gets or sets the format specifiers to use with the AutoCalloutValueLabelFormat string.
Gets or sets the rules for when the callouts should be visible.
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>
Gets or sets the brush that specifies how the backgrounds for the callouts of the layer are painted. Leave unset for an automatic value.
Gets or sets the strategy to use for avoiding collisions between the callouts in this layer. Leave unset for an automatic value.
Raised to allow you to decide on the content for an automatically created callout.
Raised to allow you to decide on the content for an automatically created callout.
Gets or sets the corner radius to use for the callout borders.
Gets or sets the dark color to use for the callout text. Leave unset for an automatic value.
Gets or sets the precision to use displaying values for interpolated crosshair positions.
Raised to allow you to decide on the label for an automatically created callout.
Raised to allow you to decide on the label for an automatically created callout.
Gets or sets the brush that specifies how the leader lines for the callouts of the layer are painted.
Gets or sets the light color to use for the callout text. Leave unset for an automatic value.
Gets or sets the brush that specifies how the outlines for the callouts of the layer are painted.
Gets or sets the bottom padding to use within the callout. Leaving this NaN will use an automatic value related to the axis label margins.
Gets or sets the left padding to use withing the callout. Leaving this NaN will use an automatic value related to the axis label margins.
Gets or sets the right padding to use within the callout. Leaving this NaN will use an automatic value related to the axis label margins.
Gets or sets the top padding to use within the callout. Leaving this NaN will use an automatic value related to the axis label margins.
Gets or sets the padding to add to the callout positioning. Leave unset for an automatic value.
Event raised when updating style of callout layer
Event raised when updating style of callout layer
Raised to allow you to select a target series for a data bound callout.
Raised to allow you to select a target series for a data bound callout.
Gets or sets the stroke thickness for the callout backing. Leave unset for an automatic value.
Event raised when updating style of callout layer
Event raised when updating style of callout layer
Gets or sets the color to use for the callout text. Leave unset for an automatic value.
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>
Gets or sets a channel name to identify other callout layers within the chart to share collision information with.
Gets or sets the content mapping property for the callouts.
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.
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.
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
Gets unique key used to identify the series in data legend
Gets or sets the DiscreteLegendItemTemplate property. The legend item control content is created according to the DiscreteLegendItemTemplate on-demand by the series object itself.
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;
The final value of this series.
Gets or sets the Focus brush to use for the series.
Returns whether the current series supports visual markers.
let hasMarkers: boolean = this.series.hasMarkers;
Gets whether the series has only marker as visuals
Gets whether the current series shows an area shape.
Returns whether the current series has a visible marker style.
Gets or sets whether the highlighted values layer should have a legend item.
Gets or sets the HighlightedTitleSuffix property.
Gets or sets whether to use values, rather than labels for auto callout labels.
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
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.
Gets the current extra layers for the series.
Gets or sets the target opacity to fade to for fade style HighlightedValues.
Gets or sets the target opacity to fade to for fade style highlighting.
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 encodedthis.series.hitTestMode = SeriesHitTestMode.Computational;
Gets or sets the mode used for shifting the annotation layer color based on the target series.
Gets or sets the mode used for shifting the annotation layer color based on the target series.
Gets or sets the percentage amount to shift the appearance mode by. Value must range between -1.0 to 1.0.
Gets or sets whether the ActualLegend is FinancialLegend or normal Legend.
Gets whether the series is an callout annotation layer.
Gets whether the series is an crosshair annotation layer.
Gets whether the series is final value annotation layer.
Gets whether the series is an annotation layer displayed only when hovering over the chart. Crosshair Layer, Category Highlight Layer, Category Tooltip Layer, Item Tooltip Layer
Gets whether this series is an annotation layer.
Gets whether the series is a value annotation layer.
Gets whether the current series shows an area shape.
Gets whether the current series shows an area or line shape.
let isAreaorLine: boolean = this.series.isAreaorLine;
Gets or sets how to select the final value to annotate.
Gets whether the current series shows a horizontal column shape.
Gets or sets whether to allow the callouts to be variable distances from the target points, for suppporting collision modes.
Gets whether the current series is a category type series.
let isCategory: boolean = this.series.isCategory;
Gets whether the current series shows a column shape.
Gets or sets whether the component level highlight mode is ignored.
Gets or sets whether to allow for custom callout styles.
Gets or sets whether to allow for custom callout styles.
Gets whether or not the default crosshair behavior is disabled.
Gets or sets whether the series viewer's default crosshair should be disabled by the presence of this layer.
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;
Gets whether the default tooltip behavior should be disabled if this series is present.
let isDefaultTooltipBehaviorDisabled: boolean = this.series.isDefaultTooltipBehaviorDisabled;
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>
Gets whether the current series is a financial type series.
let isFinancial: boolean = this.series.isFinancial;
Gets whether the series is financial indicator
Gets whether the series is financial overlay
Gets whether the series has financial OHLC/candlestick visuals
Gets whether the series is financial waterfall
Gets whether the current series is a stack fragment.
let isFragment: boolean = this.series.isFragment;
Gets whether the current series is a geographic series.
let isGeographic: boolean = this.series.isGeographic;
Gets whether the series is a highlight overlay.
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>
Gets if the series uses an index, which can be used to auto-assign it a color.
Gets whether the current series shows a line contour shape.
Gets whether the current series shows only line shapes.
Overridden by derived series classes to indicate when markerless display is preferred or not.
Overridden by derived series classes to indicate when negative colors are supported or not.
Gets whether the current series shows a pie shape.
Gets whether the current series shows pixels.
Gets whether the current series is a polar type series.
let isPolar: boolean = this.series.isPolar;
Gets whether the current series shows a polygon shape.
Gets whether the current series shows a polyline shape.
Gets whether the current series is a radial type series.
let isRadial: boolean = this.series.isRadial;
Gets whether the current series is a range type series.
let isRange: boolean = this.series.isRange;
Gets whether the current series is a scatter type series.
let isScatter: boolean = this.series.isScatter;
Gets whether the current series is a shape type series.
Gets whether the current series shows interactive shape controls.
Gets whether the current series shows a spline shape.
Gets whether the current series is a stacked type series.
let isStacked: boolean = this.series.isStacked;
Gets whether the current series shows step shapes.
Gets whether the series supports summarization in Data Legend and Data Tooltip.
Gets whether the current series shows a tile imagery.
Gets if the series should appear in any legends.
Gets whether the current series shows an area shape.
Gets whether the series is a value overlay.
Gets whether the current series is oriented vertically.
let isVertical: boolean = this.series.isVertical;
Gets whether the current series shows a waterfall column shape.
Gets or sets the key mapping property for the callouts.
Gets or sets the label format string to use for the label.
Gets or sets the format specifiers to use with the LabelFormat string.
Gets or sets the label mapping property for the callouts.
Gets the current extra layers for the series.
Gets or sets the legend used for the current series.
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
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
Gets or sets the LegendItemBadgeTemplate property. The legend item badge is created according to the LegendItemBadgeTemplate on-demand by the series object itself.
Gets or sets the LegendItemTemplate property. The legend item control content is created according to the LegendItemTemplate on-demand by the series object itself.
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>
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.
Gets or sets the brush that specifies current series object's line join style.
Gets or sets the opacity applied to the fill of the markers. This property only applies to series that have area visual.
Gets or sets the whether the chart reacts to mouse move events.
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>
Gets or sets the outline mode to use for the series.
The percent change from the beginning to the end of this series.
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>
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>
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>
Gets the effective brush for the current series object with opacity removed so its contrasty for use as a font color.
Gets or sets the selection brush to use for the series.
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>
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>
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>
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>
Gets or sets the percentage amount to shift the appearance mode by. Value must range between -1.0 to 1.0.
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.
Gets or sets whether this series should suppress it's auto callouts
Gets or sets whether the opacity should be automatically shifted for the safe actual brush.
Gets or sets whether this layer renders as an overlay or not.
Gets or sets whether the opacity should be automatically shifted for the safe actual brush.
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";
Gets or sets the series to target this annotation to. If null, this annotation targets all series simultaneously.
Gets or sets the name of the series series to target this annotation to. If null, this annotation targets all series simultaneously.
Gets or sets the stroke thickness for the axis annotation backing. Leave unset for an automatic value.
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>
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>
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>
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;
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;
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>
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;
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;
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>
Fired when a transition out has completed.
Fired when a transition out has completed.
Gets or sets the duration of the current series' transition out morph.
Gets or sets the EasingFunction used to morph the current series during the initial transition.
Gets or sets the EasingFunction used to morph the current series during the initial transition.
Gets or sets the duration of the current series' transition out morph.
Gets or sets whether to the label color is automatically decided between a light and dark option for contrast.
Gets or sets whether this series should take up an index for auto brush coloring.
Gets or sets whether to use values, rather than labels for auto callout labels.
Gets or sets whether to the series color as the outline of the callout.
Gets or sets whether to the series item color as the outline of the callout.
Gets or sets whether the series should use individual palette colors for each item.
Gets or sets whether this series interacts with the chart legend.
Gets or sets whether to the series color as the outline of the callout.
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>
Gets or sets whether to use values, rather than labels for auto callout labels.
Gets or sets the mode used for shifting the annotation layer color based on the target series.
Gets or sets the mode used for shifting the annotation layer color based on the target series.
Gets or sets the percentage amount to shift the appearance mode by. Value must range between -1.0 to 1.0.
Gets or sets the bottom margin to use when getting a visible axis range for the series.
Gets or sets the left margin to use when getting a visible axis range for the series.
Gets or sets the right margin to use when getting a visible axis range for the series.
Gets or sets the top margin to use when getting a visible axis range for the series.
Gets or sets the visible range mode to use.
Gets or sets the label mapping property for the callouts.
Gets or sets the label mapping property for the callouts.
Optional UNSAFE_Called immediately before mounting occurs, and before Component#render.
Avoid introducing any side-effects or subscriptions in this method.
This method will not stop working in React 17.
Note: the presence of getSnapshotBeforeUpdate or getDerivedStateFromProps prevents this from being invoked.
16.3, use componentDidMount or the constructor instead
Optional UNSAFE_Called when the component may be receiving new props. React may call this even if props have not changed, so be sure to compare new and existing props if you only want to handle changes.
Calling Component#setState generally does not trigger this method.
This method will not stop working in React 17.
Note: the presence of getSnapshotBeforeUpdate or getDerivedStateFromProps prevents this from being invoked.
16.3, use static getDerivedStateFromProps instead
Optional UNSAFE_Called immediately before rendering when new props or state is received. Not called for the initial render.
Note: You cannot call Component#setState here.
This method will not stop working in React 17.
Note: the presence of getSnapshotBeforeUpdate or getDerivedStateFromProps prevents this from being invoked.
16.3, use getSnapshotBeforeUpdate instead
Optional componentOptional componentCalled immediately after updating occurs. Not called for the initial render.
The snapshot is only present if getSnapshotBeforeUpdate is present and returns non-null.
Optional componentCalled immediately before mounting occurs, and before Component#render.
Avoid introducing any side-effects or subscriptions in this method.
Note: the presence of getSnapshotBeforeUpdate or getDerivedStateFromProps prevents this from being invoked.
16.3, use componentDidMount or the constructor instead; will stop working in React 17
Optional componentCalled when the component may be receiving new props. React may call this even if props have not changed, so be sure to compare new and existing props if you only want to handle changes.
Calling Component#setState generally does not trigger this method.
Note: the presence of getSnapshotBeforeUpdate or getDerivedStateFromProps prevents this from being invoked.
16.3, use static getDerivedStateFromProps instead; will stop working in React 17
Optional componentOptional componentCalled immediately before rendering when new props or state is received. Not called for the initial render.
Note: You cannot call Component#setState here.
Note: the presence of getSnapshotBeforeUpdate or getDerivedStateFromProps prevents this from being invoked.
16.3, use getSnapshotBeforeUpdate instead; will stop working in React 17
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.
let index: number = this.series.getExactItemIndex({x:.5,y:.5});
If possible, will return the best available value marker bounding box within the series that has the best value match for the world position provided.
Gets the data values of each axis associated with the specified value type. For example, if you specify mode as Maximum then it will return the maximum numerical value for each axis. For non-numerical axes it will return NaN.
Gets position of series value for specified layer value mode
Optional getRuns before React applies the result of render to the document, and
returns an object to be given to componentDidUpdate. Useful for saving
things such as scroll position before render causes changes to it.
Note: the presence of getSnapshotBeforeUpdate prevents any of the deprecated lifecycle events from running.
Moves the cursor point to the provided world position. Some series may react to the current cursor position.
MoveCursorPoint can be used on annotation layers to programitically show the annotation at the given point.
this.crosshair.moveCursorPoint({x:.5,y:.5});
Simulates a pointer hover over the series surface.
When tooltips are enabled, SimulateHover can be used to automatically display the tooltip over a particular series item.
this.series.simulateHover({x:250,y:250});
Static _create
Represents an annotation layer that displays crosshair lines that cross through the closest value of the target series under the cursor.