Ignite UI for React

All
  • Public
  • Public/Protected
  • All

Interface IIgrDataChartProps

Hierarchy

Hierarchy

Properties

Properties

Optional actualContentHitTestMode

actualContentHitTestMode?: string | ChartHitTestMode

Resolved method of hit testing used when the pointer is over elements in the chart.

let actualContentHitTestMode: ChartHitTestMode  =this.chart.actualContentHitTestMode;

Optional actualInteractionPixelScalingRatio

actualInteractionPixelScalingRatio?: string | number

Resolved method of pixel scaling to use during end user interaction with the chart.

let actualInteractionPixelScalingRatio: number = this.chart.actualInteractionPixelScalingRatio;

Optional actualPixelScalingRatio

actualPixelScalingRatio?: string | number

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

actualPlotAreaMarginBottom?: string | number

Gets the actual resolved bottom plot area margin;

Optional actualPlotAreaMarginLeft

actualPlotAreaMarginLeft?: string | number

Gets the actual resolved left plot area margin;

Optional actualPlotAreaMarginRight

actualPlotAreaMarginRight?: string | number

Gets the actual resolved right plot area margin;

Optional actualPlotAreaMarginTop

actualPlotAreaMarginTop?: string | number

Gets the actual resolved top plot area margin;

Optional actualWindowPositionHorizontal

actualWindowPositionHorizontal?: string | number

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

actualWindowPositionVertical?: string | number

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

actualWindowRect?: string | IgRect

Gets the actual value of the window rectangle, which represents the current zoom level.

Optional actualWindowRectChanged

actualWindowRectChanged?: ((s, e) => void)

Type declaration

Optional actualWindowRectMinHeight

actualWindowRectMinHeight?: string | number

Gets the actual minimum height that the window rect is allowed to reach before being clamped.

Optional actualWindowRectMinWidth

actualWindowRectMinWidth?: string | number

Gets the actual minimum width that the window rect is allowed to reach before being clamped.

Optional actualWindowScaleHorizontal

actualWindowScaleHorizontal?: string | number

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

actualWindowScaleVertical?: string | number

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

alignsGridLinesToPixels?: string | boolean

Gets or sets a value indicating whether grid and tick lines are aligned to device pixels.

Optional animateSeriesWhenAxisRangeChanges

animateSeriesWhenAxisRangeChanges?: string | boolean

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

autoExpandMarginExtraPadding?: string | number

Gets or sets the extra amount the series viewer should auto expand margins to accomodate the initial horizontal axis labels.

Optional autoExpandMarginMaximumValue

autoExpandMarginMaximumValue?: string | number

Gets or sets the maximum amount the series viewer should auto expand margins to accomodate the initial horizontal axis labels.

Optional autoMarginAndAngleUpdateMode

autoMarginAndAngleUpdateMode?: string | AutoMarginsAndAngleUpdateMode

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

autoMarginHeight?: string | number

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

autoMarginWidth?: string | number

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

bottomMargin?: string | number

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

brushes?: string | string[]

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

chartTitle?: string

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

children?: ReactNode

Optional computedPlotAreaMarginMode

computedPlotAreaMarginMode?: string | ComputedPlotAreaMarginMode

Gets or sets mode to use for automatically calculating the plot area margin.

Optional contentHitTestMode

contentHitTestMode?: string | ChartHitTestMode

Determines the method of hit testing used when mousing over elements in the chart.

this.chart.contentHitTestMode = ChartHitTestMode.Computational;

Optional crosshairPoint

crosshairPoint?: string | IgPoint

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

crosshairVisibility?: string | Visibility

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

dataSource?: any[]

Gets or sets the data for the chart to use. This can be overriden at the series and axis level.

Optional defaultAxisMajorStroke

defaultAxisMajorStroke?: string

Gets or sets the DefaultAxisMajorStroke property. The DefaultAxisMajorStroke property defines the brush which is used by the axes when no Axis.MajorStroke is set.

Optional defaultAxisMinorStroke

defaultAxisMinorStroke?: string

