Hierarchy

Hierarchy

Properties

Properties

actualBrushes?: string | string[]

Gets the actual palette of brushes to use for coloring the chart series.

actualOutlines?: string | string[]

Gets the actual palette of brushes to use for outlines on the chart series.

alignsGridLinesToPixels?: string | boolean

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

Use AlignsGridLinesToPixels propert to indicat whether grid and tick lines are aligned to device pixels.

 this.chart.alignsGridLinesToPixels= true;
animateSeriesWhenAxisRangeChanges?: string | boolean

Gets or sets whether the series animations should be allowed when a range change has been detected on an axis.

areaFillOpacity?: string | number

Gets or sets the fill opacity for all series that have area visuals in this chart. For example, Area, SplineArea, Column chart types

autoCalloutsVisible?: string | boolean

Gets or sets if the auto value callouts should be displayed.

bottomMargin?: string | number

Gets or sets the bottom margin around the chart content.

Use the bottomMargin property for the bottom margin around the chart content.

this.chart.bottomMargin=20;
 <IgrCategoryChart dataSource={this.state.data}
bottomMargin= 20 />
brushes?: string | string[]

Gets or sets the palette of brushes to use for coloring the chart series. The value provided should be an array of CSS color strings or JavaScript objects defining gradients. Optionally the first element can be a string reading "RGB" or "HSV" to specify the interpolation mode of the collection

Use the Brushes property to set the brushes.

this.chart.brushes = ["#ff0000","#00ff00"];
calloutRenderStyleUpdating?: ((s, e) => void)

Type declaration

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

Type declaration

calloutStyleUpdatingEventEnabled?: string | boolean

Gets or sets if event annotations should be displayed.

calloutsAllowedPositions?: string | IgrCalloutPlacementPositionsCollection

Gets or sets the allowed positions that the callout layer is allowed to use.

calloutsContentMemberPath?: string

Gets or sets the member path of the content data for the callouts.

calloutsDataSource?: any[]
calloutsLabelMemberPath?: string

Gets or sets the member path of the label data for the callouts.

calloutsVisible?: string | boolean

Gets or sets if callouts should be displayed.

calloutsXMemberPath?: string

Gets or sets the member path of the X data for the callouts.

calloutsYMemberPath?: string

Gets or sets the member path of the Y data for the callouts.

chartTitle?: string

Gets or sets text to display above the plot area.

Use the Title property to display the text above the plot area.

 this.chart.title= "This is a Title";
 <IgrCategoryChart
width="100%"
height="100%"
chartType="Line"
dataSource={this.categoryData}
title= "CategoryChart Subtitle" />
children?: ReactNode
computedPlotAreaMarginMode?: string | ComputedPlotAreaMarginMode

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

crosshairsAnnotationEnabled?: string | boolean

Gets or sets whether annotations are shown along the axis for crosshair values

crosshairsAnnotationXAxisBackground?: string

Gets or sets the background of crosshair annotation on x-axis.

crosshairsAnnotationXAxisPrecision?: string | number

Gets or sets precision on interpolated values of crosshairs on x-axis.

crosshairsAnnotationXAxisTextColor?: string

Gets or sets the text color of crosshair annotation on x-axis.

crosshairsAnnotationYAxisBackground?: string

Gets or sets the background of crosshair annotation on y-axis.

crosshairsAnnotationYAxisPrecision?: string | number

Gets or sets precision on interpolated values of crosshairs on y-axis.

crosshairsAnnotationYAxisTextColor?: string

Gets or sets the text color of crosshair annotation on y-axis.

crosshairsDisplayMode?: string | CrosshairsDisplayMode

Gets or sets the crosshairs to be displayed.

crosshairsLineHorizontalStroke?: string

Gets or sets the color to apply to horizontal crosshairs line.

crosshairsLineThickness?: string | number

Gets or sets thickness of crosshairs lines.

crosshairsLineVerticalStroke?: string

Gets or sets the color to apply to vertical crosshairs line.

crosshairsSnapToData?: string | boolean

Gets or sets whether crosshairs will snap to the nearest data point.

dataToolTipBadgeMarginBottom?: string | number
dataToolTipBadgeMarginLeft?: string | number
dataToolTipBadgeMarginRight?: string | number
dataToolTipBadgeMarginTop?: string | number
dataToolTipBadgeShape?: string | LegendItemBadgeShape

Gets or sets the BadgeShape for the data legend.

dataToolTipDefaultPositionOffsetX?: string | number

Gets or sets the offset of the tooltip layer on the X axis.

dataToolTipDefaultPositionOffsetY?: string | number

Gets or sets the offset of the tooltip layer on the Y axis.

dataToolTipExcludedColumns?: string[]

