Optional
actualOptional
actualGets the effective brush for the current series object.
let actualBrush: string = series.actualBrush;
Optional
actualGets the effective emphasis brush for the current series object.
Optional
actualGets actual Selection mode
Optional
actualGets actual HighlightedValues fade opacity
Optional
actualGets actual highlighting fade opacity
Optional
actualGets actual highlighting mode
Optional
actualResolved method of hit testing to use when pointing to items in the chart.
let hitTestMode: SeriesHitTestMode = this.series.actualHitTestMode;
Optional
actualGets the effective legend badge fill for the current series.
Optional
actualGets the effective legend badge outline for the current series.
Optional
actualGets the actual legend item badge template used by the series.
Optional
actualGets the actual opacity applied to the fill of the markers.
Optional
actualGets the effective outline for the current series object.
let actualOutline: string = series.ActualOutline;
Optional
actualOptional
actualGets the effective emphasis brush for the current series object.
Optional
actualGets actual Selection mode
Optional
actualGets the effective Thickness for the current series object.
Optional
areaGets 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
autoGets or sets the AutoCalloutLabel format string to use for the AutoCalloutLabel.
Optional
autoGets or sets the format specifiers to use with the AutoCalloutLabelFormat string.
Optional
autoGets or sets the AutoCalloutLabel format string to use for the AutoCalloutLabel.
Optional
autoGets or sets the format specifiers to use with the AutoCalloutValueLabelFormat string.
Optional
brushGets 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
childrenOptional
coercionGets 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
dashGets 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
dataGets 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
dataOptional
discreteGets or sets the DiscreteLegendItemTemplate property. The legend item control content is created according to the DiscreteLegendItemTemplate on-demand by the series object itself.
Optional
expectGets 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
finalThe final value of this series.
Optional
focusGets or sets the Focus brush to use for the series.
Optional
highlightedOptional
highlightedGets or sets whether the highlighted values layer should have a legend item.
Optional
highlightedGets or sets the HighlightedTitleSuffix property.
Optional
highlightedGets 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
highlightedGets 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
highlightedGets or sets the target opacity to fade to for fade style HighlightedValues.
Optional
highlightingGets or sets the target opacity to fade to for fade style highlighting.
Optional
hitMethod 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;
Optional
isGets or sets whether the ActualLegend is FinancialLegend or normal Legend.
Optional
isGets or sets whether the component level highlight mode is ignored.
Optional
isGets 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
isGets 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
isGets 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
legendGets or sets the legend used for the current series.
Optional
legendGets 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
legendGets 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
legendGets or sets the LegendItemBadgeTemplate property. The legend item badge is created according to the LegendItemBadgeTemplate on-demand by the series object itself.
Optional
legendGets or sets the LegendItemTemplate property. The legend item control content is created according to the LegendItemTemplate on-demand by the series object itself.
Optional
legendGets 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
lineGets 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
lineGets or sets the brush that specifies current series object's line join style.
Optional
markerGets or sets the opacity applied to the fill of the markers. This property only applies to series that have area visual.
Optional
mouseGets or sets the whether the chart reacts to mouse move events.
Sets or gets a required unique name for the series.
Optional
opacityOptional
outlineGets 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
outlineGets or sets the outline mode to use for the series.
Optional
percentThe percent change from the beginning to the end of this series.
Optional
renderThis 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>
Optional
resolutionGets 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
safeGets the effective brush for the current series object with opacity removed so its contrasty for use as a font color.
Optional
selectionGets or sets the selection brush to use for the series.
Optional
shadowGets 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
shadowGets 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
shadowGets 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
shadowGets 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
shouldGets 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
shouldGets or sets whether this series should suppress it's auto callouts
Optional
shouldGets or sets whether the opacity should be automatically shifted for the safe actual brush.
Optional
shouldGets or sets whether the opacity should be automatically shifted for the safe actual brush.
Optional
showGets 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
thicknessGets 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
titleGets 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
tooltipOptional
transitionGets 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
transitionGets 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;
Optional
transitionGets 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
transitionGets 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;
Optional
transitionGets 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
transitionFired when a transition out has completed.
Optional
transitionGets or sets the duration of the current series' transition out morph.
Optional
transitionGets or sets the EasingFunction used to morph the current series during the initial transition.
Optional
transitionGets or sets the duration of the current series' transition out morph.
Optional
triangleThe name of the property of the TrianglesSource items which, for each triangle, contains the index of the first vertex point in the ItemsSource.
Optional
triangleThe name of the property of the TrianglesSource items which, for each triangle, contains the index of the second vertex point in the ItemsSource.
Optional
triangleThe name of the property of the TrianglesSource items which, for each triangle, contains the index of the third vertex point in the ItemsSource.
Optional
trianglesThe source of triangulation data. This property is optional. If it is left as null, the triangulation will be created based on the items in the ItemsSource. Triangulation is a demanding operation, so the runtime performance will be better when specifying a TriangulationSource, especially when a large number of data items are present.
Optional
triangulationRaised when the status of an ongoing Triangulation has changed.
Optional
useGets or sets whether the series should use individual palette colors for each item.
Optional
useGets 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
visibilityOptional
visibleGets or sets the bottom margin to use when getting a visible axis range for the series.
Optional
visibleGets or sets the left margin to use when getting a visible axis range for the series.
Optional
visibleGets or sets the right margin to use when getting a visible axis range for the series.
Optional
visibleGets or sets the top margin to use when getting a visible axis range for the series.
Optional
visibleGets or sets the visible range mode to use.
Optional
xThe X-Axis for this series.
Optional
xGets or sets the name to use to resolve xAxis from markup.
Optional
xGets or sets the label displayed before series X value in the Data Legend.
Optional
xGets or sets the unit after displayed after series X value in the Data Legend.
Optional
xThe name of the property from which to extract the X-coordinate for each item in the ItemsSource.
Optional
yThe Y-Axis for this series.
Optional
yGets or sets the name to use to resolve yAxis from markup.
Optional
yGets or sets the label displayed before series Y value in the Data Legend.
Optional
yGets or sets the unit after displayed after series Y value in the Data Legend.
Optional
yThe name of the property from which to extract the Y-coordinate for each item in the ItemsSource.
Gets the actual opacity applied to the area fill visual.