Gets or sets the DefaultAxisMinorStroke property. The DefaultAxisMinorStroke property defines the brush which is used by the axes when no Axis.MinorStroke is set.

Optional defaultAxisStroke

defaultAxisStroke?: string

Gets or sets the DefaultAxisStroke property. The DefaultAxisStroke property defines the brush which is used by the axes when no Axis.Stroke is set.

Optional defaultInteraction

defaultInteraction?: string | InteractionState

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

dragModifier?: string | ModifierKeys

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

effectiveViewport?: string | IgRect

Gets the EffectiveViewport rectangle, representing the effective viewport area after margins have been subtracted.

``ts let viewport: IgxRect = this.chart.effectiveViewport;

Optional focusBrush

focusBrush?: string

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

Optional focusMode

focusMode?: string | SeriesSelectionMode

Gets or sets the focus mode to use for the series in the component, when supported.

Optional focusTransitionDuration

focusTransitionDuration?: string | number

Gets or sets the duration the Focus/de-Focus effects.

Optional focusedSeriesItems

focusedSeriesItems?: string | IgrChartSelectedItemCollection

Gets the currently focused data items. Adding or removing data items from this collection will focus or blur the visuals associated with those items.

Optional focusedSeriesItemsChanged

focusedSeriesItemsChanged?: ((s, e) => void)

Type declaration

Optional gridAreaRectChanged

gridAreaRectChanged?: ((s, e) => void)

Type declaration

    • (s, e): void

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

      Parameters

      Returns void

Optional gridMode

gridMode?: string | GridMode

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

height?: string

Optional highlightedDataSource

highlightedDataSource?: any[]

Optional highlightedValuesDisplayMode

highlightedValuesDisplayMode?: string | SeriesHighlightedValuesDisplayMode

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

highlightingBehavior?: string | SeriesHighlightingBehavior

Gets or sets the highlighting Behavior to use for the series in the component, when supported. This takes precedence over the series level IsHighlightingEnabled.

Optional highlightingMode

highlightingMode?: string | SeriesHighlightingMode

Gets or sets the highlighting mode to use for the series in the component, when supported. This takes precedence over the series level IsHighlightingEnabled.

Optional highlightingTransitionDuration

highlightingTransitionDuration?: string | number

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

horizontalCrosshairBrush?: string

Gets or sets the current SeriesViewer's crosshair horizontal brush override.

Optional horizontalViewScrollbarCornerRadius

horizontalViewScrollbarCornerRadius?: string | number

Gets or sets the corner radius to use for the horizontal scrollbar in the component, when enabled.

Optional horizontalViewScrollbarFill

horizontalViewScrollbarFill?: string

Gets or sets the fill to use for the horizontal scrollbar in the component, when enabled.

Optional horizontalViewScrollbarHeight

horizontalViewScrollbarHeight?: string | number

Gets or sets the height to use for the horizontal scrollbar in the component, when enabled.

Optional horizontalViewScrollbarInset

horizontalViewScrollbarInset?: string | number

Gets or sets the inset distance to use for the horizontal scrollbar in the component, when enabled.

Optional horizontalViewScrollbarMaxOpacity

horizontalViewScrollbarMaxOpacity?: string | number

Gets or sets the max opacity to use for the horizontal scrollbar in the component, when enabled.

Optional horizontalViewScrollbarMode

horizontalViewScrollbarMode?: string | SeriesViewerScrollbarMode

Gets or sets the horizontal scrollbar mode to use for the series viewer.

Optional horizontalViewScrollbarOutline

horizontalViewScrollbarOutline?: string

Gets or sets the outline to use for the horizontal scrollbar in the component, when enabled.

Optional horizontalViewScrollbarPosition

horizontalViewScrollbarPosition?: string | SeriesViewerHorizontalScrollbarPosition

Gets or sets the position to use for the horizontal scrollbar in the component, when enabled.

Optional horizontalViewScrollbarShouldAddAutoTrackInsets

horizontalViewScrollbarShouldAddAutoTrackInsets?: string | boolean

Gets or sets whether to use automatic track insets for the horizontal scrollbar in the component, when enabled.