Gets or sets names of data columns or their labels to exclude from displaying in the data legend, e.g. "High, Low" or "H, L" The ExcludedColumns property takes precedences over values of IncludedColumns property

dataToolTipExcludedSeries?: string[]

Gets or sets indexes or names of series to exclude from displaying in the data legend, e.g. "0, 1" The ExcludedSeries property takes precedences over values of IncludedSeries property

dataToolTipGroupedPositionModeX?: string | DataTooltipGroupedPositionX

Gets or sets the tooltip position mode on the X axis for grouped series.

dataToolTipGroupedPositionModeY?: string | DataTooltipGroupedPositionY

Gets or sets the tooltip position mode on the Y axis for grouped series.

dataToolTipGroupingMode?: string | DataToolTipLayerGroupingMode
dataToolTipHeaderFormatCulture?: string

Gets or sets globalization culture when displaying header as date time This property is ignored when setting HeaderFormatSpecifiers or HeaderFormatString properties

dataToolTipHeaderFormatDate?: string | DataLegendHeaderDateMode

Gets or sets date format for the header This property is ignored when setting HeaderFormatSpecifiers or HeaderFormatString properties

dataToolTipHeaderFormatSpecifiers?: any[]

Gets or sets the format specifiers to use with the HeaderFormatString string.

dataToolTipHeaderFormatString?: string

Gets or sets the format string for header text displayed in the data legend.

dataToolTipHeaderFormatTime?: string | DataLegendHeaderTimeMode

Gets or sets time format for the header This property is ignored when setting HeaderFormatSpecifiers or HeaderFormatString properties

dataToolTipHeaderRowMarginBottom?: string | number
dataToolTipHeaderRowMarginLeft?: string | number
dataToolTipHeaderRowMarginRight?: string | number
dataToolTipHeaderRowMarginTop?: string | number
dataToolTipHeaderRowVisible?: string | boolean

Gets or sets whether to show Header row.

dataToolTipHeaderText?: string

Gets or sets the HeaderText for the data legend.

dataToolTipHeaderTextColor?: string

Gets or sets the header text color.

dataToolTipHeaderTextMarginBottom?: string | number
dataToolTipHeaderTextMarginLeft?: string | number
dataToolTipHeaderTextMarginRight?: string | number
dataToolTipHeaderTextMarginTop?: string | number
dataToolTipHeaderTextStyle?: string

Gets or Sets the style to use for the header text.

dataToolTipIncludedColumns?: string[]

Gets or sets names of data columns or their labels to include in displaying in the data legend, e.g. "High, Low" or "H, L" The ExcludedColumns property takes precedences over values of IncludedColumns property

dataToolTipIncludedSeries?: string[]

Gets or sets indexes or names of series to include in displaying in the data legend, e.g. "0, 1"

dataToolTipLabelDisplayMode?: string | DataLegendLabelMode

Gets or sets the mode for displaying labels before series values in the data legend, e.g. O: H: L: C: for financial series

dataToolTipLabelTextColor?: string

Gets or sets the units text color.

dataToolTipLabelTextMarginBottom?: string | number
dataToolTipLabelTextMarginLeft?: string | number
dataToolTipLabelTextMarginRight?: string | number
dataToolTipLabelTextMarginTop?: string | number
dataToolTipLabelTextStyle?: string

Gets or Sets the style to use for the units text.

dataToolTipPositionOffsetX?: string | number

Gets or sets the offset of the tooltip layer on the X axis.

dataToolTipPositionOffsetY?: string | number

Gets or sets the offset of the tooltip layer on the Y axis.

dataToolTipShouldUpdateWhenSeriesDataChanges?: string | boolean

Gets or sets whether the data legend should update when the series data is mutated.

dataToolTipSummaryLabelText?: string

Gets or sets the units text for the data legend.

dataToolTipSummaryLabelTextColor?: string

Gets or sets the units text color.

dataToolTipSummaryLabelTextStyle?: string

Gets or Sets the style to use for the units text.

dataToolTipSummaryRowMarginBottom?: string | number
dataToolTipSummaryRowMarginLeft?: string | number
dataToolTipSummaryRowMarginRight?: string | number
dataToolTipSummaryRowMarginTop?: string | number
dataToolTipSummaryTitleText?: string

Gets or sets the SummaryTitleText for the data legend.

dataToolTipSummaryTitleTextColor?: string

Gets or sets the summary text color.

dataToolTipSummaryTitleTextMarginBottom?: string | number
dataToolTipSummaryTitleTextMarginLeft?: string | number
dataToolTipSummaryTitleTextMarginRight?: string | number
dataToolTipSummaryTitleTextMarginTop?: string | number
dataToolTipSummaryTitleTextStyle?: string

Gets or Sets the style to use for the summary text.

