Optional
actualOptional
actualResolved method of pixel scaling to use during end user interaction with the chart.
let actualInteractionPixelScalingRatio: number = this.chart.actualInteractionPixelScalingRatio;
Optional
actualGets the resolved pixel scaling ratio.
A higher scaling ratio will produce crisper visuals at the expense of memory. Lower values will cause the control to appear blurry
let actualPixelScalingRatio: number = this.chart.actualPixelScalingRatio;
Optional
actualGets the actual resolved bottom plot area margin;
Optional
actualGets the actual resolved left plot area margin;
Optional
actualGets the actual resolved right plot area margin;
Optional
actualGets the actual resolved top plot area margin;
Optional
actualA number between 0 and 1 determining the position of the horizontal scroll. This property is effectively a shortcut to the Left of the ActualWindowRect property.
let actualWindowPositionHorizontal: number = this.chart.actualWindowPositionHorizontal;
Optional
actualA number between 0 and 1 determining the position of the vertical scroll. This property is effectively a shortcut to the Top of the ActualWindowRect property.
let actualWindowPositionVertical: number = this.chart.actualWindowPositionVertical;
``
Optional
actualGets the actual value of the window rectangle, which represents the current zoom level.
Optional
actualRaised when the actual window rectangle of the SeriesViewer changes.
Optional
actualGets the actual minimum height that the window rect is allowed to reach before being clamped.
Optional
actualGets the actual minimum width that the window rect is allowed to reach before being clamped.
Optional
actualA number between 0 and 1 determining the scale of the horizontal zoom. This property is effectively a shortcut to the Width of the ActualWindowRect property.
Optional
actualA number between 0 and 1 determining the scale of the vertical zoom. This property is effectively a shortcut to the Height of the ActualWindowRect property.
Optional
alignsGets or sets a value indicating whether grid and tick lines are aligned to device pixels.
Optional
animateGets or sets whether the series animations should be allowed when a range change has been detected on an axis.
AnimateSeriesWhenAxisRangeChanges
is a Boolean property to override the default behavior in which series do not animate if an axis range changes.
this.chart.animateSeriesWhenAxisRangeChanges = true;
<IgrDataChart
dataSource={this.state.dataSource}
animateSeriesWhenAxisRangeChanges={true}>
<IgrNumericXAxis name="xAxis" />
<IgrNumericYAxis name="yAxis" />
<IgrColumnSeries
name="series1"
xAxisName="xAxis"
yAxisName="yAxis"
valueMemberPath="Value" />
</IgrDataChart>
Optional
autoGets or sets the extra amount the series viewer should auto expand margins to accomodate the initial horizontal axis labels.
Optional
autoGets or sets the maximum amount the series viewer should auto expand margins to accomodate the initial horizontal axis labels.
Optional
autoGets or sets a whether the series viewer should consider auto rotating labels to fit them in the initial view. This implies that ShouldAutoExpandMarginForInitialLabels is true.
Optional
autoSets or gets the automatic height to add when automatically adding margins to the chart.
this.chart.autoMarginHeight = 50;
<IgrDataChart
autoMarginHeight={50}
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
autoSets or gets the automatic width to add when automatically adding margins to the chart.
The autoMarginWidth
propertry is used find the automatic width to add when automatically adding margins to the chart.
this.chart.autoMarginWidth = 50;
<IgrDataChart
dataSource={this.state.dataSource}
autoMarginWidth={50} >
<IgrNumericXAxis name="xAxis" />
<IgrNumericYAxis name="yAxis" />
<IgrColumnSeries
name="series1"
xAxisName="xAxis"
yAxisName="yAxis"
valueMemberPath="Value"
brush="Gray"
outline="Black" />
</IgrDataChart>
Optional
bottomSets or gets the bottom margin to use around the chart content.
The bottomMargin
property is used to gets/set the bottom margin around the chart content in the canvas.
this.chart.bottomMargin = 50;
<IgrDataChart
dataSource={this.state.dataSource}
bottomMargin={50} >
<IgrNumericXAxis name="xAxis" />
<IgrNumericYAxis name="yAxis" />
<IgrColumnSeries
name="series1"
xAxisName="xAxis"
yAxisName="yAxis"
valueMemberPath="Value"
brush="Gray"
outline="Black" />
</IgrDataChart>
Optional
brushesGets or sets the palette of brushes used for fill of plotted series. These brushes are automatically assigned to series based on the index of series.
Optional
chartText to display above the plot area.
The Title
property is used to set the title to display for the component.
this.chart.title="Items Sold";
<IgrDataChart
dataSource={this.state.dataSource}
title="Items Sold" >
<IgrNumericXAxis name="xAxis" />
<IgrNumericYAxis name="yAxis" />
<IgrLineSeries
name="series1"
xAxisName="xAxis"
yAxisName="yAxis"
valueMemberPath="Value" />
</IgrDataChart>
Optional
childrenOptional
computedGets or sets mode to use for automatically calculating the plot area margin.
Optional
contentDetermines the method of hit testing used when mousing over elements in the chart.
this.chart.contentHitTestMode = ChartHitTestMode.Computational;
Optional
crosshairGets or sets the cross hair point (in world coordinates) Either or both of the crosshair point's X and Y may be set to double.NaN, in which case the relevant crosshair line is hidden.
The CrosshairPoint
property is used to gets/sets the cross hair point (in world coordinates).
this.chart.crosshairPoint = {x:.8,y:.2};
<IgrDataChart
dataSource={this.state.dataSource}
crosshairVisibility="visible"
crosshairPoint={x:.8,y:.2} >
<IgrNumericXAxis name="xAxis" />
<IgrNumericYAxis name="yAxis" />
<IgrAreaSeries
name="series1"
xAxisName="xAxis"
yAxisName="yAxis"
valueMemberPath="Value"
brush="Gray"
outline="Black" />
</IgrDataChart>
Optional
crosshairGets or sets the current SeriesViewer's crosshair visibility override.
The CrosshairVisibility
property is used to gets or sets the current Chart's crosshair visibility override. Note: setting this property does not affect the mobile browser version of the chart.
this.chart.crosshairVisibility = Visibility.Visible;
<IgrDataChart
dataSource={this.state.dataSource}
crosshairVisibility="visible"
crosshairPoint={x:.8,y:.2} >
<IgrNumericXAxis name="xAxis" />
<IgrNumericYAxis name="yAxis" />
<IgrAreaSeries
name="series1"
xAxisName="xAxis"
yAxisName="yAxis"
valueMemberPath="Value"
brush="Gray"
outline="Black" />
</IgrDataChart>
Optional
dataGets or sets the data for the chart to use. This can be overriden at the series and axis level.
Optional
defaultGets or sets the DefaultAxisMajorStroke property. The DefaultAxisMajorStroke property defines the brush which is used by the axes when no Axis.MajorStroke is set.
Optional
defaultGets or sets the DefaultAxisMinorStroke property. The DefaultAxisMinorStroke property defines the brush which is used by the axes when no Axis.MinorStroke is set.
Optional
defaultGets or sets the DefaultAxisStroke property. The DefaultAxisStroke property defines the brush which is used by the axes when no Axis.Stroke is set.
Optional
defaultGets or sets the DefaultInteraction property. The default interaction state defines the SeriesViewer's response to mouse events.
The default interaction state defines the chart's response to mouse events.
this.chart.defaultInteraction = InteractionState.DragPan;
<IgrDataChart
dataSource={this.state.dataSource}
defaultInteraction="dragPan" >
<IgrNumericXAxis name="xAxis" />
<IgrNumericYAxis name="yAxis" />
<IgrAreaSeries
name="series1"
xAxisName="xAxis"
yAxisName="yAxis"
valueMemberPath="Value"
brush="Gray"
outline="Black" />
</IgrDataChart>
Optional
dragGets or sets the current SeriesViewer's DragModifier property.
DragModifier
is useful to enable zooming when zooming is not the default interaction.
this.chart.dragModifier = ModifierKeys.Alt;
<IgrDataChart
dataSource={this.state.dataSource}
isHorizontalZoomEnabled=true
defaultInteraction="dragPan"
dragModifier="alt" >
<IgrNumericXAxis name="xAxis" />
<IgrNumericYAxis name="yAxis" />
<IgrLineSeries
name="series1"
xAxisName="xAxis"
yAxisName="yAxis"
valueMemberPath="Value" />
</IgrDataChart>
Optional
effectiveGets the EffectiveViewport rectangle, representing the effective viewport area after margins have been subtracted.
``ts let viewport: IgxRect = this.chart.effectiveViewport;
Optional
focusGets or sets the Focus brush to use for the series.
Optional
focusGets or sets the focus mode to use for the series in the component, when supported.
Optional
focusGets or sets the duration the Focus/de-Focus effects.
Optional
focusedGets the currently focused data items. Adding or removing data items from this collection will focus or blur the visuals associated with those items.
Optional
focusedRaised when the SelectedItems collection has changed.
Optional
gridOccurs just after the current SeriesViewer's grid area rectangle is changed. The grid area may change as the result of the SeriesViewer being resized, or of an axis being added or changing size, possibly in another SeriesViewer.
Optional
gridGets or sets how grid lines are rendered in relation to series.
Try setting the GridMode
property to bring your grid lines in front of the data series.
Optional
heightOptional
highlightedOptional
highlightedGets or sets whether and how to display highlighted values for the series by default. Note, this is distinct from the highlighting feature that indicates what is closest or under the mouse.
Optional
highlightingGets or sets the highlighting Behavior to use for the series in the component, when supported. This takes precedence over the series level IsHighlightingEnabled.
Optional
highlightingGets or sets the highlighting mode to use for the series in the component, when supported. This takes precedence over the series level IsHighlightingEnabled.
Optional
highlightingGets or sets the duration the highlighting/de-highlighting effects.
The HighlightingTransitionDuration
property is used to set the time for highlighting transition in milliseconds .
chart.HighlightingTransitionDuration=500;
<IgrDataChart
dataSource={this.state.dataSource}
HighlightingTransitionDuration={500} >
<IgrNumericXAxis name="xAxis" />
<IgrNumericYAxis name="yAxis" />
<IgrAreaSeries
name="series1"
xAxisName="xAxis"
yAxisName="yAxis"
valueMemberPath="Value"
brush="Gray"
outline="Black" />
</IgrDataChart>
Optional
horizontalGets or sets the current SeriesViewer's crosshair horizontal brush override.
Optional
horizontalGets or sets the corner radius to use for the horizontal scrollbar in the component, when enabled.
Optional
horizontalGets or sets the fill to use for the horizontal scrollbar in the component, when enabled.
Optional
horizontalGets or sets the height to use for the horizontal scrollbar in the component, when enabled.
Optional
horizontalGets or sets the inset distance to use for the horizontal scrollbar in the component, when enabled.
Optional
horizontalGets or sets the max opacity to use for the horizontal scrollbar in the component, when enabled.
Optional
horizontalGets or sets the horizontal scrollbar mode to use for the series viewer.
Optional
horizontalGets or sets the outline to use for the horizontal scrollbar in the component, when enabled.
Optional
horizontalGets or sets the position to use for the horizontal scrollbar in the component, when enabled.
Optional
horizontalGets or sets whether to use automatic track insets for the horizontal scrollbar in the component, when enabled.
Optional
horizontalGets or sets the stroke thickness to use for the horizontal scrollbar in the component, when enabled.
Optional
horizontalGets or sets the track end inset to use for the horizontal scrollbar in the component, when enabled.
Optional
horizontalGets or sets the track start inset to use for the horizontal scrollbar in the component, when enabled.
Optional
imageEvent raised when an image of the component is saved
Optional
interactionGets or sets the InteractionOverride property. The interaction override overrides the default interaction and modifiers keys and defines the SeriesViewer's response to mouse events.
Optional
interactionMethod of pixel scaling to use during end user interaction with the chart.
Optional
isGets or sets the IsAntiAliasingEnabledDuringInteraction property.
Optional
isGets or sets horizontal zoomability of the current control
Set IsHorizontalZoomEnabled
to enable or disable horizontal zooming.
this.chart.IsHorizontalZoomEnabled= true;
<IgrDataChart
IsHorizontalZoomEnabled="True"
dataSource={this.state.dataSource} >
<IgrCategoryXAxis name="xAxis" />
<IgrNumericYAxis name="yAxis" />
<IgrColumnSeries
name="series1"
xAxisName="xAxis"
yAxisName="yAxis"
valueMemberPath="Value" />
</IgrDataChart>
Optional
isGets or sets the whether the series viewer can allow the page to pan if a control pan is not possible in the requested direction.
Optional
isGets or sets whether to use a square aspect ratio for the chart. This is locked to true for polar and radial charts.
Set IsSquare
to true to constrain the chart to a square, using the minimum of its height and width.
this.chart.isSquare="True";
<IgrDataChart
IsHorizontalZoomEnabled="True"
dataSource={this.state.dataSource} >
<IgrCategoryXAxis name="xAxis" />
<IgrNumericYAxis name="yAxis" />
<IgrColumnSeries
name="series1"
xAxisName="xAxis"
yAxisName="yAxis"
valueMemberPath="Value" />
</IgrDataChart>
Optional
isGets or sets whether all surface interactions with the plot area should be disabled.
The IsSurfaceInteractionDisabled
property is used to enable/disable interactions with the plot surface.
chart.isSurfaceInteractionDisabled=true;
<IgrDataChart
dataSource={this.state.dataSource}
isSurfaceInteractionDisabled={true} >
<IgrNumericXAxis name="xAxis" />
<IgrNumericYAxis name="yAxis" />
<IgrAreaSeries
name="series1"
xAxisName="xAxis"
yAxisName="yAxis"
valueMemberPath="Value"
brush="Gray"
outline="Black" />
</IgrDataChart>
Optional
isGets or sets vertical zoomability of the current control
Set IsVerticalZoomEnabled
to enable or disable vertical zooming.
this.chart.isVerticalZoomEnabled="True";
<IgrDataChart
IsVerticalZoomEnabled="True"
dataSource={this.state.dataSource} >
<IgrCategoryXAxis name="xAxis" />
<IgrNumericYAxis name="yAxis" />
<IgrColumnSeries
name="series1"
xAxisName="xAxis"
yAxisName="yAxis"
valueMemberPath="Value" />
</IgrDataChart>
Optional
isGets or sets whether to sync the vertical aspect of the window with the contained series content. This is only supported for a subset of the available series.
Optional
leftSets or gets the left margin to use around the chart content.
The LeftMargin
property is used to set the left margin.
this.chart.leftMargin = 20;
<IgrDataChart
dataSource={this.state.dataSource}
leftMargin={20} >
<IgrNumericXAxis name="xAxis" />
<IgrNumericYAxis name="yAxis" />
<IgrLineSeries
name="series1"
xAxisName="xAxis"
yAxisName="yAxis"
valueMemberPath="Value"
/>
</IgrDataChart>
Optional
legendOptional
legendGets or sets the highlighting mode to use for the legend linked to the component, when supported.
Optional
legendGets or sets the mode of legend badges representing all series in this chart. This property will be ignored when the LegendItemTemplate or LegendItemBadgeTemplate property is set on a series
Optional
legendGets or sets type of legend badges representing all series displayed in a legend linked to this component This property will be ignored when the LegendItemTemplate or LegendItemBadgeTemplate property is set on a series
Optional
markerGets or sets the marker mode used for assigning a marker type to series when the marker type is automatic.
Optional
markerGets or sets the palette of brushes used for fill of marker series. These brushes are automatically assigned to markers based on the index of series.
Optional
markerGets or sets the palette of brushes used for outlines of plotted markers. These outlines are automatically assigned to markers based on the index of series.
Optional
outlinesGets or sets the palette of brushes used for outlines of plotted series. These outlines are automatically assigned to series based on the index of series.
Optional
panGets or sets the current SeriesViewer's PanModifier property.
PanModifier
is useful to enable panning when panning is not the default interaction.
this.chart.panModifier = ModifierKeys.Alt;
<IgrDataChart
dataSource={this.state.dataSource}
isHorizontalZoomEnabled=true
defaultInteraction="dragZoom"
panModifier="alt" >
<IgrNumericXAxis name="xAxis" />
<IgrNumericYAxis name="yAxis" />
<IgrLineSeries
name="series1"
xAxisName="xAxis"
yAxisName="yAxis"
valueMemberPath="Value" />
</IgrDataChart>
Optional
pixelGets or sets the scaling value used to affect the pixel density of the control. A higher scaling ratio will produce crisper visuals at the expense of memory. Lower values will cause the control to appear blurry.
Optional
plotGets or sets the brush used as the background for the current SeriesViewer object's plot area.
PlotAreaBackground
property set the background brush to the current Chart object's plot area.
this.chart.plotAreaBackground="#F0F8FF";
<IgrDataChart
dataSource={this.state.dataSource}
plotAreaBackground="#F0F8FF" >
<IgrNumericXAxis name="xAxis" />
<IgrNumericYAxis name="yAxis" />
<IgrLineSeries
name="series1"
xAxisName="xAxis"
yAxisName="yAxis"
valueMemberPath="Value" />
</IgrDataChart>
Optional
plotOccurs when the left mouse button is clicked while the mouse pointer is over the plot area.
Optional
plotMargin applied below the plot area.
Optional
plotMargin applied to the left of the plot area.
Optional
plotMargin applied to the right of the plot area.
Optional
plotMargin applied above the plot area.
Optional
plotOccurs when the pointer enters the plot area.
Optional
plotOccurs when the pointer exits the plot area.
Optional
plotOccurs when the left mouse button is pressed while the mouse pointer is over the plot area.
Optional
plotOccurs when the left mouse button is pressed while the mouse pointer is over the plot area.
Optional
plotOccurs when the pointer if over the plot area.
Optional
preferGets or sets whether the series viewer should prefer selecting higher resolution tiles over lower resolution tiles when performing tile zooming. Setting this to true will lower performance but increase quality.
Optional
previewGets or sets the preview rectangle. The preview rectangle may be set to Rect.Empty, in which case the visible preview strokePath is hidden.
PreviewRect
can be used to highlight an area of importance.
this.chart.previewRect = {left:0,top:0,height:.5,width:.5};
Optional
refreshRaised when the SeriesViewer's processing for an update has completed.
Optional
rightGets or sets the RightButtonDefaultInteraction property. The default interaction state defines the SeriesViewer's response to right button mouse events.
Optional
rightSets or gets the right margin to use around the chart content.
The RightMargin
property is used to set the left margin around the chart content in the canvas.
this.chart.rightMargin=20;
<IgrDataChart
dataSource={this.state.dataSource}
leftMargin= {20}
rightMargin={20}
topMargin={30}
bottomMargin={20} >
<IgrNumericXAxis name="xAxis" />
<IgrNumericYAxis name="yAxis" />
<IgrLineSeries
name="series1"
xAxisName="xAxis"
yAxisName="yAxis"
valueMemberPath="Value" />
</IgrDataChart>
Optional
scrollbarsGets or sets the duration of the scrollbar effects.
Optional
selectedGets the currently selected data items. Adding or removing data items from this collection will select or deselect the visuals associated with those items.
Optional
selectedRaised when the SelectedItems collection has changed.
Optional
selectionGets or sets the selection behavior to use for the series in the component, when supported.
Optional
selectionGets or sets the selection brush to use for the series.
Optional
selectionGets or sets the selection mode to use for the series in the component, when supported.
Optional
selectionGets or sets the current SeriesViewer's SelectionModifier property.
Optional
selectionGets or sets the duration the selection/de-Selection effects.
Optional
seriesOccurs when the left mouse button is released while the mouse pointer is over a Series.
Optional
seriesOccurs when the cursors are moved over a series in this SeriesViewer.
Optional
seriesOccurs when the mouse pointer enters a Series.
The SeriesMouseEnter
event occurs when the left mouse pointer enters an element of this chart.
<-- position: content member-->
public onSeriesMouseEnter(event: {sender: any, args: ChartMouseEventArgs})
{
var item = event.args.item;
}
<IgrDataChart
dataSource={this.state.dataSource}
seriesMouseEnter={this.onSeriesMouseEnter}>
<IgrNumericXAxis name="xAxis" />
<IgrNumericYAxis name="yAxis" />
<IgrLineSeries
name="series1"
xAxisName="xAxis"
yAxisName="yAxis"
valueMemberPath="Value" />
</IgrDataChart>
Optional
seriesOccurs when the mouse pointer leaves a Series.
The SeriesMouseLeave
event occurs when the left mouse pointer leaves an element of this chart.
public onSeriesMouseLeave(event: {sender: any, args: ChartMouseEventArgs})
{
var item = event.args.item;
}
<IgrDataChart
dataSource={this.state.dataSource}
seriesMouseLeave ={this.onSeriesMouseLeave}>
<IgrNumericXAxis name="xAxis" />
<IgrNumericYAxis name="yAxis" />
<IgrLineSeries
name="series1"
xAxisName="xAxis"
yAxisName="yAxis"
valueMemberPath="Value" />
</IgrDataChart>
Optional
seriesOccurs when the left mouse button is pressed while the mouse pointer is over a Series.
The SeriesMouseLeftButtonDown
event occurs when the left mouse button is pressed while the mouse pointer is over an element of this chart.
<-- position: content member-->
public onSeriesMouseLeftButtonDown(event: {sender: any, args: DataChartMouseButtonEventArgs})
{
var item = event.args.item;
}
<IgrDataChart
dataSource={this.state.dataSource}
seriesMouseLeftButtonDown= {this.onSeriesMouseLeftButtonDown}>
<IgrNumericXAxis name="xAxis" />
<IgrNumericYAxis name="yAxis" />
<IgrLineSeries
name="series1"
xAxisName="xAxis"
yAxisName="yAxis"
valueMemberPath="Value" />
</IgrDataChart>
Optional
seriesOccurs when the left mouse button is released while the mouse pointer is over a Series.
The SeriesMouseLeftButtonUp
event occurs when the left mouse button is released while the mouse pointer is over an element of this chart.
<-- position: content member-->
<-- position: content member-->
public onSeriesMouseLeftButtonUp(event: {sender: any, args: DataChartMouseButtonEventArgs})
{
var item = event.args.item;
}
<IgrDataChart
dataSource={this.state.dataSource}
seriesMouseLeftButtonUp ={this.onSeriesMouseLeftButtonUp}>
<IgrNumericXAxis name="xAxis" />
<IgrNumericYAxis name="yAxis" />
<IgrLineSeries
name="series1"
xAxisName="xAxis"
yAxisName="yAxis"
valueMemberPath="Value" />
</IgrDataChart>
public onSeriesMouseLeftButtonUp =(event: any, args: DataChartMouseButtonEventArgs )
{
}
Optional
seriesOccurs when the mouse pointer moves while over a Series.
The SeriesMouseMove
event occurs when the left mouse pointer moves while over an element of this chart.
<-- position: content member-->
<-- position: content member-->
public onSeriesMouseMove(event: {sender: any, args: ChartMouseEventArgs})
{
var item = event.args.item;
}
<IgrDataChart
dataSource={this.state.dataSource}
seriesMouseMove={this.onSeriesMouseMove} >
<IgrNumericXAxis name="xAxis" />
<IgrNumericYAxis name="yAxis" />
<IgrLineSeries
name="series1"
xAxisName="xAxis"
yAxisName="yAxis"
valueMemberPath="Value" />
</IgrDataChart>
public onSeriesMouseMove =( event: any, args: ChartMouseEventArgs) => {
}
Optional
seriesGets or sets horizontal mode to use for automatically calculating the plot area margin based ont the series.
Optional
seriesGets or sets vertical mode to use for automatically calculating the plot area margin based ont the series.
Optional
seriesGets or sets whether the series animations should be allowed when a range change has been detected on an axis.
Optional
shouldGets or sets a whether the series viewer should auto expand margins to accomodate the initial horizontal axis labels.
Optional
shouldGets or sets a whether the series viewer should consider auto rotating labels to fit them in the initial view. This implies that ShouldAutoExpandMarginForInitialLabels is true.
Optional
shouldGets or sets a whether the chart should pan its content when zooming in passed max zoom level.
Optional
shouldGets or sets whether calling SimulateHover should shift the crosshair point.
Optional
shouldGets or sets a whether the series viewer should suppress truncation of axis labels.
Optional
sizeOccurs after the size of the series viewer changes.
<-- position: content member-->
<-- position: content member-->
<IgrDataChart
dataSource={this.state.dataSource}
sizeChanged={this.onSizeChanged=} >
<IgrNumericXAxis name="xAxis" />
<IgrNumericYAxis name="yAxis" />
<IgrLineSeries
name="series1"
xAxisName="xAxis"
yAxisName="yAxis"
valueMemberPath="Value" />
</IgrDataChart>
public onSizeChanged =(event: any, args: RectChangedEventArgs}){
}
Optional
subtitleGets or sets the Subtitle property. The Title property defines the Subtitle of the chart
The Subtitle
property is used to display subtitle for the component.
this.chart.subtitle="Date of Sale: 1/1/2018";
<IgrDataChart
dataSource={this.state.dataSource}
subtitle="Date of Sale: 1/1/2018" >
<IgrNumericXAxis name="xAxis" />
<IgrNumericYAxis name="yAxis" />
<IgrLineSeries
name="series1"
xAxisName="xAxis"
yAxisName="yAxis"
valueMemberPath="Value" />
</IgrDataChart>
Optional
subtitleMargin applied below the subtitle.
The subtitleBottomMargin
property is used to set the bottom margin for the subtitle.
this.chart.subtitleBottomMargin = 20;
<IgrDataChart
dataSource={this.state.dataSource}
subtitleBottomMargin={20} >
<IgrNumericXAxis name="xAxis" />
<IgrNumericYAxis name="yAxis" />
<IgrLineSeries
name="series1"
xAxisName="xAxis"
yAxisName="yAxis"
valueMemberPath="Value" />
</IgrDataChart>
Optional
subtitleGets or sets the SubtitleHorizontalAlignment property.
The subtitleBottomMargin
property is used to set the horizontal alignment for the subtitle.
this.chart.subtitleHorizontalAlignment="left";
<IgrDataChart
dataSource={this.state.dataSource}
subtitleHorizontalAlignment="left" >
<IgrNumericXAxis name="xAxis" />
<IgrNumericYAxis name="yAxis" />
<IgrLineSeries
name="series1"
xAxisName="xAxis"
yAxisName="yAxis"
valueMemberPath="Value" />
</IgrDataChart>
Optional
subtitleMargin applied to the left of the subtitle.
The subtitleLeftMarging
property is used to set the left margin for the subtitle.
this.chart.subtitleLeftMarging=10;
<IgrDataChart
dataSource={this.state.dataSource}
subtitleLeftMarging= {10}
subtitleTopMargin={10}
subtitleRightMargin={10}
subtitleBottomMargin={20}>
<IgrNumericXAxis name="xAxis" />
<IgrNumericYAxis name="yAxis" />
<IgrLineSeries
name="series1"
xAxisName="xAxis"
yAxisName="yAxis"
valueMemberPath="Value" />
</IgrDataChart>
Optional
subtitleMargin applied to the right of the subtitle.
The subTitleRightMargin
property is used to set the right margin for the subtitle.
this.chart.subtitleLeftMarging=10;
<IgrDataChart
dataSource={this.state.dataSource}
subtitleLeftMarging= {10}
subtitleTopMargin= {10}
subtitleRightMargin={10}
subtitleBottomMargin={20} >
<IgrNumericXAxis name="xAxis" />
<IgrNumericYAxis name="yAxis" />
<IgrLineSeries
name="series1"
xAxisName="xAxis"
yAxisName="yAxis"
valueMemberPath="Value" />
</IgrDataChart>
Optional
subtitleGets or sets the Color used for the Subtitle Text.
The subtitleTextColor
property is used to set the color for the subtitle.
this.chart.subtitleTextColor="blue";
<IgrDataChart
dataSource={this.state.dataSource}
title="Date of Sale: 1/1/2018"
subtitleTextColor="blue">
<IgrNumericXAxis name="xAxis" />
<IgrNumericYAxis name="yAxis" />
<IgrLineSeries
name="series1"
xAxisName="xAxis"
yAxisName="yAxis"
valueMemberPath="Value" />
</IgrDataChart>
Optional
subtitleFont settings for the subtitle.
Optional
subtitleMargin applied above the subtitle.
The subtitleTopMargin
property is used to set the top margin for the subtitle.
this.chart.subtitleTopMargin =10;
<IgrDataChart
dataSource={this.state.dataSource}
subtitleLeftMarging= {10}
subtitleTopMargin={10}
subtitleRightMargin={10}
subtitleBottomMargin={20}>
<IgrNumericXAxis name="xAxis" />
<IgrNumericYAxis name="yAxis" />
<IgrLineSeries
name="series1"
xAxisName="xAxis"
yAxisName="yAxis"
valueMemberPath="Value" />
</IgrDataChart>
Optional
suppressGets or sets a whether the series viewer should suppress auto recalculating margin and axis label angles.
Optional
titleMargin applied below the title.
The titleBottomMargin
property is used to set the bottom margin for the title.
this.chart.titleBottomMargin=20;
<IgrDataChart
dataSource={this.state.dataSource}
title="Items Sold"
titleLeftMarging= {10}
titleTopMargin= {10 }
titleRightMargin= {10}
titleBottomMargin= {20}>
<IgrNumericXAxis name="xAxis" />
<IgrNumericYAxis name="yAxis" />
<IgrLineSeries
name="series1"
xAxisName="xAxis"
yAxisName="yAxis"
valueMemberPath="Value" />
</IgrDataChart>
Optional
titleGets or sets the TitleHorizontalAlignment property.
The subtitleHorizontalAlignment
property is used to set horizontal alignment for the subtitle.
this.chart.titleHorizontalAlignment="left";
<IgrDataChart
dataSource={this.state.dataSource}
titleHorizontalAlignment="left"
subtitleHorizontalAlignment="left" >
<IgrNumericXAxis name="xAxis" />
<IgrNumericYAxis name="yAxis" />
<IgrLineSeries
name="series1"
xAxisName="xAxis"
yAxisName="yAxis"
valueMemberPath="Value" />
</IgrDataChart>
Optional
titleMargin applied to the left of the title.
The titleLeftMarging
property is used to set the left margin for the title.
this.chart.titleLeftMarging=10;
<IgrDataChart
dataSource={this.state.dataSource}
title="Items Sold"
titleLeftMarging={10}
titleTopMargin={10}
titleRightMargin={10}
titleBottomMargin= {20} >
<IgrNumericXAxis name="xAxis" />
<IgrNumericYAxis name="yAxis" />
<IgrLineSeries
name="series1"
xAxisName="xAxis"
yAxisName="yAxis"
valueMemberPath="Value" />
</IgrDataChart>
Optional
titleMargin applied to the right of the title.
The titleRightMargin
property is used to set the right margin for the title.
this.chart.titleRightMargin=10;
<IgrDataChart
dataSource={this.state.dataSource}
titleLeftMarging= {10}
titleTopMargin= {10 }
titleRightMargin= {10}
titleBottomMargin= {20} >
<IgrNumericXAxis name="xAxis" />
<IgrNumericYAxis name="yAxis" />
<IgrLineSeries
name="series1"
xAxisName="xAxis"
yAxisName="yAxis"
valueMemberPath="Value" />
</IgrDataChart>
Optional
titleGets or sets the Color used for the Title Text.
The titleTextColor
property is used to set the title brush.
this.chart.titleTextColor="blue" ;
<IgrDataChart
dataSource={this.state.dataSource}
titleTextColor="blue" >
<IgrNumericXAxis name="xAxis" />
<IgrNumericYAxis name="yAxis" />
<IgrLineSeries
name="series1"
xAxisName="xAxis"
yAxisName="yAxis"
valueMemberPath="Value" />
</IgrDataChart>
Optional
titleFont settings for the title.
Optional
titleMargin applied above the title.
The titleTopMargin
property is used to set the top margin for the title.
this.chart.titleTopMargin=10;
<IgrDataChart
dataSource={this.state.dataSource}
titleLeftMarging= {10}
titleTopMargin= {10 }
titleRightMargin= {10}
titleBottomMargin= {20}>
<IgrNumericXAxis name="xAxis" />
<IgrNumericYAxis name="yAxis" />
<IgrLineSeries
name="series1"
xAxisName="xAxis"
yAxisName="yAxis"
valueMemberPath="Value" />
</IgrDataChart>
Optional
topSets or gets the top margin to use around the chart content.
The topMargin
property is used to set the top margin.
this.chart.topMargin=30;
<IgrDataChart
dataSource={this.state.dataSource}
leftMargin= {20}
rightMargin={20}
topMargin={30}
bottomMargin= {20} >
<IgrNumericXAxis name="xAxis" />
<IgrNumericYAxis name="yAxis" />
<IgrLineSeries
name="series1"
xAxisName="xAxis"
yAxisName="yAxis"
valueMemberPath="Value" />
</IgrDataChart>
Optional
useGets or sets whether the series viewer should use cached tiles during zooms rather than the default live content.
Optional
verticalGets or sets the current SeriesViewer's crosshair vertical brush override.
Optional
verticalGets or sets the corner radius to use for the vertical scrollbar in the component, when enabled.
Optional
verticalGets or sets the fill to use for the vertical scrollbar in the component, when enabled.
Optional
verticalGets or sets the inset distance to use for the vertical scrollbar in the component, when enabled.
Optional
verticalGets or sets the max opacity to use for the vertical scrollbar in the component, when enabled.
Optional
verticalGets or sets the vertical scrollbar mode to use for the series viewer.
Optional
verticalGets or sets the outline to use for the vertical scrollbar in the component, when enabled.
Optional
verticalGets or sets the position to use for the vertical scrollbar in the component, when enabled.
Optional
verticalGets or sets whether to use automatic track insets for the vertical scrollbar in the component, when enabled.
Optional
verticalGets or sets the stroke thickness to use for the vertical scrollbar in the component, when enabled.
Optional
verticalGets or sets the track end inset to use for the vertical scrollbar in the component, when enabled.
Optional
verticalGets or sets the track start inset to use for the vertical scrollbar in the component, when enabled.
Optional
verticalGets or sets the width to use for the vertical scrollbar in the component, when enabled.
Optional
viewerRaised when an ongoing manipulation of the series viewer is ended.
Optional
viewerRaised when an ongoing manipulation of the series viewer is started.
Optional
widthOptional
windowA number between 0 and 1 determining the position of the horizontal scroll. This property is effectively a shortcut to the X position of the WindowRect property.
this.chart.windowPositionHorizontal = .2;
Optional
windowA number between 0 and 1 determining the position of the vertical scroll. This property is effectively a shortcut to the Y position of the WindowRect property.
this.chart.windowPositionVertical = .2;
Optional
windowA rectangle representing the portion of the SeriesViewer currently in view. A rectangle at X=0, Y=0 with a Height and Width of 1 implies the entire plotting area is in view. A Height and Width of .5 would imply that the view is halfway zoomed in.
You can set the WindowRect
to zoom in on an area of interest in the chart.
this.chart.windowRect = {left:0, top:1, width: .5, height: .5};
Optional
windowOccurs just after the current SeriesViewer's window rectangle is changed.
<-- position: content member-->
<-- position: content member-->
<IgrDataChart
width="100%"
height="100%"
dataSource={this.data}
windowRectChanged={this.onWindowRectChanged} >
<IgrCategoryXAxis name="xAxis" label="Year"/>
<IgrNumericYAxis name="yAxis" minimumValue={0} />
<IgrLineSeries name="series3" title="Russia"
valueMemberPath="Russia"
xAxisName="xAxis"
yAxisName="yAxis"
markerType={this.state.markersType} />
</IgrDataChart>
public onWindowRectChanged =( s:any, e: RectChangedEventArgs) => {
}
Optional
windowSets or gets the minimum height that the window rect is allowed to reach before being clamped. Decrease this value if you want to allow for further zooming into the viewer. If this value is lowered too much it can cause graphical corruption due to floating point arithmetic inaccuracy. This property accepts values between 0.0 (max zooming) and 1.0 (no zooming)
Optional
windowSets or gets the minimum width that the window rect is allowed to reach before being clamped. Decrease this value if you want to allow for further zooming into the viewer. If this value is lowered too much it can cause graphical corruption due to floating point arithmetic inaccuracy. This property accepts values between 0.0 (max zooming) and 1.0 (no zooming)
The WindowRectMinWidth
property is used to set or get the minimum width that the window rect is allowed to reach before being clamped.
this.chart.WindowRectMinWidth=".2";
<IgrDataChart
dataSource={this.state.dataSource}
WindowRectMinWidth=".2">
<IgrNumericXAxis name="xAxis" />
<IgrNumericYAxis name="yAxis" />
<IgrLineSeries
name="series1"
xAxisName="xAxis"
yAxisName="yAxis"
valueMemberPath="Value" />
</IgrDataChart>
Optional
windowThe response to user panning and zooming: whether to update the view immediately while the user action is happening, or to defer the update to after the user action is complete. The user action will be an action such as a mouse drag which causes panning and/or zooming to occur.
The WindowResponse
property is used to set the response to user panning and zooming: whether to update the view immediately while the user action is happening, or to defer the update to after the user action is complete.
The user action will be an action such as a mouse drag which causes panning and/or zooming to occur.
this.chart.windowResponse="deferred";
<IgrDataChart
dataSource={this.state.dataSource}
windowResponse="deferred">
<IgrNumericXAxis name="xAxis" />
<IgrNumericYAxis name="yAxis" />
<IgrLineSeries
name="series1"
xAxisName="xAxis"
yAxisName="yAxis"
valueMemberPath="Value" />
</IgrDataChart>
Optional
windowA number between 0 and 1 determining the scale of the horizontal zoom. This property is effectively a shortcut to the Width of the WindowRect property.
To programmatically change the horizontal zoom level, set WindowScaleHorizontal
to a value between 0 and 1.
this.chart.windowScaleHorizontal="0.75";
<IgrDataChart
windowScaleHorizontal="0.75"
dataSource={this.state.dataSource} >
<IgrCategoryXAxis name="xAxis" />
<IgrNumericYAxis name="yAxis" />
<IgrColumnSeries
name="series1"
xAxisName="xAxis"
yAxisName="yAxis"
valueMemberPath="Value" />
</IgrDataChart>
Optional
windowA number between 0 and 1 determining the scale of the vertical zoom. This property is effectively a shortcut to the Height of the WindowRect property.
To programmatically change the vertical zoom level, set WindowScaleVertical
to a value between 0 and 1.
this.chart.windowScaleVertical="0.75";
<IgrDataChart
windowScaleVertical="0.75"
dataSource={this.state.dataSource} >
<IgrCategoryXAxis name="xAxis" />
<IgrNumericYAxis name="yAxis" />
<IgrColumnSeries
name="series1"
xAxisName="xAxis"
yAxisName="yAxis"
valueMemberPath="Value" />
</IgrDataChart>
Optional
windowSets or gets minimum pixel height that the window is allowed to reach before being clamped. Decrease this value if you want to allow for further zooming into the viewer. If this value is lowered too much it can cause graphical corruption due to floating point arithmetic inaccuracy. This property is overridden by the WindowRectMinHeight property
Optional
windowSets or gets minimum pixel width that the window is allowed to reach before being clamped. Decrease this value if you want to allow for further zooming into the viewer. If this value is lowered too much it can cause graphical corruption due to floating point arithmetic inaccuracy. This property is overridden by the WindowRectMinWidth property
Optional
zoomGets or sets zoom is constrained to within the axes. Setting this to false is a preview feature at the present time.
Optional
zoomGets or sets the maximum number of zoom tiles that the series viewer should cache while in tiled zooming mode.
Resolved method of hit testing used when the pointer is over elements in the chart.