Optional horizontalViewScrollbarStrokeThickness

horizontalViewScrollbarStrokeThickness?: string | number

Gets or sets the stroke thickness to use for the horizontal scrollbar in the component, when enabled.

Optional horizontalViewScrollbarTrackEndInset

horizontalViewScrollbarTrackEndInset?: string | number

Gets or sets the track end inset to use for the horizontal scrollbar in the component, when enabled.

Optional horizontalViewScrollbarTrackStartInset

horizontalViewScrollbarTrackStartInset?: string | number

Gets or sets the track start inset to use for the horizontal scrollbar in the component, when enabled.

Optional imageCaptured

imageCaptured?: ((s, e) => void)

Type declaration

Optional interactionPixelScalingRatio

interactionPixelScalingRatio?: string | number

Method of pixel scaling to use during end user interaction with the chart.

Optional isAntiAliasingEnabledDuringInteraction

isAntiAliasingEnabledDuringInteraction?: string | boolean

Gets or sets the IsAntiAliasingEnabledDuringInteraction property.

Optional isHorizontalZoomEnabled

isHorizontalZoomEnabled?: string | boolean

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

isPagePanningAllowed?: string | boolean

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

isSquare?: string | boolean

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

isSurfaceInteractionDisabled?: string | boolean

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

isVerticalZoomEnabled?: string | boolean

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

isWindowSyncedToVisibleRange?: string | boolean

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

leftMargin?: string | number

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

legend?: any

Optional legendHighlightingMode

legendHighlightingMode?: string | LegendHighlightingMode

Gets or sets the highlighting mode to use for the legend linked to the component, when supported.

Optional legendItemBadgeMode

legendItemBadgeMode?: string | LegendItemBadgeMode

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

legendItemBadgeShape?: string | LegendItemBadgeShape

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

markerAutomaticBehavior?: string | MarkerAutomaticBehavior

Gets or sets the marker mode used for assigning a marker type to series when the marker type is automatic.

Optional markerBrushes

markerBrushes?: string | string[]

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

markerOutlines?: string | string[]

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

outlines?: string | string[]

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

panModifier?: string | ModifierKeys

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

pixelScalingRatio?: string | number

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

plotAreaBackground?: string

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

plotAreaClicked?: ((s, e) => void)

Type declaration

Optional plotAreaMarginBottom

plotAreaMarginBottom?: string | number

Margin applied below the plot area.

Optional plotAreaMarginLeft

plotAreaMarginLeft?: string | number

Margin applied to the left of the plot area.

Optional plotAreaMarginRight

plotAreaMarginRight?: string | number

Margin applied to the right of the plot area.

Optional plotAreaMarginTop

plotAreaMarginTop?: string | number

Margin applied above the plot area.

Optional plotAreaMouseEnter

plotAreaMouseEnter?: ((s, e) => void)

Type declaration

Optional plotAreaMouseLeave

plotAreaMouseLeave?: ((s, e) => void)

Type declaration

Optional plotAreaMouseLeftButtonDown

plotAreaMouseLeftButtonDown?: ((s, e) => void)

Type declaration

Optional plotAreaMouseLeftButtonUp

plotAreaMouseLeftButtonUp?: ((s, e) => void)

Type declaration

Optional plotAreaMouseOver

plotAreaMouseOver?: ((s, e) => void)

Type declaration

Optional preferHigherResolutionTiles

preferHigherResolutionTiles?: string | boolean

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

previewRect?: string | IgRect

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

refreshCompleted?: ((s, e) => void)

Type declaration

Optional rightButtonDefaultInteraction

rightButtonDefaultInteraction?: string | InteractionState

Gets or sets the RightButtonDefaultInteraction property. The default interaction state defines the SeriesViewer's response to right button mouse events.

Optional rightMargin

rightMargin?: string | number

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

scrollbarsAnimationDuration?: string | number

Gets or sets the duration of the scrollbar effects.

Optional selectedSeriesItems

selectedSeriesItems?: string | IgrChartSelectedItemCollection