dataToolTipSummaryType?: string | DataLegendSummaryType

Gets or sets the SummaryType for the data legend.

dataToolTipSummaryUnitsText?: string

Gets or sets the units text for the data legend.

dataToolTipSummaryUnitsTextColor?: string

Gets or sets the units text color.

dataToolTipSummaryUnitsTextStyle?: string

Gets or Sets the style to use for the units text.

dataToolTipSummaryValueTextColor?: string

Gets or sets the units text color.

dataToolTipSummaryValueTextStyle?: string

Gets or Sets the style to use for the units text.

dataToolTipTitleTextColor?: string

Gets or sets the display text color.

dataToolTipTitleTextMarginBottom?: string | number
dataToolTipTitleTextMarginLeft?: string | number
dataToolTipTitleTextMarginRight?: string | number
dataToolTipTitleTextMarginTop?: string | number
dataToolTipTitleTextStyle?: string

Gets or Sets the style to use for the display text.

dataToolTipUnitsDisplayMode?: string | DataLegendUnitsMode

Gets or sets the UnitsMode for the data legend.

dataToolTipUnitsText?: string

Gets or sets the units text for the data legend.

dataToolTipUnitsTextColor?: string

Gets or sets the units text color.

dataToolTipUnitsTextMarginBottom?: string | number
dataToolTipUnitsTextMarginLeft?: string | number
dataToolTipUnitsTextMarginRight?: string | number
dataToolTipUnitsTextMarginTop?: string | number
dataToolTipUnitsTextStyle?: string

Gets or Sets the style to use for the units text.

dataToolTipValueFormatAbbreviation?: string | DataAbbreviationMode

Gets or sets mode for abbreviating large numbers displayed in the legend This property is ignored when setting ValueFormatSpecifiers or ValueFormatString properties

dataToolTipValueFormatCulture?: string

Gets or sets globalization culture when displaying values as currencies, e.g. use "en-GB" to display British pound symbol when the ValueFormatMode property is set to 'Currency' mode This property is ignored when setting ValueFormatSpecifiers or ValueFormatString properties

dataToolTipValueFormatMaxFractions?: string | number

Gets or sets maximum digits for formating numbers displayed in the legend This property is ignored when setting ValueFormatSpecifiers or ValueFormatString properties

dataToolTipValueFormatMinFractions?: string | number

Gets or sets minimum digits for formating numbers displayed in the legend This property is ignored when setting ValueFormatSpecifiers or ValueFormatString properties

dataToolTipValueFormatMode?: string | DataLegendValueMode

Gets or sets the mode for displaying values in the data legend, e.g. Currency ($500.25), Decimal (500.25), Integer (500)

dataToolTipValueFormatSpecifiers?: any[]

Gets or sets the format specifiers to use with the ValueFormatString string.

dataToolTipValueFormatString?: string

Gets or sets the format string for values displayed in the data legend.

dataToolTipValueFormatUseGrouping?: string | boolean

Gets or sets whether or not use grouping separator, e.g, 15,000 for 15000 This property is ignored when setting ValueFormatSpecifiers or ValueFormatString properties

dataToolTipValueRowMarginBottom?: string | number
dataToolTipValueRowMarginLeft?: string | number
dataToolTipValueRowMarginRight?: string | number
dataToolTipValueRowMarginTop?: string | number
dataToolTipValueRowVisible?: string | boolean

Gets or sets whether to show series rows.

dataToolTipValueTextColor?: string

Gets or sets the units text color.

dataToolTipValueTextMarginBottom?: string | number
dataToolTipValueTextMarginLeft?: string | number
dataToolTipValueTextMarginRight?: string | number
dataToolTipValueTextMarginTop?: string | number
dataToolTipValueTextStyle?: string

Gets or Sets the style to use for the units text.

dataToolTipValueTextUseSeriesColors?: string | boolean

Gets or sets whether to use series colors when displaying values in the legend

dataToolTipValueTextWhenMissingData?: string

Gets or sets text displayed when data column is missing a value, e.g. "no data"

excludedProperties?: string[]

Gets or sets a set of property paths that should be excluded from consideration by the category chart.

The ExcludedProperties property used for the property paths that should be excluded from consideration by the category chart.

this.chart.excludedProperties = ["ID", "Discount"];
    <IgrCategoryChart
chartType="Line"
markerTypes={this.state.markersTypes}
dataSource={this.categoryData}
excludedProperties="value" />
filterStringErrorsParsing?: ((s, e) => void)

Type declaration

finalValueAnnotationsBackground?: string

Gets or sets the background of final value annotation.

finalValueAnnotationsPrecision?: string | number

Gets or sets precision on final value annotation.

finalValueAnnotationsTextColor?: string

Gets or sets the text color of final value annotation.

