Gets the effective brush for the current series object.
let actualBrush: string = series.actualBrush;
Resolved method of hit testing to use when pointing to items in the chart.
let hitTestMode: SeriesHitTestMode = this.series.actualHitTestMode;
Gets the effective marker brush for the current series object.
actualMarkerBrush
property gets the effective marker brush for the current series object. For example, you can use it like this:
let effectiveMarkerBrush: string = this.series.actualMarkerBrush;
Gets the effective marker outline for the current series object.
`ActualMarkerOutline` property gets the effective marker outline for the current series object. You can use it like this:
let effectiveMarkerOutline: string = this.series.actualMarkerOutline;
Gets the effective marker template for the current series object.
actualMarkerTemplate
property gets the effective marker template for the current series object. You can use it like this:
Gets the effective outline for the current series object.
let actualOutline: string = series.ActualOutline;
Gets the effective TrendLineBrush for this series.
The actualTrendLineBrush
property is used to gets the effective trendLineBrush
for this 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>
Event raised when Assigning Category Marker Style
Event raised when Assigning Category Style
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 IgrSeries
.
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 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>
Determines the item returned in hit-testing when the pointer is over an object which represents several consolidated items.
The consolidatedItemHitTestBehavior
property is used to determines returned item in hit-testing when the pointer is over an object which represents several consolidated items.
<IgrDataChart >
<IgrCategoryXAxis name="xAxisYears"
interval={12} labelLocation="OutsideBottom"
label="Year" overlap={1} gap={0.4} />
<IgrCategoryXAxis name="xAxisMonths"
interval={1} labelLocation="OutsideBottom"
label="Month" overlap={1} gap={0.4}/>
<IgrNumericYAxis name="yAxisLeft"
title="Expanse | Revenue"
minimumValue={-900} labelLocation="OutsideLeft"
maximumValue={900}
interval={300} />
<IgrNumericYAxis name="yAxisRight"
title="Profit (%)"
minimumValue={0} labelLocation="OutsideRight"
maximumValue={100} />
<IgrLineSeries name="series1"
valueMemberPath="Revenue"
xAxisName="xAxisMonths"
yAxisName="yAxisLeft"
consolidatedItemHitTestBehavior="Basic" />
</IgrDataChart>
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.
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 whether this category series should allow custom style overrides of its individual marker visuals.
Gets or sets whether this category series should allow custom style overrides of its individual visuals.
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 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 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 or sets whether the series should transition into the plot area when a new data source is assigned. Note: Transitions are not currently supported for stacked series.
Set isTransitionInEnabled
to true if you want your chart series to animate into position when the chart is loading into view.
this.columnSeries2 = new IgrColumnSeries({ name: "colSeries2" });
this.columnSeries2.dataSource = this.categoryData;
this.columnSeries2.xAxis = this.categoryXAxis;
this.columnSeries2.yAxis = this.numericYAxis;
this.columnSeries2.xAxisName = "categoryXAxis";
this.columnSeries2.yAxisName = "numericYAxis";
this.columnSeries2.valueMemberPath = "RUS";
this.columnSeries2.isTransitionInEnabled= "true";
<IgrDataChart
dataSource={this.state.dataSource} >
<IgrCategoryXAxis name="xAxis" />
<IgrNumericYAxis name="yAxis" />
<IgrColumnSeries
name="series1"
xAxisName="xAxis"
yAxisName="yAxis"
valueMemberPath="Value"
isTransitionInEnabled="true"/>
</IgrDataChart>
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 the legend item visibility for the current series object.
The LegendItemVisibilty
can be used to exclude only certain IgrSeries
from the IgrLegend
.
<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 brush that specifies how the current series object's marker interiors are painted.
markerBrush
property gets or sets the brush that specifies how the current series object's marker interiors are painted. You can use it like this:
this.series.markerBrush = "red";
<IgrDataChart
dataSource={this.state.dataSource} >
<IgrCategoryXAxis name="xAxis" />
<IgrNumericYAxis name="yAxis" />
<IgrColumnSeries
name="series1"
xAxisName="xAxis"
yAxisName="yAxis"
valueMemberPath="Value"
markerBrush = "blue" />
</IgrDataChart>
The desired behavior for markers in this series which are placed too close together for the current view, resulting in a collision.
The markerCollisionAvoidance
property controls the technique the chart uses to avoid overlapping markers.
<IgrDataChart >
<IgrCategoryXAxis name="xAxisYears"
interval={12} labelLocation="OutsideBottom"
label="Year" overlap={1} gap={0.4} />
<IgrCategoryXAxis name="xAxisMonths"
interval={1} labelLocation="OutsideBottom"
label="Month" overlap={1} gap={0.4}/>
<IgrNumericYAxis name="yAxisLeft"
title="Expanse | Revenue"
minimumValue={-900} labelLocation="OutsideLeft"
maximumValue={900}
interval={300} />
<IgrNumericYAxis name="yAxisRight"
title="Profit (%)"
minimumValue={0} labelLocation="OutsideRight"
maximumValue={100} />
<IgrLineSeries name="series1"
valueMemberPath="Revenue"
xAxisName="xAxisMonths"
yAxisName="yAxisLeft"
markerCollisionAvoidance="fade" />
</IgrDataChart>
Gets or sets the brush that specifies how the current series object's marker outlines are painted.
markerOutline
property gets or sets the brush that specifies how the current series object's marker outlines are painted. You can use it like this:
this.series.markerOutline = "red";
<IgrDataChart
dataSource={this.state.dataSource} >
<IgrCategoryXAxis name="xAxis" />
<IgrNumericYAxis name="yAxis" />
<IgrColumnSeries
name="series1"
xAxisName="xAxis"
yAxisName="yAxis"
valueMemberPath="Value"
markerOutline = "blue" />
</IgrDataChart>
Gets or sets the MarkerTemplate for the current series object.
markerTemplate
property gets or sets the MarkerTemplate for the current series object. For example, you can use it like this:
Gets or sets the marker type for the current series object. If the MarkerTemplate property is set, the setting of the MarkerType property will be ignored.
markerType
property gets or sets the marker type for the current series object. For example, you can set it like this:
this.series.markerType = "circle";
<IgrDataChart
dataSource={this.state.dataSource} >
<IgrCategoryXAxis name="xAxis" />
<IgrNumericYAxis name="yAxis" />
<IgrColumnSeries
name="series1"
xAxisName="xAxis"
yAxisName="yAxis"
valueMemberPath="Value"
markerType = "circle"/>
</IgrDataChart>
Gets or sets the whether the chart reacts to mouse move events.
Sets or gets a required unique name for the series.
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 IgrSeries
.
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>
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>
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 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 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 width of the current series object's line thickness.
Depending on the IgrSeries
type, this can be the main brush used, or just the outline. For example, when using a IgrLineSeries
it will affect the thickness of the lines drawn, whereas when using a IgrColumnSeries
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 IgrSeries
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's morph.
The transitionDuration
can be used to play animation when data is added or removed from a IgrSeries
. 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 IgrSeries
. 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's 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 method by which to animate the data into the chart when the chart data source is swapped. Note: Transitions are not currently supported for stacked series.
transitionInMode
controls the direction of the transition-in animation.
<IgrDataChart
dataSource={this.state.dataSource} >
<IgrCategoryXAxis name="xAxis" />
<IgrNumericYAxis name="yAxis" />
<IgrColumnSeries
name="series1"
xAxisName="xAxis"
yAxisName="yAxis"
valueMemberPath="Value"
transitionInMode="accordionfromRight"/>
</IgrDataChart>
this.columnSeries2.transitionInMode= "accordionfromRight";
Gets or sets the duration of the current series's 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>
Gets or sets the brush to use to draw the trend line.
The trendLineBrush
property is used to brush the trend line.
<IgrDataChart >
<IgrCategoryXAxis name="xAxisYears"
interval={12} labelLocation="OutsideBottom"
label="Year" overlap={1} gap={0.4} />
<IgrCategoryXAxis name="xAxisMonths"
interval={1} labelLocation="OutsideBottom"
label="Month" overlap={1} gap={0.4}/>
<IgrNumericYAxis name="yAxisLeft"
title="Expanse | Revenue"
minimumValue={-900} labelLocation="OutsideLeft"
maximumValue={900}
interval={300} />
<IgrNumericYAxis name="yAxisRight"
title="Profit (%)"
minimumValue={0} labelLocation="OutsideRight"
maximumValue={100} />
<IgrLineSeries name="series1"
valueMemberPath="Revenue"
xAxisName="xAxisMonths"
yAxisName="yAxisLeft"
trendLineBrush="Gray" />
</IgrDataChart>
series.trendLineBrush="red";
Gets or sets the trend line period for the current series. The typical, and initial, value for trend line period is 7.
The trendLinePeriod
property is used for trend line period of the current series.
<IgrDataChart >
<IgrCategoryXAxis name="xAxisYears"
interval={12} labelLocation="OutsideBottom"
label="Year" overlap={1} gap={0.4} />
<IgrCategoryXAxis name="xAxisMonths"
interval={1} labelLocation="OutsideBottom"
label="Month" overlap={1} gap={0.4}/>
<IgrNumericYAxis name="yAxisLeft"
title="Expanse | Revenue"
minimumValue={-900} labelLocation="OutsideLeft"
maximumValue={900}
interval={300} />
<IgrNumericYAxis name="yAxisRight"
title="Profit (%)"
minimumValue={0} labelLocation="OutsideRight"
maximumValue={100} />
<IgrLineSeries name="series1"
valueMemberPath="Revenue"
xAxisName="xAxisMonths"
yAxisName="yAxisLeft"
trendLinePeriod ="2" />
</IgrDataChart>
series.trendLinePeriod= 7;
Gets or sets the thickness of the current series object's trend line.
The trendLineThickness
property is used for thickness of the current series object's trend line.
<IgrDataChart >
<IgrCategoryXAxis name="xAxisYears"
interval={12} labelLocation="OutsideBottom"
label="Year" overlap={1} gap={0.4} />
<IgrCategoryXAxis name="xAxisMonths"
interval={1} labelLocation="OutsideBottom"
label="Month" overlap={1} gap={0.4}/>
<IgrNumericYAxis name="yAxisLeft"
title="Expanse | Revenue"
minimumValue={-900} labelLocation="OutsideLeft"
maximumValue={900}
interval={300} />
<IgrNumericYAxis name="yAxisRight"
title="Profit (%)"
minimumValue={0} labelLocation="OutsideRight"
maximumValue={100} />
<IgrLineSeries name="series1"
valueMemberPath="Revenue"
xAxisName="xAxisMonths"
yAxisName="yAxisLeft"
trendLineThickness ="2" />
</IgrDataChart>
series.trendLineThickness= 2;
Gets or sets the trend type for the current series object.
The trendLineType
property is used for the current series object's trend type.'
<IgrDataChart >
<IgrCategoryXAxis name="xAxisYears"
interval={12} labelLocation="OutsideBottom"
label="Year" overlap={1} gap={0.4} />
<IgrCategoryXAxis name="xAxisMonths"
interval={1} labelLocation="OutsideBottom"
label="Month" overlap={1} gap={0.4}/>
<IgrNumericYAxis name="yAxisLeft"
title="Expanse | Revenue"
minimumValue={-900} labelLocation="OutsideLeft"
maximumValue={900}
interval={300} />
<IgrNumericYAxis name="yAxisRight"
title="Profit (%)"
minimumValue={0} labelLocation="OutsideRight"
maximumValue={100} />
<IgrLineSeries name="series1"
valueMemberPath="Revenue"
xAxisName="xAxisMonths"
yAxisName="yAxisLeft"
trendLineType="SimpleAverage" />
</IgrDataChart>
series.trendLineType= "CubicFit";
Determines how unknown values will be plotted on the chart. Null and Double.NaN are two examples of unknown values.
Determines how unknown values will be plotted for the IgrSeries
. This can be set to LinearInterpolate
to create a continous shape or DontPlot
to create breaks in the series.
Null and Double.NaN are two examples of unknown values.
series.unknownValuePlotting = UnknownValuePlotting.LinearInterpolate;
<IgrDataChart
dataSource={this.data} >
<IgrCategoryXAxis name="xAxis"
label="Country" />
<IgrNumericYAxis name="yAxis"
minimumValue={0} />
<IgrLineSeries
name="series1"
xAxisName="xAxis"
yAxisName="yAxis"
valueMemberPath="Coal"
unknownValuePlotting:"LinearInterpolate"/>
Sets or Gets whether to increase marker fidelity for extreme data shapes that have lots of Y variation over short X intervals.
Set useHighMarkerFidelity
when your data has high variation along the y-axis within a short span of this x-axis.
<IgrDataChart
dataSource={this.state.dataSource} >
<IgrCategoryXAxis name="xAxis" />
<IgrNumericYAxis name="yAxis" />
<IgrColumnSeries
name="series1"
xAxisName="xAxis"
yAxisName="yAxis"
valueMemberPath="Value"
useHighMarkerFidelity="true"/>
</IgrDataChart>
this.columnSeries2.useHighMarkerFidelity= "true";
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 the value mapping property for the current series object.
The valueMemberPath
property is used for the value mapping property of the current series object.
<IgrDataChart >
<IgrCategoryXAxis name="xAxisYears"
interval={12} labelLocation="OutsideBottom"
label="Year" overlap={1} gap={0.4} />
<IgrCategoryXAxis name="xAxisMonths"
interval={1} labelLocation="OutsideBottom"
label="Month" overlap={1} gap={0.4}/>
<IgrNumericYAxis name="yAxisLeft"
title="Expanse | Revenue"
minimumValue={-900} labelLocation="OutsideLeft"
maximumValue={900}
interval={300} />
<IgrNumericYAxis name="yAxisRight"
title="Profit (%)"
minimumValue={0} labelLocation="OutsideRight"
maximumValue={100} />
<IgrLineSeries name="series1"
valueMemberPath="Revenue"
xAxisName="xAxisMonths"
yAxisName="yAxisLeft" />
</IgrDataChart>
Gets or sets the effective x-axis for this series.
Instantiate xAxis
<IgrDataChart
dataSource={this.state.dataSource} >
<IgrCategoryXAxis name="xAxis" />
<IgrNumericYAxis name="yAxis" />
<IgrColumnSeries
name="series1"
xAxisName="xAxis"
yAxisName="yAxis"
valueMemberPath="Value" />
</IgrDataChart>
this.columnSeries1 = new IgrColumnSeries({ name: "colSeries1" });
this.columnSeries1.dataSource = this.categoryData;
this.columnSeries1.xAxis = this.categoryXAxis;
this.columnSeries1.yAxis = this.numericYAxis;
this.columnSeries1.xAxisName = "categoryXAxis";
this.columnSeries1.yAxisName = "numericYAxis";
this.columnSeries1.valueMemberPath = "USA";
Gets or sets the name to use to resolve xAxis from markup.
Gets or sets the effective y-axis for this series.
Instantiate yAxis
<IgrDataChart
dataSource={this.state.dataSource} >
<IgrCategoryXAxis name="xAxis" />
<IgrNumericYAxis name="yAxis" />
<IgrColumnSeries
name="series1"
xAxisName="xAxis"
yAxisName="yAxis"
valueMemberPath="Value" />
</IgrDataChart>
this.columnSeries1 = new IgrColumnSeries({ name: "colSeries1" });
this.columnSeries1.dataSource = this.categoryData;
this.columnSeries1.xAxis = this.categoryXAxis;
this.columnSeries1.yAxis = this.numericYAxis;
this.columnSeries1.xAxisName = "categoryXAxis";
this.columnSeries1.yAxisName = "numericYAxis";
this.columnSeries1.valueMemberPath = "USA";
Gets or sets the name to use to resolve yAxis from markup.
Gets the actual opacity applied to the area fill visual.
let actualFillOpacity: number = series.actualAreaFillOpacity;