Gets the currently selected data items. Adding or removing data items from this collection will select or deselect the visuals associated with those items.

Optional selectedSeriesItemsChanged

selectedSeriesItemsChanged?: ((s, e) => void)

Type declaration

Optional selectionBehavior

selectionBehavior?: string | SeriesSelectionBehavior

Gets or sets the selection behavior to use for the series in the component, when supported.

Optional selectionBrush

selectionBrush?: string

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

Optional selectionMode

selectionMode?: string | SeriesSelectionMode

Gets or sets the selection mode to use for the series in the component, when supported.

Optional selectionTransitionDuration

selectionTransitionDuration?: string | number

Gets or sets the duration the selection/de-Selection effects.

Optional seriesClick

seriesClick?: ((s, e) => void)

Type declaration

Optional seriesCursorMouseMove

seriesCursorMouseMove?: ((s, e) => void)

Type declaration

Optional seriesMouseEnter

seriesMouseEnter?: ((s, e) => void)

Type declaration

    • (s, e): void

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

      Parameters

      Returns void

Optional seriesMouseLeave

seriesMouseLeave?: ((s, e) => void)

Type declaration

    • (s, e): void

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

      Parameters

      Returns void

Optional seriesMouseLeftButtonDown

seriesMouseLeftButtonDown?: ((s, e) => void)

Type declaration

    • (s, e): void

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

      Parameters

      Returns void

Optional seriesMouseLeftButtonUp

seriesMouseLeftButtonUp?: ((s, e) => void)

Type declaration

    • (s, e): void

    • Occurs 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 )
      {

      }

      Parameters

      Returns void

Optional seriesMouseMove

seriesMouseMove?: ((s, e) => void)

Type declaration

    • (s, e): void

    • Occurs 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) => {
                       }

      Parameters

      Returns void

Optional seriesPlotAreaMarginHorizontalMode

seriesPlotAreaMarginHorizontalMode?: string | SeriesPlotAreaMarginHorizontalMode

Gets or sets horizontal mode to use for automatically calculating the plot area margin based ont the series.

Optional seriesPlotAreaMarginVerticalMode

seriesPlotAreaMarginVerticalMode?: string | SeriesPlotAreaMarginVerticalMode

Gets or sets vertical mode to use for automatically calculating the plot area margin based ont the series.

Optional shouldAutoExpandMarginForInitialLabels

shouldAutoExpandMarginForInitialLabels?: string | boolean

Gets or sets a whether the series viewer should auto expand margins to accomodate the initial horizontal axis labels.

Optional shouldConsiderAutoRotationForInitialLabels

shouldConsiderAutoRotationForInitialLabels?: string | boolean

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

shouldPanOnMaximumZoom?: string | boolean

Gets or sets a whether the chart should pan its content when zooming in passed max zoom level.

Optional shouldSimulateHoverMoveCrosshairPoint

shouldSimulateHoverMoveCrosshairPoint?: string | boolean

Gets or sets whether calling SimulateHover should shift the crosshair point.

Optional shouldSuppressAxisLabelTruncation

shouldSuppressAxisLabelTruncation?: string | boolean

Gets or sets a whether the series viewer should suppress truncation of axis labels.

Optional sizeChanged

sizeChanged?: ((s, e) => void)

Type declaration

    • (s, e): void

    • Occurs 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}){

      }

      Parameters

      Returns void

Optional subtitle

subtitle?: string

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

subtitleBottomMargin?: string | number

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

subtitleHorizontalAlignment?: string | HorizontalAlignment

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

subtitleLeftMargin?: string | number

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

subtitleRightMargin?: string | number

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

subtitleTextColor?: string

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

subtitleTextStyle?: string

Font settings for the subtitle.

Optional subtitleTopMargin

subtitleTopMargin?: string | number

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

suppressAutoMarginAndAngleRecalculation?: string | boolean

Gets or sets a whether the series viewer should suppress auto recalculating margin and axis label angles.

Optional titleBottomMargin

titleBottomMargin?: string | number

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

titleHorizontalAlignment?: string | HorizontalAlignment

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