finalValueAnnotationsVisible?: string | boolean

Gets or sets whether annotations for the final value of each series is displayed on the axis.

groupSorts?: string

Gets or sets the sorts to apply after grouping has been applied.

highlightedValuesDisplayMode?: string | SeriesHighlightedValuesDisplayMode

Gets or sets whether and how to display highlighted values for the series. Note, this is distinct from the highlighting feature that indicates what is closest or under the mouse. This property applies to Category Chart and Financial Chart controls.

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 IsHightlightingEnabled.

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 IsHightlightingEnabled.

horizontalViewScrollbarCornerRadius?: string | number

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

horizontalViewScrollbarFill?: string

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

horizontalViewScrollbarHeight?: string | number

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

horizontalViewScrollbarInset?: string | number

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

horizontalViewScrollbarMaxOpacity?: string | number

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

horizontalViewScrollbarMode?: string | SeriesViewerScrollbarMode

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

horizontalViewScrollbarOutline?: string

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

horizontalViewScrollbarPosition?: string | SeriesViewerHorizontalScrollbarPosition

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

horizontalViewScrollbarShouldAddAutoTrackInsets?: string | boolean

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

horizontalViewScrollbarStrokeThickness?: string | number

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

horizontalViewScrollbarTrackEndInset?: string | number

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

horizontalViewScrollbarTrackStartInset?: string | number

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

includedProperties?: string[]

Gets or sets a set of property paths that should be included for consideration by the category chart, leaving the remainder excluded. If null, all properties will be considered.

The IncludedProperties property used to include the properties for the consideration of the category chart.

this.chart.includedProperties = ["ProductName", "Cost"];
    <IgrCategoryChart
chartType="Line"
markerTypes={this.state.markersTypes}
dataSource={this.categoryData}
excludedProperties="value" />
initialFilter?: string

Gets or sets the filter to apply to the chart. This property will become ignored if the filter is changed outside of this property.

initialGroups?: string

Gets or sets the groupings to apply to the chart. This property will become ignored if sorts are changed outside of this property.

initialHighlightFilter?: string

Gets or sets the filter to apply to the chart. This property will become ignored if the filter is changed outside of this property.

initialSorts?: string

Gets or sets the sorts to apply to the chart. This property will become ignored if sorts are changed outside of this property.

initialSummaries?: string

Gets or sets the summaries to apply to the chart. This property will become ignored if sorts are changed outside of this property.

isHorizontalZoomEnabled?: string | boolean

Gets or sets whether the chart can be horizontally zoomed through user interactions.

Use the IsHorizontalZoomEnabled property to allow chart horizontally zoomed .

 <IgrCategoryChart dataSource={this.state.data}
width="700px"
height="500px"
xAxisLabelTextStyle="10pt Verdana"
xAxisLabelTopMargin={5}
xAxisLabelTextColor="gray"
yAxisLabelTextStyle="10pt Verdana"
yAxisLabelRightMargin={5}
yAxisLabelTextColor="gray"
isHorizontalZoomEnabled= true/>
 <IgrCategoryChart dataSource={this.state.data}
IsHorizontalZoomEnabled= true />
this.chart.isHorizontalZoomEnabled = true;
isSeriesHighlightingEnabled?: string | boolean

Gets or sets whether the chart can highlight series through user interactions. This property applies to Category Chart and Financial Chart controls.

isVerticalZoomEnabled?: string | boolean

Gets or sets whether the chart can be vertically zoomed through user interactions.

Use the IsVerticalZoomEnabled property to allow chart zoom vertically.

 this.chart.isVerticalZoomEnabled = true;
 <IgrCategoryChart dataSource={this.state.data}
isVerticalZoomEnabled= "true"/>
leftMargin?: string | number

Gets or sets the left margin of the chart content.

Use the 'leftMargin' property for the left margin of the chart content.

 this.chart.leftMargin = 20;
 <IgrCategoryChart dataSource={this.state.data}
leftMargin= {20}/>
legendHighlightingMode?: string | LegendHighlightingMode

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

legendItemBadgeMode?: string | LegendItemBadgeMode

Gets or sets the mode 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

legendItemBadgeShape?: string | LegendItemBadgeShape

Gets or sets the 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

markerAutomaticBehavior?: string | MarkerAutomaticBehavior

Gets or sets the default marker type for all series plotted in this chart. This property is ignored when the MarkerTypes property is set

markerBrushes?: string | string[]

Gets or sets the palette of brushes used for rendering fill area of data point markers. This property applies only to these chart types: point, line, spline, bubble, and polygon

MarkerBrushes property used for rendering fill area of data point markers.

 this.chart.markerBrushes=[ "#ff0000", "#ffff00", "#00ffff" ];
<IgrCategoryChart
chartType="Line"
markerBrushes ="#ffff00"
dataSource={this.categoryData}/>
markerFillMode?: string | MarkerFillMode

Gets or sets the MarkerFillMode for all series that support markers in this chart.

markerFillOpacity?: string | number

Gets or sets the Marker Fill Opacity for all series that support markers in this chart.

markerMaxCount?: string | number

Gets or sets the maximum number of markers displayed in the plot area of the chart.

markerMaxCount property used to display maximum number of markers in the plot area of the chart.

 this.chart.markerMaxCount = 100 ;
<IgrCategoryChart
chartType="Line"
markerMaxCount= {2}
dataSource={this.categoryData}/>
markerOutlineMode?: string | MarkerOutlineMode

Gets or sets the MarkerOutlineMode for all series that support markers in this chart.

markerOutlines?: string | string[]

Gets or sets the palette of brushes used for rendering outlines of data point markers. This property applies only to these chart types: point, line, spline, bubble, and polygon

MarkerOutlines property used for rendering outlines of data point markers.

this.chart.markerOutlines= ["#ff0000", "#ffff00", "#00ffff"] ;
<IgrCategoryChart
chartType="Line"
markerOutlines= "#ff0000"
dataSource={this.categoryData}/>
markerThickness?: string | number

Gets or sets the Marker Thickness for all series that support markers in this chart.

markerTypes?: string | IgrMarkerTypeCollection

Gets or sets the marker shapes used for indicating location of data points in this chart. This property applies only to these chart types: point, line, spline, bubble, and polygon

outlineMode?: string | SeriesOutlineMode

Gets or sets the OutlineMode for all series in this chart.

outlines?: string | string[]

Gets or sets the palette of brushes to use for outlines on the chart series. The value provided should be an array of CSS color strings or JavaScript objects defining gradients. Optionally the first element can be a string reading "RGB" or "HSV" to specify the interpolation mode of the collection

Use the Outlines property to sets the palette of brushes to use for outlines on the chart series

<IgrCategoryChart
chartType="Line"
outlines= "#ff0000"
dataSource={this.categoryData}/>
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.

plotAreaMarginBottom?: string | number

Margin applied below the plot area.

plotAreaMarginLeft?: string | number

Margin applied to the Left of the plot area.

plotAreaMarginRight?: string | number

Margin applied to the right of the plot area.

plotAreaMarginTop?: string | number

Margin applied to the Top of the plot area.

resolution?: string | number

Gets or sets the rendering resolution for all series in this chart. Where n = Resolution, for every n horizontal pixels, combine all items into a single data point. When Resolution = 0, all data points will be rendered as graphical objects. Charts with a higher resolution will have faster performance.

Use the Resolution property if the callouts should be display.

  this.chart.resolution = 2 ;
 <IgrCategoryChart
width="100%"
height="100%"
chartType="Line"
markerTypes={this.state.markersTypes}
dataSource={this.categoryData}
calloutsVisible="true"
resolution= {2}/>
rightMargin?: string | number

Gets or sets the right margin of the chart content.

Use rightMargin property for the right margin of the chart content.

  this.chart.rightMargin = 20 ;
 <IgrCategoryChart
width="100%"
height="100%"
chartType="Line"
markerTypes={this.state.markersTypes}
dataSource={this.categoryData}
rightMargin= {4}/>
seriesAdded?: ((s, e) => void)

Type declaration

    • (s, e): void
    • Event raised when a series is initialized and added to this chart.

      SeriesAdded event raised when a series is initialized and added to this chart.

       <IgrCategoryChart
      width="100%"
      height="100%"
      chartType="Line"
      markerTypes={this.state.markersTypes}
      dataSource={this.categoryData}
      seriesAdded={this.CategoryChart_SeriesAdded}/>
      ``

      ```ts
      CategoryChart_SeriesAdded(sender:any ,aregs:ChartSeriesEventArgs)
      {
      }

      Parameters

      Returns void

seriesPlotAreaMarginHorizontalMode?: string | SeriesPlotAreaMarginHorizontalMode

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

seriesPlotAreaMarginVerticalMode?: string | SeriesPlotAreaMarginVerticalMode

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

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

Type declaration

    • (s, e): void
    • Occurs when the pointer is pressed down over a Series.

      SeriesPointerDown event raised when the pointer is pressed down over a Series

       <IgrCategoryChart
      width="100%"
      height="100%"
      chartType="Line"
      markerTypes={this.state.markersTypes}
      dataSource={this.categoryData}
      seriesPointerDown={this.CategoryChart_seriesPointerDown}/>
      ``

      ```ts
      CategoryChart_seriesPointerDown(sender: any , aregs: ChartSeriesEventArgs)
      {

      }

      Parameters

      Returns void

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