titleLeftMargin?: string | number

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

titleRightMargin?: string | number

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

titleTextColor?: string

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

titleTextStyle?: string

Font settings for the title.

Optional titleTopMargin

titleTopMargin?: string | number

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

topMargin?: string | number

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

useTiledZooming?: string | boolean

Gets or sets whether the series viewer should use cached tiles during zooms rather than the default live content.

Optional verticalCrosshairBrush

verticalCrosshairBrush?: string

Gets or sets the current SeriesViewer's crosshair vertical brush override.

Optional verticalViewScrollbarCornerRadius

verticalViewScrollbarCornerRadius?: string | number

Gets or sets the corner radius to use for the vertical scrollbar in the component, when enabled.

Optional verticalViewScrollbarFill

verticalViewScrollbarFill?: string

Gets or sets the fill to use for the vertical scrollbar in the component, when enabled.

Optional verticalViewScrollbarInset

verticalViewScrollbarInset?: string | number

Gets or sets the inset distance to use for the vertical scrollbar in the component, when enabled.

Optional verticalViewScrollbarMaxOpacity

verticalViewScrollbarMaxOpacity?: string | number

Gets or sets the max opacity to use for the vertical scrollbar in the component, when enabled.

Optional verticalViewScrollbarMode

verticalViewScrollbarMode?: string | SeriesViewerScrollbarMode

Gets or sets the vertical scrollbar mode to use for the series viewer.

Optional verticalViewScrollbarOutline

verticalViewScrollbarOutline?: string

Gets or sets the outline to use for the vertical scrollbar in the component, when enabled.

Optional verticalViewScrollbarPosition

verticalViewScrollbarPosition?: string | SeriesViewerVerticalScrollbarPosition

Gets or sets the position to use for the vertical scrollbar in the component, when enabled.

Optional verticalViewScrollbarShouldAddAutoTrackInsets

verticalViewScrollbarShouldAddAutoTrackInsets?: string | boolean

Gets or sets whether to use automatic track insets for the vertical scrollbar in the component, when enabled.

Optional verticalViewScrollbarStrokeThickness

verticalViewScrollbarStrokeThickness?: string | number

Gets or sets the stroke thickness to use for the vertical scrollbar in the component, when enabled.

Optional verticalViewScrollbarTrackEndInset

verticalViewScrollbarTrackEndInset?: string | number

Gets or sets the track end inset to use for the vertical scrollbar in the component, when enabled.

Optional verticalViewScrollbarTrackStartInset

verticalViewScrollbarTrackStartInset?: string | number

Gets or sets the track start inset to use for the vertical scrollbar in the component, when enabled.

Optional verticalViewScrollbarWidth

verticalViewScrollbarWidth?: string | number

Gets or sets the width to use for the vertical scrollbar in the component, when enabled.

Optional viewerManipulationEnding

viewerManipulationEnding?: ((s, e) => void)

Type declaration

Optional viewerManipulationStarting

viewerManipulationStarting?: ((s, e) => void)

Type declaration

Optional width

width?: string

Optional windowPositionHorizontal

windowPositionHorizontal?: string | number

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

windowPositionVertical?: string | number

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

windowRect?: string | IgRect

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

windowRectChanged?: ((s, e) => void)

Type declaration

    • (s, e): void

    • Occurs 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) => {

             }

      Parameters

      Returns void

Optional windowRectMinHeight

windowRectMinHeight?: string | number

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

windowRectMinWidth?: string | number

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

windowResponse?: string | WindowResponse

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.

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 windowScaleHorizontal

windowScaleHorizontal?: string | number

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

windowScaleVertical?: string | number

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

windowSizeMinHeight?: string | number

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

windowSizeMinWidth?: string | number

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

zoomCoercionMode?: string | ZoomCoercionMode

Gets or sets zoom is constrained to within the axes. Setting this to false is a preview feature at the present time.

Optional zoomTileCacheSize

zoomTileCacheSize?: string | number

Gets or sets the maximum number of zoom tiles that the series viewer should cache while in tiled zooming mode.