Type declaration

    • (s, e): void
    • Occurs when the pointer enters a Series.

      SeriesPointerEnter event raised when the pointer enters a Series.

       <IgrCategoryChart
      width="100%"
      height="100%"
      chartType="Line"
      markerTypes={this.state.markersTypes}
      dataSource={this.categoryData}
      seriesPointerEnter={this.CategoryChart_seriesPointerDown}/>
      CategoryChart_seriesPointerEnter(sender: any , aregs: ChartSeriesEventArgs)
      {

      }

      Parameters

      Returns void

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

Type declaration

    • (s, e): void
    • Occurs when the pointer leaves a Series.

      SeriesPointerLeave event raised when the pointer leaves a Series.

       <IgrCategoryChart
      width="100%"
      height="100%"
      chartType="Line"
      markerTypes={this.state.markersTypes}
      dataSource={this.categoryData}
      seriesPointerLeave={this.CategoryChart_seriesPointerLeave}/>
      CategoryChart_seriesPointerLeave(sender: any , aregs: ChartSeriesEventArgs)
      {

      }

      Parameters

      Returns void

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

Type declaration

    • (s, e): void
    • Occurs when the pointer moves over a Series.

      SeriesPointerMove event raised when the pointer moves over a Series.

       <IgrCategoryChart
      width="100%"
      height="100%"
      chartType="Line"
      markerTypes={this.state.markersTypes}
      dataSource={this.categoryData}
      seriesPointerMove={this.CategoryChart_seriesPointerMove}/>
       CategoryChart_seriesPointerMove(sender: any , aregs: ChartSeriesEventArgs)
      {

      }

      Parameters

      Returns void

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

Type declaration

    • (s, e): void
    • Occurs when the pointer is released over a Series.

      SeriesPointerUp event raised when the pointer is released over a Series.

       <IgrCategoryChart
      width="100%"
      height="100%"
      chartType="Line"
      markerTypes={this.state.markersTypes}
      dataSource={this.categoryData}
      seriesPointerUp={this.CategoryChart_seriesPointerUp}/>
       CategoryChart_seriesPointerUp(sender: any , aregs: ChartSeriesEventArgs)
      {

      }

      Parameters

      Returns void

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

Type declaration

    • (s, e): void
    • Event raised when a series is removed from this chart.

      SeriesRemoved event raised when a series is removed from this chart.

       <IgrCategoryChart
      width="100%"
      height="100%"
      chartType="Line"
      markerTypes={this.state.markersTypes}
      dataSource={this.categoryData}
      seriesRemoved={this.CategoryChart_seriesRemoved}/>
       CategoryChart_seriesRemoved(sender: any , aregs: ChartSeriesEventArgs)
      {

      }

      Parameters

      Returns void

shouldAvoidAxisAnnotationCollisions?: string | boolean

Gets or sets whether annotations for the final value of each series is displayed on the axis.

shouldDisplayMockData?: string | boolean

Gets or sets whether the chart should display mock data when the data source has not been provided, if supported for this type of chart.

shouldPanOnMaximumZoom?: string | boolean

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

shouldUseSkeletonStyleForMockData?: string | boolean

Gets or sets whether the chart should use a faded skeleton style for mock data.

subtitle?: string

Gets or sets text to display below the Title, above the plot area.

Use the Subtitle property to display the text below and above the plot area.

 <IgrCategoryChart
width="100%"
height="100%"
chartType="Line"
dataSource={this.categoryData}
subtitle= "CategoryChart Subtitle"/>
 this.chart.subtitle ="CategoryChart Subtitle" ;
subtitleAlignment?: string | HorizontalAlignment

Gets or sets horizontal alignment which determines the subtitle position, relative to the left and right edges of the control.

Use the SubtitleAlignment property to Gets or sets horizontal alignment.

 <IgrCategoryChart
width="100%"
height="100%"
chartType="Line"
dataSource={this.categoryData}
subtitle= "CategoryChart Subtitle"
subtitleAlignment="Right"/>
this.chart.subtitleAlignment = HorizontalAlignment.Right;
subtitleBottomMargin?: string | number

Gets or sets the bottom margin of chart subtitle

Use subtitleBottomMargin property for the bottom margin of chart subtitle.

 <IgrCategoryChart
width="100%"
height="100%"
chartType="Line"
dataSource={this.categoryData}
subtitle= "CategoryChart Subtitle"
subtitleBottomMargin= {10}/>
this.chart.subtitleBottomMargin = 10 ;
subtitleLeftMargin?: string | number

Gets or sets the left margin of chart subtitle

Use subtitleLeftMargin property for the left margin of chart subtitle.

this.chart.subtitleLeftMargin = 20 ;
 <IgrCategoryChart
width="100%"
height="100%"
chartType="Line"
dataSource={this.categoryData}
subtitle= "CategoryChart Subtitle"
subtitleLeftMargin= {20}/>
subtitleRightMargin?: string | number

Gets or sets the right margin of chart subtitle

Use subtitleRightMargin property for the right margin of chart subtitle.

 this.chart.subtitleRightMargin = 20 ;
 <IgrCategoryChart
width="100%"
height="100%"
chartType="Line"
dataSource={this.categoryData}
subtitle= "CategoryChart Subtitle"
subtitleAlignment="Right"
subtitleRightMargin ={20}/>
subtitleTextColor?: string

Gets or sets color of chart subtitle

Use subtitleTextColor property to color the subtitle.

this.chart.subtitleTextColor = "#ff0000" ;
 <IgrCategoryChart
width="100%"
height="100%"
chartType="Line"
dataSource={this.categoryData}
subtitle= "CategoryChart Subtitle"
subtitleTextColor="#ff0000"/>
subtitleTextStyle?: string

Gets or sets CSS font property for the chart subtitle

Use subtitleTextStyle property for the CSS font of the chart subtitle.

this.chart.subtitleTextStyle= "16pt Verdona";
 <IgrCategoryChart
width="100%"
height="100%"
chartType="Line"
dataSource={this.categoryData}
subtitleTextStyle="16pt Verdona"/>
subtitleTopMargin?: string | number

Gets or sets the top margin of chart subtitle

Use subtitleTopMargin property for the top margin of chart subtitle.

this.chart.subtitleTopMargin = 10;
 <IgrCategoryChart
width="100%"
height="100%"
chartType="Line"
dataSource={this.categoryData}
subtitle= "CategoryChart Subtitle"
subtitleTopMargin= {10}/>
thickness?: string | number

Gets or sets the thickness for all series in this chart. Depending on the ChartType, this can be the main brush used, or just the outline.

Use the Thickness property for the thickness of all the series in this chart.

titleAlignment?: string | HorizontalAlignment

Gets or sets horizontal alignment which determines the title position, relative to the left and right edges of the control.

Use the TitleAlignment property for the horizontal alignment of the title.

this.chart.titleAlignment = HorizontalAlignment.Center;
 <IgrCategoryChart
width="100%"
height="100%"
chartType="Line"
dataSource={this.categoryData}
titleAlignment= "Center"/>
titleBottomMargin?: string | number

Gets or sets the bottom margin of chart title

Use titleBottomMargin property for the bottom margin of chart title.

 this.chart.titleBottomMargin = 5;
 <IgrCategoryChart
width="100%"
height="100%"
chartType="Line"
dataSource={this.categoryData}
subtitle= "CategoryChart Subtitle"
subtitleAlignment="Right"
titleBottomMargin={5}/>
titleLeftMargin?: string | number

Gets or sets the left margin of chart title

Use titleLeftMargin property for the left margin of chart title.

this.chart.titleLeftMargin = 10;
 <IgrCategoryChart dataSource={this.state.data}
titleLeftMargin={20}>
</IgrCategoryChart>
titleRightMargin?: string | number

Gets or sets the right margin of chart title

Use titleLeftMargin property for the right margin of chart title.

this.chart.titleRightMargin = 10;
<IgrCategoryChart
dataSource={this.state.data}
titleRightMargin = 10>
</IgrCategoryChart>
titleTextColor?: string

Gets or sets color of chart title

Use titleTextColor property to color the chart title

 this.chart.titleTextColor="red" ;
<IgrCategoryChart
dataSource={this.state.data}
width="700px"
height="500px"
xAxisTitle="Countries"
titleTextColor="Red" />
titleTextStyle?: string

Gets or sets CSS font property for the chart title

Use titleTextStyle property for the CSS font property of the chart title

this.chart.xAxisTitleTextStyle = "24pt Verdona";
<IgrCategoryChart dataSource={this.state.data}
width="700px"
height="500px"
xAxisTitle="Countries"
xAxisTitleTextColor="gray"
xAxisTitleTextStyle="12pt Verdana"
xAxisTitleAngle={0}
yAxisTitle="Trillions of Watt-hours (TWh)"
yAxisTitleTextStyle="12pt Verdana"
yAxisTitleTextColor="gray"
yAxisTitleAngle={90}
yAxisTitleLeftMargin={5}>
</IgrCategoryChart>
titleTopMargin?: string | number

Gets or sets the top margin of chart title

Use titleTopMargin property for the top margin of chart title.

this.chart.titleTopMargin = 10;
<IgrCategoryChart dataSource={this.state.data}
titleTopMargin={10} />
toolTipType?: string | ToolTipType

Gets or sets the style of tooltip to be displayed.

tooltipTemplate?: FunctionComponent<IChartTooltipProps> | Component<IChartTooltipProps, {}, any>
tooltipTemplates?: (FunctionComponent<IChartTooltipProps> | Component<IChartTooltipProps, {}, any>)[]
topMargin?: string | number

Gets or sets the top margin of the chart content.

Use topMargin property for the margin of the chart content.

this.chart.topMargin=20;
<IgrCategoryChart dataSource={this.state.data}
topMargin={10} />
transitionDuration?: string | number

Gets or sets the duration used for animating series plots when the data is changing

Use the TransitionDuration property to animating between data values.

this.chart.transitionDuratio= 500;
<IgrCategoryChart dataSource={this.state.data}
transitionDuratio={500} />
transitionEasingFunction?: ((time) => number)

Type declaration

    • (time): number
    • Gets or sets the easing function used for animating series plots when the data is changing. This can be set to one of the known values "linear" or "cubic," or it can be set to an easing function which takes a single numeric parameter and returns a number.

      The 'transitionInEasingFunction' property used for easing function for animating series plots when the chart is loading into view.

      this.chart.transitionInEasingFunction=  this.cubicFunc;

      cubicFunc(time: number) : number
      {
      return time;
      }
      <IgrCategoryChart dataSource={this.state.data}
      transitionInEasingFunction="cubic" />

      Parameters

      • time: number

      Returns number

trendLineBrushes?: string | string[]

Gets or sets the palette of brushes to used for coloring trend lines in this chart. The value provided should be an array of CSS color strings or JavaScript objects defining gradients. Optionally the first element can be a string reading "RGB" or "HSV" to specify the interpolation mode of the collection

Use the TrendLineBrushes property for coloring trend lines in the chart.

this.chart.trendLineBrushes=["#ff0000", "#ffff00", "#00ffff"]	;
<IgrCategoryChart dataSource={this.state.data}
trendLineBrushes="#ffff00" />
trendLinePeriod?: string | number
trendLineThickness?: string | number

Gets or sets the thickness of the trend lines in this chart. This property applies only to these chart types: point, line, spline, and bubble

Use the TrendLineThickness property for the thickness of the trend lines in the chart.

this.chart.trendLineThickness=2;
<IgrCategoryChart dataSource={this.state.data}
trendLineThickness={2} />
trendLineType?: string | TrendLineType

Gets or sets the formula used for calculating trend lines in this chart. This property applies only to these chart types: point, line, spline, and bubble

Use the TrendLineType property for calculating trend lines.

this.chart.trendLineType = TrendLineType.CubicFit;
<IgrCategoryChart dataSource={this.state.data}
trendLineType="CubicFit" />
unknownValuePlotting?: string | UnknownValuePlotting

Gets or sets the behavior that determines how unknown values will be plotted on the chart. Null and Double.NaN are two examples of unknown values.

Use the UnknownValuePlotting property to determines the behavior that how unknown values will be plotted on the chart.

this.chart.unknownValuePlotting =UnknownValuePlotting.DontPlot;
<IgrCategoryChart dataSource={this.state.data}
unknownValuePlotting= "dontPlot" />
valueLines?: string | IgrValueModeCollection

Gets or sets what value lines to use in the chart.

valueLinesBrushes?: string | string[]

Gets or sets the palette of brushes to use for coloring the value lines present in the ValueLines property. The value provided should be an array of CSS color strings or JavaScript objects defining gradients. Optionally the first element can be a string reading "RGB" or "HSV" to specify the interpolation mode of the collection

valueLinesThickness?: string | number

Gets or sets thickness of value lines.

verticalViewScrollbarCornerRadius?: string | number

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

verticalViewScrollbarFill?: string

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

verticalViewScrollbarInset?: string | number

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

verticalViewScrollbarMaxOpacity?: string | number

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

verticalViewScrollbarMode?: string | SeriesViewerScrollbarMode

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

verticalViewScrollbarOutline?: string

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

verticalViewScrollbarPosition?: string | SeriesViewerVerticalScrollbarPosition

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

verticalViewScrollbarShouldAddAutoTrackInsets?: string | boolean

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

verticalViewScrollbarStrokeThickness?: string | number

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

verticalViewScrollbarTrackEndInset?: string | number

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

verticalViewScrollbarTrackStartInset?: string | number

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

verticalViewScrollbarWidth?: string | number

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

windowRect?: string | IgRect

Gets or sets the rectangle representing the current scroll and zoom state of the chart. WindowRect is expressed as a Rectangle with coordinates and sizes between 0 and 1.

Use WindowRect property representing the current scroll and zoom state of the chart.

this.chart.windowRect =[0,0,1,1];
<IgrCategoryChart dataSource={this.state.data}
WindowRect={1,0,1,1} />
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)

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)

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

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