Represents a base class for domain charts with X/Y axes

Type Parameters

Hierarchy

Hierarchy

Constructors

Properties

Accessors

Methods

Constructors

Properties

context: any

If using the new style context, re-declare this in your class to be the React.ContextType of your static contextType. Should be used with type annotation or static contextType.

static contextType = MyContext
// For TS pre-3.7:
context!: React.ContextType<typeof MyContext>
// For TS 3.7 and above:
declare context: React.ContextType<typeof MyContext>
props: Readonly<P> & Readonly<{
    children?: ReactNode;
}>
refs: {
    [key: string]: ReactInstance;
}

Type declaration

  • [key: string]: ReactInstance
state: Readonly<{}>
contextType?: Context<any>

If set, this.context will be set at runtime to the current value of the given Context.

Usage:

type MyContext = number
const Ctx = React.createContext<MyContext>(0)

class Foo extends React.Component {
static contextType = Ctx
context!: React.ContextType<typeof Ctx>
render () {
return <>My context's value: {this.context}</>;
}
}

Accessors

  • get actualBrushes(): string[]
  • Gets the actual palette of brushes to use for coloring the chart series.

    Returns string[]

  • set actualBrushes(v): void
  • Parameters

    • v: string[]

    Returns void

  • get actualOutlines(): string[]
  • Gets the actual palette of brushes to use for outlines on the chart series.

    Returns string[]

  • set actualOutlines(v): void
  • Parameters

    • v: string[]

    Returns void

  • get actualXAxisLabelTextColor(): string
  • Gets the actual color of labels on the X-axis

    Returns string

  • set actualXAxisLabelTextColor(v): void
  • Parameters

    • v: string

    Returns void

  • get actualYAxisLabelTextColor(): string
  • Gets the actual color of labels on the Y-axis

    Returns string

  • set actualYAxisLabelTextColor(v): void
  • Parameters

    • v: string

    Returns void

  • get alignsGridLinesToPixels(): 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;
    

    Returns boolean

  • set alignsGridLinesToPixels(v): void
  • Parameters

    • v: boolean

    Returns void

  • get animateSeriesWhenAxisRangeChanges(): boolean
  • Gets or sets whether the series animations should be allowed when a range change has been detected on an axis.

    Returns boolean

  • set animateSeriesWhenAxisRangeChanges(v): void
  • Parameters

    • v: boolean

    Returns void

  • get areaFillOpacity(): number
  • Gets or sets the fill opacity for all series that have area visuals in this chart. For example, Area, SplineArea, Column chart types

    Returns number

  • set areaFillOpacity(v): void
  • Parameters

    • v: number

    Returns void

  • get autoCalloutsVisible(): boolean
  • Gets or sets if the auto value callouts should be displayed.

    Returns boolean

  • set autoCalloutsVisible(v): void
  • Parameters

    • v: boolean

    Returns void

  • get bottomMargin(): 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 />

    Returns number

  • set bottomMargin(v): void
  • Parameters

    • v: number

    Returns void

  • get brushes(): 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"];
    

    Returns string[]

  • set brushes(v): void
  • Parameters

    • v: string[]

    Returns void

  • get calloutRenderStyleUpdating(): ((s, e) => void)
  • Occurs when the style of a callout is updated.

    Returns ((s, e) => void)

  • set calloutRenderStyleUpdating(ev): void
  • Parameters

    Returns void

  • get calloutStyleUpdating(): ((s, e) => void)
  • Occurs when the style of a callout is updated.

    Returns ((s, e) => void)

  • set calloutStyleUpdating(ev): void
  • Parameters

    Returns void

  • get calloutStyleUpdatingEventEnabled(): boolean
  • Gets or sets if event annotations should be displayed.

    Returns boolean

  • set calloutStyleUpdatingEventEnabled(v): void
  • Parameters

    • v: boolean

    Returns void

  • get calloutsContentMemberPath(): string
  • Gets or sets the member path of the content data for the callouts.

    Returns string

  • set calloutsContentMemberPath(v): void
  • Parameters

    • v: string

    Returns void

  • get calloutsDataSource(): any[]
  • Returns any[]

  • set calloutsDataSource(value): void
  • Parameters

    • value: any[]

    Returns void

  • get calloutsLabelMemberPath(): string
  • Gets or sets the member path of the label data for the callouts.

    Returns string

  • set calloutsLabelMemberPath(v): void
  • Parameters

    • v: string

    Returns void

  • get calloutsVisible(): boolean
  • Gets or sets if callouts should be displayed.

    Returns boolean

  • set calloutsVisible(v): void
  • Parameters

    • v: boolean

    Returns void

  • get calloutsXMemberPath(): string
  • Gets or sets the member path of the X data for the callouts.

    Returns string

  • set calloutsXMemberPath(v): void
  • Parameters

    • v: string

    Returns void

  • get calloutsYMemberPath(): string
  • Gets or sets the member path of the Y data for the callouts.

    Returns string

  • set calloutsYMemberPath(v): void
  • Parameters

    • v: string

    Returns void

  • get 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" />

    Returns string

  • set chartTitle(v): void
  • Parameters

    • v: string

    Returns void

  • get computedPlotAreaMarginMode(): ComputedPlotAreaMarginMode
  • Gets or sets mode to use for automatically calculating the plot area margin.

    Returns ComputedPlotAreaMarginMode

  • set computedPlotAreaMarginMode(v): void
  • Parameters

    Returns void

  • get crosshairsAnnotationEnabled(): boolean
  • Gets or sets whether annotations are shown along the axis for crosshair values

    Returns boolean

  • set crosshairsAnnotationEnabled(v): void
  • Parameters

    • v: boolean

    Returns void

  • get crosshairsAnnotationXAxisBackground(): string
  • Gets or sets the background of crosshair annotation on x-axis.

    Returns string

  • set crosshairsAnnotationXAxisBackground(v): void
  • Parameters

    • v: string

    Returns void

  • get crosshairsAnnotationXAxisPrecision(): number
  • Gets or sets precision on interpolated values of crosshairs on x-axis.

    Returns number

  • set crosshairsAnnotationXAxisPrecision(v): void
  • Parameters

    • v: number

    Returns void

  • get crosshairsAnnotationXAxisTextColor(): string
  • Gets or sets the text color of crosshair annotation on x-axis.

    Returns string

  • set crosshairsAnnotationXAxisTextColor(v): void
  • Parameters

    • v: string

    Returns void

  • get crosshairsAnnotationYAxisBackground(): string
  • Gets or sets the background of crosshair annotation on y-axis.

    Returns string

  • set crosshairsAnnotationYAxisBackground(v): void
  • Parameters

    • v: string

    Returns void

  • get crosshairsAnnotationYAxisPrecision(): number
  • Gets or sets precision on interpolated values of crosshairs on y-axis.

    Returns number

  • set crosshairsAnnotationYAxisPrecision(v): void
  • Parameters

    • v: number

    Returns void

  • get crosshairsAnnotationYAxisTextColor(): string
  • Gets or sets the text color of crosshair annotation on y-axis.

    Returns string

  • set crosshairsAnnotationYAxisTextColor(v): void
  • Parameters

    • v: string

    Returns void

  • get crosshairsDisplayMode(): CrosshairsDisplayMode
  • Gets or sets the crosshairs to be displayed.

    Returns CrosshairsDisplayMode

  • set crosshairsDisplayMode(v): void
  • Parameters

    Returns void

  • get crosshairsLineHorizontalStroke(): string
  • Gets or sets the color to apply to horizontal crosshairs line.

    Returns string

  • set crosshairsLineHorizontalStroke(v): void
  • Parameters

    • v: string

    Returns void

  • get crosshairsLineThickness(): number
  • Gets or sets thickness of crosshairs lines.

    Returns number

  • set crosshairsLineThickness(v): void
  • Parameters

    • v: number

    Returns void

  • get crosshairsLineVerticalStroke(): string
  • Gets or sets the color to apply to vertical crosshairs line.

    Returns string

  • set crosshairsLineVerticalStroke(v): void
  • Parameters

    • v: string

    Returns void

  • get crosshairsSnapToData(): boolean
  • Gets or sets whether crosshairs will snap to the nearest data point.

    Returns boolean

  • set crosshairsSnapToData(v): void
  • Parameters

    • v: boolean

    Returns void

  • get dataToolTipBadgeMarginBottom(): number
  • Returns number

  • set dataToolTipBadgeMarginBottom(v): void
  • Parameters

    • v: number

    Returns void

  • get dataToolTipBadgeMarginLeft(): number
  • Returns number

  • set dataToolTipBadgeMarginLeft(v): void
  • Parameters

    • v: number

    Returns void

  • get dataToolTipBadgeMarginRight(): number
  • Returns number

  • set dataToolTipBadgeMarginRight(v): void
  • Parameters

    • v: number

    Returns void

  • get dataToolTipBadgeMarginTop(): number
  • Returns number

  • set dataToolTipBadgeMarginTop(v): void
  • Parameters

    • v: number

    Returns void

  • get dataToolTipBadgeShape(): LegendItemBadgeShape
  • Gets or sets the BadgeShape for the data legend.

    Returns LegendItemBadgeShape

  • set dataToolTipBadgeShape(v): void
  • Parameters

    • v: LegendItemBadgeShape

    Returns void

  • get dataToolTipDefaultPositionOffsetX(): number
  • Gets or sets the offset of the tooltip layer on the X axis.

    Returns number

  • set dataToolTipDefaultPositionOffsetX(v): void
  • Parameters

    • v: number

    Returns void

  • get dataToolTipDefaultPositionOffsetY(): number
  • Gets or sets the offset of the tooltip layer on the Y axis.

    Returns number

  • set dataToolTipDefaultPositionOffsetY(v): void
  • Parameters

    • v: number

    Returns void

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

    Returns string[]

  • set dataToolTipExcludedColumns(v): void
  • Parameters

    • v: string[]

    Returns void

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

    Returns string[]

  • set dataToolTipExcludedSeries(v): void
  • Parameters

    • v: string[]

    Returns void

  • get dataToolTipGroupedPositionModeX(): DataTooltipGroupedPositionX
  • Gets or sets the tooltip position mode on the X axis for grouped series.

    Returns DataTooltipGroupedPositionX

  • set dataToolTipGroupedPositionModeX(v): void
  • Parameters

    • v: DataTooltipGroupedPositionX

    Returns void

  • get dataToolTipGroupedPositionModeY(): DataTooltipGroupedPositionY
  • Gets or sets the tooltip position mode on the Y axis for grouped series.

    Returns DataTooltipGroupedPositionY

  • set dataToolTipGroupedPositionModeY(v): void
  • Parameters

    • v: DataTooltipGroupedPositionY

    Returns void

  • get dataToolTipGroupingMode(): DataToolTipLayerGroupingMode
  • Returns DataToolTipLayerGroupingMode

  • set dataToolTipGroupingMode(v): void
  • Parameters

    • v: DataToolTipLayerGroupingMode

    Returns void

  • get dataToolTipHeaderFormatCulture(): string
  • Gets or sets globalization culture when displaying header as date time This property is ignored when setting HeaderFormatSpecifiers or HeaderFormatString properties

    Returns string

  • set dataToolTipHeaderFormatCulture(v): void
  • Parameters

    • v: string

    Returns void

  • get dataToolTipHeaderFormatDate(): DataLegendHeaderDateMode
  • Gets or sets date format for the header This property is ignored when setting HeaderFormatSpecifiers or HeaderFormatString properties

    Returns DataLegendHeaderDateMode

  • set dataToolTipHeaderFormatDate(v): void
  • Parameters

    • v: DataLegendHeaderDateMode

    Returns void

  • get dataToolTipHeaderFormatSpecifiers(): any[]
  • Gets or sets the format specifiers to use with the HeaderFormatString string.

    Returns any[]

  • set dataToolTipHeaderFormatSpecifiers(v): void
  • Parameters

    • v: any[]

    Returns void

  • get dataToolTipHeaderFormatString(): string
  • Gets or sets the format string for header text displayed in the data legend.

    Returns string

  • set dataToolTipHeaderFormatString(v): void
  • Parameters

    • v: string

    Returns void

  • get dataToolTipHeaderFormatTime(): DataLegendHeaderTimeMode
  • Gets or sets time format for the header This property is ignored when setting HeaderFormatSpecifiers or HeaderFormatString properties

    Returns DataLegendHeaderTimeMode

  • set dataToolTipHeaderFormatTime(v): void
  • Parameters

    • v: DataLegendHeaderTimeMode

    Returns void

  • get dataToolTipHeaderRowMarginBottom(): number
  • Returns number

  • set dataToolTipHeaderRowMarginBottom(v): void
  • Parameters

    • v: number

    Returns void

  • get dataToolTipHeaderRowMarginLeft(): number
  • Returns number

  • set dataToolTipHeaderRowMarginLeft(v): void
  • Parameters

    • v: number

    Returns void

  • get dataToolTipHeaderRowMarginRight(): number
  • Returns number

  • set dataToolTipHeaderRowMarginRight(v): void
  • Parameters

    • v: number

    Returns void

  • get dataToolTipHeaderRowMarginTop(): number
  • Returns number

  • set dataToolTipHeaderRowMarginTop(v): void
  • Parameters

    • v: number

    Returns void

  • get dataToolTipHeaderRowVisible(): boolean
  • Gets or sets whether to show Header row.

    Returns boolean

  • set dataToolTipHeaderRowVisible(v): void
  • Parameters

    • v: boolean

    Returns void

  • get dataToolTipHeaderText(): string
  • Gets or sets the HeaderText for the data legend.

    Returns string

  • set dataToolTipHeaderText(v): void
  • Parameters

    • v: string

    Returns void

  • get dataToolTipHeaderTextColor(): string
  • Gets or sets the header text color.

    Returns string

  • set dataToolTipHeaderTextColor(v): void
  • Parameters

    • v: string

    Returns void

  • get dataToolTipHeaderTextMarginBottom(): number
  • Returns number

  • set dataToolTipHeaderTextMarginBottom(v): void
  • Parameters

    • v: number

    Returns void

  • get dataToolTipHeaderTextMarginLeft(): number
  • Returns number

  • set dataToolTipHeaderTextMarginLeft(v): void
  • Parameters

    • v: number

    Returns void

  • get dataToolTipHeaderTextMarginRight(): number
  • Returns number

  • set dataToolTipHeaderTextMarginRight(v): void
  • Parameters

    • v: number

    Returns void

  • get dataToolTipHeaderTextMarginTop(): number
  • Returns number

  • set dataToolTipHeaderTextMarginTop(v): void
  • Parameters

    • v: number

    Returns void

  • get dataToolTipHeaderTextStyle(): string
  • Gets or Sets the style to use for the header text.

    Returns string

  • set dataToolTipHeaderTextStyle(v): void
  • Parameters

    • v: string

    Returns void

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

    Returns string[]

  • set dataToolTipIncludedColumns(v): void
  • Parameters

    • v: string[]

    Returns void

  • get dataToolTipIncludedSeries(): string[]
  • Gets or sets indexes or names of series to include in displaying in the data legend, e.g. "0, 1"

    Returns string[]

  • set dataToolTipIncludedSeries(v): void
  • Parameters

    • v: string[]

    Returns void

  • get dataToolTipLabelDisplayMode(): 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

    Returns DataLegendLabelMode

  • set dataToolTipLabelDisplayMode(v): void
  • Parameters

    • v: DataLegendLabelMode

    Returns void

  • get dataToolTipLabelTextColor(): string
  • Gets or sets the units text color.

    Returns string

  • set dataToolTipLabelTextColor(v): void
  • Parameters

    • v: string

    Returns void

  • get dataToolTipLabelTextMarginBottom(): number
  • Returns number

  • set dataToolTipLabelTextMarginBottom(v): void
  • Parameters

    • v: number

    Returns void

  • get dataToolTipLabelTextMarginLeft(): number
  • Returns number

  • set dataToolTipLabelTextMarginLeft(v): void
  • Parameters

    • v: number

    Returns void

  • get dataToolTipLabelTextMarginRight(): number
  • Returns number

  • set dataToolTipLabelTextMarginRight(v): void
  • Parameters

    • v: number

    Returns void

  • get dataToolTipLabelTextMarginTop(): number
  • Returns number

  • set dataToolTipLabelTextMarginTop(v): void
  • Parameters

    • v: number

    Returns void

  • get dataToolTipLabelTextStyle(): string
  • Gets or Sets the style to use for the units text.

    Returns string

  • set dataToolTipLabelTextStyle(v): void
  • Parameters

    • v: string

    Returns void

  • get dataToolTipPositionOffsetX(): number
  • Gets or sets the offset of the tooltip layer on the X axis.

    Returns number

  • set dataToolTipPositionOffsetX(v): void
  • Parameters

    • v: number

    Returns void

  • get dataToolTipPositionOffsetY(): number
  • Gets or sets the offset of the tooltip layer on the Y axis.

    Returns number

  • set dataToolTipPositionOffsetY(v): void
  • Parameters

    • v: number

    Returns void

  • get dataToolTipShouldUpdateWhenSeriesDataChanges(): boolean
  • Gets or sets whether the data legend should update when the series data is mutated.

    Returns boolean

  • set dataToolTipShouldUpdateWhenSeriesDataChanges(v): void
  • Parameters

    • v: boolean

    Returns void

  • get dataToolTipSummaryLabelText(): string
  • Gets or sets the units text for the data legend.

    Returns string

  • set dataToolTipSummaryLabelText(v): void
  • Parameters

    • v: string

    Returns void

  • get dataToolTipSummaryLabelTextColor(): string
  • Gets or sets the units text color.

    Returns string

  • set dataToolTipSummaryLabelTextColor(v): void
  • Parameters

    • v: string

    Returns void

  • get dataToolTipSummaryLabelTextStyle(): string
  • Gets or Sets the style to use for the units text.

    Returns string

  • set dataToolTipSummaryLabelTextStyle(v): void
  • Parameters

    • v: string

    Returns void

  • get dataToolTipSummaryRowMarginBottom(): number
  • Returns number

  • set dataToolTipSummaryRowMarginBottom(v): void
  • Parameters

    • v: number

    Returns void

  • get dataToolTipSummaryRowMarginLeft(): number
  • Returns number

  • set dataToolTipSummaryRowMarginLeft(v): void
  • Parameters

    • v: number

    Returns void

  • get dataToolTipSummaryRowMarginRight(): number
  • Returns number

  • set dataToolTipSummaryRowMarginRight(v): void
  • Parameters

    • v: number

    Returns void

  • get dataToolTipSummaryRowMarginTop(): number
  • Returns number

  • set dataToolTipSummaryRowMarginTop(v): void
  • Parameters

    • v: number

    Returns void

  • get dataToolTipSummaryTitleText(): string
  • Gets or sets the SummaryTitleText for the data legend.

    Returns string

  • set dataToolTipSummaryTitleText(v): void
  • Parameters

    • v: string

    Returns void

  • get dataToolTipSummaryTitleTextColor(): string
  • Gets or sets the summary text color.

    Returns string

  • set dataToolTipSummaryTitleTextColor(v): void
  • Parameters

    • v: string

    Returns void

  • get dataToolTipSummaryTitleTextMarginBottom(): number
  • Returns number

  • set dataToolTipSummaryTitleTextMarginBottom(v): void
  • Parameters

    • v: number

    Returns void

  • get dataToolTipSummaryTitleTextMarginLeft(): number
  • Returns number

  • set dataToolTipSummaryTitleTextMarginLeft(v): void
  • Parameters

    • v: number

    Returns void

  • get dataToolTipSummaryTitleTextMarginRight(): number
  • Returns number

  • set dataToolTipSummaryTitleTextMarginRight(v): void
  • Parameters

    • v: number

    Returns void

  • get dataToolTipSummaryTitleTextMarginTop(): number
  • Returns number

  • set dataToolTipSummaryTitleTextMarginTop(v): void
  • Parameters

    • v: number

    Returns void

  • get dataToolTipSummaryTitleTextStyle(): string
  • Gets or Sets the style to use for the summary text.

    Returns string

  • set dataToolTipSummaryTitleTextStyle(v): void
  • Parameters

    • v: string

    Returns void

  • get dataToolTipSummaryType(): DataLegendSummaryType
  • Gets or sets the SummaryType for the data legend.

    Returns DataLegendSummaryType

  • set dataToolTipSummaryType(v): void
  • Parameters

    • v: DataLegendSummaryType

    Returns void

  • get dataToolTipSummaryUnitsText(): string
  • Gets or sets the units text for the data legend.

    Returns string

  • set dataToolTipSummaryUnitsText(v): void
  • Parameters

    • v: string

    Returns void

  • get dataToolTipSummaryUnitsTextColor(): string
  • Gets or sets the units text color.

    Returns string

  • set dataToolTipSummaryUnitsTextColor(v): void
  • Parameters

    • v: string

    Returns void

  • get dataToolTipSummaryUnitsTextStyle(): string
  • Gets or Sets the style to use for the units text.

    Returns string

  • set dataToolTipSummaryUnitsTextStyle(v): void
  • Parameters

    • v: string

    Returns void

  • get dataToolTipSummaryValueTextColor(): string
  • Gets or sets the units text color.

    Returns string

  • set dataToolTipSummaryValueTextColor(v): void
  • Parameters

    • v: string

    Returns void

  • get dataToolTipSummaryValueTextStyle(): string
  • Gets or Sets the style to use for the units text.

    Returns string

  • set dataToolTipSummaryValueTextStyle(v): void
  • Parameters

    • v: string

    Returns void

  • get dataToolTipTitleTextColor(): string
  • Gets or sets the display text color.

    Returns string

  • set dataToolTipTitleTextColor(v): void
  • Parameters

    • v: string

    Returns void

  • get dataToolTipTitleTextMarginBottom(): number
  • Returns number

  • set dataToolTipTitleTextMarginBottom(v): void
  • Parameters

    • v: number

    Returns void

  • get dataToolTipTitleTextMarginLeft(): number
  • Returns number

  • set dataToolTipTitleTextMarginLeft(v): void
  • Parameters

    • v: number

    Returns void

  • get dataToolTipTitleTextMarginRight(): number
  • Returns number

  • set dataToolTipTitleTextMarginRight(v): void
  • Parameters

    • v: number

    Returns void

  • get dataToolTipTitleTextMarginTop(): number
  • Returns number

  • set dataToolTipTitleTextMarginTop(v): void
  • Parameters

    • v: number

    Returns void

  • get dataToolTipTitleTextStyle(): string
  • Gets or Sets the style to use for the display text.

    Returns string

  • set dataToolTipTitleTextStyle(v): void
  • Parameters

    • v: string

    Returns void

  • get dataToolTipUnitsDisplayMode(): DataLegendUnitsMode
  • Gets or sets the UnitsMode for the data legend.

    Returns DataLegendUnitsMode

  • set dataToolTipUnitsDisplayMode(v): void
  • Parameters

    • v: DataLegendUnitsMode

    Returns void

  • get dataToolTipUnitsText(): string
  • Gets or sets the units text for the data legend.

    Returns string

  • set dataToolTipUnitsText(v): void
  • Parameters

    • v: string

    Returns void

  • get dataToolTipUnitsTextColor(): string
  • Gets or sets the units text color.

    Returns string

  • set dataToolTipUnitsTextColor(v): void
  • Parameters

    • v: string

    Returns void

  • get dataToolTipUnitsTextMarginBottom(): number
  • Returns number

  • set dataToolTipUnitsTextMarginBottom(v): void
  • Parameters

    • v: number

    Returns void

  • get dataToolTipUnitsTextMarginLeft(): number
  • Returns number

  • set dataToolTipUnitsTextMarginLeft(v): void
  • Parameters

    • v: number

    Returns void

  • get dataToolTipUnitsTextMarginRight(): number
  • Returns number

  • set dataToolTipUnitsTextMarginRight(v): void
  • Parameters

    • v: number

    Returns void

  • get dataToolTipUnitsTextMarginTop(): number
  • Returns number

  • set dataToolTipUnitsTextMarginTop(v): void
  • Parameters

    • v: number

    Returns void

  • get dataToolTipUnitsTextStyle(): string
  • Gets or Sets the style to use for the units text.

    Returns string

  • set dataToolTipUnitsTextStyle(v): void
  • Parameters

    • v: string

    Returns void

  • get dataToolTipValueFormatAbbreviation(): DataAbbreviationMode
  • Gets or sets mode for abbreviating large numbers displayed in the legend This property is ignored when setting ValueFormatSpecifiers or ValueFormatString properties

    Returns DataAbbreviationMode

  • set dataToolTipValueFormatAbbreviation(v): void
  • Parameters

    • v: DataAbbreviationMode

    Returns void

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

    Returns string

  • set dataToolTipValueFormatCulture(v): void
  • Parameters

    • v: string

    Returns void

  • get dataToolTipValueFormatMaxFractions(): number
  • Gets or sets maximum digits for formating numbers displayed in the legend This property is ignored when setting ValueFormatSpecifiers or ValueFormatString properties

    Returns number

  • set dataToolTipValueFormatMaxFractions(v): void
  • Parameters

    • v: number

    Returns void

  • get dataToolTipValueFormatMinFractions(): number
  • Gets or sets minimum digits for formating numbers displayed in the legend This property is ignored when setting ValueFormatSpecifiers or ValueFormatString properties

    Returns number

  • set dataToolTipValueFormatMinFractions(v): void
  • Parameters

    • v: number

    Returns void

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

    Returns DataLegendValueMode

  • set dataToolTipValueFormatMode(v): void
  • Parameters

    • v: DataLegendValueMode

    Returns void

  • get dataToolTipValueFormatSpecifiers(): any[]
  • Gets or sets the format specifiers to use with the ValueFormatString string.

    Returns any[]

  • set dataToolTipValueFormatSpecifiers(v): void
  • Parameters

    • v: any[]

    Returns void

  • get dataToolTipValueFormatString(): string
  • Gets or sets the format string for values displayed in the data legend.

    Returns string

  • set dataToolTipValueFormatString(v): void
  • Parameters

    • v: string

    Returns void

  • get dataToolTipValueFormatUseGrouping(): 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

    Returns boolean

  • set dataToolTipValueFormatUseGrouping(v): void
  • Parameters

    • v: boolean

    Returns void

  • get dataToolTipValueRowMarginBottom(): number
  • Returns number

  • set dataToolTipValueRowMarginBottom(v): void
  • Parameters

    • v: number

    Returns void

  • get dataToolTipValueRowMarginLeft(): number
  • Returns number

  • set dataToolTipValueRowMarginLeft(v): void
  • Parameters

    • v: number

    Returns void

  • get dataToolTipValueRowMarginRight(): number
  • Returns number

  • set dataToolTipValueRowMarginRight(v): void
  • Parameters

    • v: number

    Returns void

  • get dataToolTipValueRowMarginTop(): number
  • Returns number

  • set dataToolTipValueRowMarginTop(v): void
  • Parameters

    • v: number

    Returns void

  • get dataToolTipValueRowVisible(): boolean
  • Gets or sets whether to show series rows.

    Returns boolean

  • set dataToolTipValueRowVisible(v): void
  • Parameters

    • v: boolean

    Returns void

  • get dataToolTipValueTextColor(): string
  • Gets or sets the units text color.

    Returns string

  • set dataToolTipValueTextColor(v): void
  • Parameters

    • v: string

    Returns void

  • get dataToolTipValueTextMarginBottom(): number
  • Returns number

  • set dataToolTipValueTextMarginBottom(v): void
  • Parameters

    • v: number

    Returns void

  • get dataToolTipValueTextMarginLeft(): number
  • Returns number

  • set dataToolTipValueTextMarginLeft(v): void
  • Parameters

    • v: number

    Returns void

  • get dataToolTipValueTextMarginRight(): number
  • Returns number

  • set dataToolTipValueTextMarginRight(v): void
  • Parameters

    • v: number

    Returns void

  • get dataToolTipValueTextMarginTop(): number
  • Returns number

  • set dataToolTipValueTextMarginTop(v): void
  • Parameters

    • v: number

    Returns void

  • get dataToolTipValueTextStyle(): string
  • Gets or Sets the style to use for the units text.

    Returns string

  • set dataToolTipValueTextStyle(v): void
  • Parameters

    • v: string

    Returns void

  • get dataToolTipValueTextUseSeriesColors(): boolean
  • Gets or sets whether to use series colors when displaying values in the legend

    Returns boolean

  • set dataToolTipValueTextUseSeriesColors(v): void
  • Parameters

    • v: boolean

    Returns void

  • get dataToolTipValueTextWhenMissingData(): string
  • Gets or sets text displayed when data column is missing a value, e.g. "no data"

    Returns string

  • set dataToolTipValueTextWhenMissingData(v): void
  • Parameters

    • v: string

    Returns void

  • get domainType(): DomainType
  • Gets the domain type of this chart

    Returns DomainType

  • get 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" />

    Returns string[]

  • set excludedProperties(v): void
  • Parameters

    • v: string[]

    Returns void

  • get filterExpressions(): IgrFilterExpressionCollection
  • Gets the current filter that is applied to the chart. Collection can be updated to modify the filter for the chart. Once filter expresisons are in this collection, the chart will no longer listen for changes on their properties.

    Returns IgrFilterExpressionCollection

  • get finalValueAnnotationsBackground(): string
  • Gets or sets the background of final value annotation.

    Returns string

  • set finalValueAnnotationsBackground(v): void
  • Parameters

    • v: string

    Returns void

  • get finalValueAnnotationsPrecision(): number
  • Gets or sets precision on final value annotation.

    Returns number

  • set finalValueAnnotationsPrecision(v): void
  • Parameters

    • v: number

    Returns void

  • get finalValueAnnotationsTextColor(): string
  • Gets or sets the text color of final value annotation.

    Returns string

  • set finalValueAnnotationsTextColor(v): void
  • Parameters

    • v: string

    Returns void

  • get finalValueAnnotationsVisible(): boolean
  • Gets or sets whether annotations for the final value of each series is displayed on the axis.

    Returns boolean

  • set finalValueAnnotationsVisible(v): void
  • Parameters

    • v: boolean

    Returns void

  • get groupDescriptions(): IgrChartSortDescriptionCollection
  • Gets the current grouping that is applied to the grid. Collection can be updated to modify the grouping for the grid. Once grouping descriptions are in this collection, the grid will no longer listen for changes on their properties.

    Returns IgrChartSortDescriptionCollection

  • get groupSorts(): string
  • Gets or sets the sorts to apply after grouping has been applied.

    Returns string

  • set groupSorts(v): void
  • Parameters

    • v: string

    Returns void

  • get highlightFilterExpressions(): IgrFilterExpressionCollection
  • Gets the current highlight filter that is applied to the chart. Collection can be updated to modify the highlight filter for the chart. Once filter expresisons are in this collection, the chart will no longer listen for changes on their properties.

    Returns IgrFilterExpressionCollection

  • get highlightedValuesDisplayMode(): 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.

    Returns SeriesHighlightedValuesDisplayMode

  • set highlightedValuesDisplayMode(v): void
  • Parameters

    Returns void

  • get highlightingBehavior(): 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.

    Returns SeriesHighlightingBehavior

  • set highlightingBehavior(v): void
  • Parameters

    Returns void

  • get highlightingMode(): 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.

    Returns SeriesHighlightingMode

  • set highlightingMode(v): void
  • Parameters

    Returns void

  • get horizontalViewScrollbarCornerRadius(): number
  • Gets or sets the corner radius to use for the horizontal scrollbar in the component, when enabled.

    Returns number

  • set horizontalViewScrollbarCornerRadius(v): void
  • Parameters

    • v: number

    Returns void

  • get horizontalViewScrollbarFill(): string
  • Gets or sets the fill to use for the horizontal scrollbar in the component, when enabled.

    Returns string

  • set horizontalViewScrollbarFill(v): void
  • Parameters

    • v: string

    Returns void

  • get horizontalViewScrollbarHeight(): number
  • Gets or sets the height to use for the horizontal scrollbar in the component, when enabled.

    Returns number

  • set horizontalViewScrollbarHeight(v): void
  • Parameters

    • v: number

    Returns void

  • get horizontalViewScrollbarInset(): number
  • Gets or sets the inset distance to use for the horizontal scrollbar in the component, when enabled.

    Returns number

  • set horizontalViewScrollbarInset(v): void
  • Parameters

    • v: number

    Returns void

  • get horizontalViewScrollbarMaxOpacity(): number
  • Gets or sets the max opacity to use for the horizontal scrollbar in the component, when enabled.

    Returns number

  • set horizontalViewScrollbarMaxOpacity(v): void
  • Parameters

    • v: number

    Returns void

  • get horizontalViewScrollbarMode(): SeriesViewerScrollbarMode
  • Gets or sets the horizontal scrollbar mode to use for the series viewer.

    Returns SeriesViewerScrollbarMode

  • set horizontalViewScrollbarMode(v): void
  • Parameters

    Returns void

  • get horizontalViewScrollbarOutline(): string
  • Gets or sets the outline to use for the horizontal scrollbar in the component, when enabled.

    Returns string

  • set horizontalViewScrollbarOutline(v): void
  • Parameters

    • v: string

    Returns void

  • get horizontalViewScrollbarPosition(): SeriesViewerHorizontalScrollbarPosition
  • Gets or sets the position to use for the horizontal scrollbar in the component, when enabled.

    Returns SeriesViewerHorizontalScrollbarPosition

  • set horizontalViewScrollbarPosition(v): void
  • Parameters

    Returns void

  • get horizontalViewScrollbarShouldAddAutoTrackInsets(): boolean
  • Gets or sets whether to use automatic track insets for the horizontal scrollbar in the component, when enabled.

    Returns boolean

  • set horizontalViewScrollbarShouldAddAutoTrackInsets(v): void
  • Parameters

    • v: boolean

    Returns void

  • get horizontalViewScrollbarStrokeThickness(): number
  • Gets or sets the stroke thickness to use for the horizontal scrollbar in the component, when enabled.

    Returns number

  • set horizontalViewScrollbarStrokeThickness(v): void
  • Parameters

    • v: number

    Returns void

  • get horizontalViewScrollbarTrackEndInset(): number
  • Gets or sets the track end inset to use for the horizontal scrollbar in the component, when enabled.

    Returns number

  • set horizontalViewScrollbarTrackEndInset(v): void
  • Parameters

    • v: number

    Returns void

  • get horizontalViewScrollbarTrackStartInset(): number
  • Gets or sets the track start inset to use for the horizontal scrollbar in the component, when enabled.

    Returns number

  • set horizontalViewScrollbarTrackStartInset(v): void
  • Parameters

    • v: number

    Returns void

  • get 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" />

    Returns string[]

  • set includedProperties(v): void
  • Parameters

    • v: string[]

    Returns void

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

    Returns string

  • set initialFilter(v): void
  • Parameters

    • v: string

    Returns void

  • get initialFilterExpressions(): IgrFilterExpressionCollection
  • Gets the initial filters that are applied to the chart.

    Returns IgrFilterExpressionCollection

  • get initialGroupSortDescriptions(): IgrChartSortDescriptionCollection
  • Gets the initial sorts that are applied to the chart after groupings and summaries are applied.

    Returns IgrChartSortDescriptionCollection

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

    Returns string

  • set initialGroups(v): void
  • Parameters

    • v: string

    Returns void

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

    Returns string

  • set initialHighlightFilter(v): void
  • Parameters

    • v: string

    Returns void

  • get initialHighlightFilterExpressions(): IgrFilterExpressionCollection
  • Gets the initial highlight filters that are applied to the chart.

    Returns IgrFilterExpressionCollection

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

    Returns string

  • set initialSorts(v): void
  • Parameters

    • v: string

    Returns void

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

    Returns string

  • set initialSummaries(v): void
  • Parameters

    • v: string

    Returns void

  • get isDetached(): boolean
  • Returns boolean

  • get isHorizontalZoomEnabled(): 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;
    

    Returns boolean

  • set isHorizontalZoomEnabled(v): void
  • Parameters

    • v: boolean

    Returns void

  • get isSeriesHighlightingEnabled(): boolean
  • Gets or sets whether the chart can highlight series through user interactions. This property applies to Category Chart and Financial Chart controls.

    Returns boolean

  • set isSeriesHighlightingEnabled(v): void
  • Parameters

    • v: boolean

    Returns void

  • get isVerticalZoomEnabled(): 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"/>

    Returns boolean

  • set isVerticalZoomEnabled(v): void
  • Parameters

    • v: boolean

    Returns void

  • get leftMargin(): 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}/>

    Returns number

  • set leftMargin(v): void
  • Parameters

    • v: number

    Returns void

  • get legend(): any
  • Returns any

  • set legend(v): void
  • Parameters

    • v: any

    Returns void

  • get legendHighlightingMode(): LegendHighlightingMode
  • Gets or sets the highlighting mode to use for the legend linked to the component, when supported.

    Returns LegendHighlightingMode

  • set legendHighlightingMode(v): void
  • Parameters

    Returns void

  • get legendItemBadgeMode(): 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

    Returns LegendItemBadgeMode

  • set legendItemBadgeMode(v): void
  • Parameters

    • v: LegendItemBadgeMode

    Returns void

  • get legendItemBadgeShape(): 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

    Returns LegendItemBadgeShape

  • set legendItemBadgeShape(v): void
  • Parameters

    • v: LegendItemBadgeShape

    Returns void

  • get markerAutomaticBehavior(): 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

    Returns MarkerAutomaticBehavior

  • set markerAutomaticBehavior(v): void
  • Parameters

    Returns void

  • get markerBrushes(): 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}/>

    Returns string[]

  • set markerBrushes(v): void
  • Parameters

    • v: string[]

    Returns void

  • get markerFillMode(): MarkerFillMode
  • Gets or sets the MarkerFillMode for all series that support markers in this chart.

    Returns MarkerFillMode

  • set markerFillMode(v): void
  • Parameters

    Returns void

  • get markerFillOpacity(): number
  • Gets or sets the Marker Fill Opacity for all series that support markers in this chart.

    Returns number

  • set markerFillOpacity(v): void
  • Parameters

    • v: number

    Returns void

  • get markerMaxCount(): 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}/>

    Returns number

  • set markerMaxCount(v): void
  • Parameters

    • v: number

    Returns void

  • get markerOutlineMode(): MarkerOutlineMode
  • Gets or sets the MarkerOutlineMode for all series that support markers in this chart.

    Returns MarkerOutlineMode

  • set markerOutlineMode(v): void
  • Parameters

    Returns void

  • get markerOutlines(): 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}/>

    Returns string[]

  • set markerOutlines(v): void
  • Parameters

    • v: string[]

    Returns void

  • get markerThickness(): number
  • Gets or sets the Marker Thickness for all series that support markers in this chart.

    Returns number

  • set markerThickness(v): void
  • Parameters

    • v: number

    Returns void

  • get markerTypes(): 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

    Returns IgrMarkerTypeCollection

  • set markerTypes(v): void
  • Parameters

    Returns void

  • get outlineMode(): SeriesOutlineMode
  • Gets or sets the OutlineMode for all series in this chart.

    Returns SeriesOutlineMode

  • set outlineMode(v): void
  • Parameters

    Returns void

  • get outlines(): 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}/>

    Returns string[]

  • set outlines(v): void
  • Parameters

    • v: string[]

    Returns void

  • get pixelScalingRatio(): 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.

    Returns number

  • set pixelScalingRatio(v): void
  • Parameters

    • v: number

    Returns void

  • get plotAreaMarginBottom(): number
  • Margin applied below the plot area.

    Returns number

  • set plotAreaMarginBottom(v): void
  • Parameters

    • v: number

    Returns void

  • get plotAreaMarginLeft(): number
  • Margin applied to the Left of the plot area.

    Returns number

  • set plotAreaMarginLeft(v): void
  • Parameters

    • v: number

    Returns void

  • get plotAreaMarginRight(): number
  • Margin applied to the right of the plot area.

    Returns number

  • set plotAreaMarginRight(v): void
  • Parameters

    • v: number

    Returns void

  • get plotAreaMarginTop(): number
  • Margin applied to the Top of the plot area.

    Returns number

  • set plotAreaMarginTop(v): void
  • Parameters

    • v: number

    Returns void

  • get resolution(): 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}/>

    Returns number

  • set resolution(v): void
  • Parameters

    • v: number

    Returns void

  • get rightMargin(): 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}/>

    Returns number

  • set rightMargin(v): void
  • Parameters

    • v: number

    Returns void

  • get seriesAdded(): ((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)
    {
    }

    Returns ((s, e) => void)

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

  • set seriesAdded(ev): void
  • Parameters

    Returns void

  • get seriesPlotAreaMarginHorizontalMode(): SeriesPlotAreaMarginHorizontalMode
  • Gets or sets horizontal mode to use for automatically calculating the plot area margin based ont the series.

    Returns SeriesPlotAreaMarginHorizontalMode

  • set seriesPlotAreaMarginHorizontalMode(v): void
  • Parameters

    Returns void

  • get seriesPlotAreaMarginVerticalMode(): SeriesPlotAreaMarginVerticalMode
  • Gets or sets vertical mode to use for automatically calculating the plot area margin based ont the series.

    Returns SeriesPlotAreaMarginVerticalMode

  • set seriesPlotAreaMarginVerticalMode(v): void
  • Parameters

    Returns void

  • get seriesPointerDown(): ((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)
    {

    }

    Returns ((s, e) => void)

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

  • set seriesPointerDown(ev): void
  • Parameters

    Returns void

  • get seriesPointerEnter(): ((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)
    {

    }

    Returns ((s, e) => void)

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

  • set seriesPointerEnter(ev): void
  • Parameters

    Returns void

  • get seriesPointerLeave(): ((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)
    {

    }

    Returns ((s, e) => void)

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

  • set seriesPointerLeave(ev): void
  • Parameters

    Returns void

  • get seriesPointerMove(): ((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)
    {

    }

    Returns ((s, e) => void)

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

  • set seriesPointerMove(ev): void
  • Parameters

    Returns void

  • get seriesPointerUp(): ((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)
    {

    }

    Returns ((s, e) => void)

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

  • set seriesPointerUp(ev): void
  • Parameters

    Returns void

  • get seriesRemoved(): ((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)
    {

    }

    Returns ((s, e) => void)

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

  • set seriesRemoved(ev): void
  • Parameters

    Returns void

  • get shouldAvoidAxisAnnotationCollisions(): boolean
  • Gets or sets whether annotations for the final value of each series is displayed on the axis.

    Returns boolean

  • set shouldAvoidAxisAnnotationCollisions(v): void
  • Parameters

    • v: boolean

    Returns void

  • get shouldDisplayMockData(): 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.

    Returns boolean

  • set shouldDisplayMockData(v): void
  • Parameters

    • v: boolean

    Returns void

  • get shouldPanOnMaximumZoom(): boolean
  • Gets or sets a whether the chart should pan its content when zooing in passed max zoom level.

    Returns boolean

  • set shouldPanOnMaximumZoom(v): void
  • Parameters

    • v: boolean

    Returns void

  • get shouldUseSkeletonStyleForMockData(): boolean
  • Gets or sets whether the chart should use a faded skeleton style for mock data.

    Returns boolean

  • set shouldUseSkeletonStyleForMockData(v): void
  • Parameters

    • v: boolean

    Returns void

  • get sortDescriptions(): IgrChartSortDescriptionCollection
  • Gets the current sort that is applied to the grid. Collection can be updated to modify the sort for the grid. Once sort descriptions are in this collection, the grid will no longer listen for changes on their properties.

    Returns IgrChartSortDescriptionCollection

  • get 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" ;
    

    Returns string

  • set subtitle(v): void
  • Parameters

    • v: string

    Returns void

  • get subtitleAlignment(): 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;
    

    Returns HorizontalAlignment

  • set subtitleAlignment(v): void
  • Parameters

    • v: HorizontalAlignment

    Returns void

  • get subtitleBottomMargin(): 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 ;
    

    Returns number

  • set subtitleBottomMargin(v): void
  • Parameters

    • v: number

    Returns void

  • get subtitleLeftMargin(): 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}/>

    Returns number

  • set subtitleLeftMargin(v): void
  • Parameters

    • v: number

    Returns void

  • get subtitleRightMargin(): 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}/>

    Returns number

  • set subtitleRightMargin(v): void
  • Parameters

    • v: number

    Returns void

  • get 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"/>

    Returns string

  • set subtitleTextColor(v): void
  • Parameters

    • v: string

    Returns void

  • get 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"/>

    Returns string

  • set subtitleTextStyle(v): void
  • Parameters

    • v: string

    Returns void

  • get subtitleTopMargin(): 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}/>

    Returns number

  • set subtitleTopMargin(v): void
  • Parameters

    • v: number

    Returns void

  • get thickness(): 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.

    Returns number

  • set thickness(v): void
  • Parameters

    • v: number

    Returns void

  • get titleAlignment(): 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"/>

    Returns HorizontalAlignment

  • set titleAlignment(v): void
  • Parameters

    • v: HorizontalAlignment

    Returns void

  • get titleBottomMargin(): 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}/>

    Returns number

  • set titleBottomMargin(v): void
  • Parameters

    • v: number

    Returns void

  • get titleLeftMargin(): 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>

    Returns number

  • set titleLeftMargin(v): void
  • Parameters

    • v: number

    Returns void

  • get titleRightMargin(): 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>

    Returns number

  • set titleRightMargin(v): void
  • Parameters

    • v: number

    Returns void

  • get 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" />

    Returns string

  • set titleTextColor(v): void
  • Parameters

    • v: string

    Returns void

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

    Returns string

  • set titleTextStyle(v): void
  • Parameters

    • v: string

    Returns void

  • get titleTopMargin(): 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} />

    Returns number

  • set titleTopMargin(v): void
  • Parameters

    • v: number

    Returns void

  • get toolTipType(): ToolTipType
  • Gets or sets the style of tooltip to be displayed.

    Returns ToolTipType

  • set toolTipType(v): void
  • Parameters

    Returns void

  • get tooltipTemplate(): FunctionComponent<IChartTooltipProps> | Component<IChartTooltipProps, {}, any>
  • Sets or gets the template reference to use for tooltips for all the series.

    Returns FunctionComponent<IChartTooltipProps> | Component<IChartTooltipProps, {}, any>

  • set tooltipTemplate(v): void
  • Parameters

    • v: FunctionComponent<IChartTooltipProps> | Component<IChartTooltipProps, {}, any>

    Returns void

  • get tooltipTemplates(): (FunctionComponent<IChartTooltipProps> | Component<IChartTooltipProps, {}, any>)[]
  • Sets or gets the template references to use for tooltips for all the series, in order.

    Returns (FunctionComponent<IChartTooltipProps> | Component<IChartTooltipProps, {}, any>)[]

  • set tooltipTemplates(v): void
  • Parameters

    • v: (FunctionComponent<IChartTooltipProps> | Component<IChartTooltipProps, {}, any>)[]

    Returns void

  • get topMargin(): 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} />

    Returns number

  • set topMargin(v): void
  • Parameters

    • v: number

    Returns void

  • get transitionDuration(): 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} />

    Returns number

  • set transitionDuration(v): void
  • Parameters

    • v: number

    Returns void

  • get transitionEasingFunction(): ((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" />

    Returns ((time) => number)

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

  • set transitionEasingFunction(v): void
  • Parameters

    • v: ((time) => number)
        • (time): number
        • Parameters

          • time: number

          Returns number

    Returns void

  • get trendLineBrushes(): 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" />

    Returns string[]

  • set trendLineBrushes(v): void
  • Parameters

    • v: string[]

    Returns void

  • get trendLinePeriod(): number
  • Returns number

  • set trendLinePeriod(v): void
  • Parameters

    • v: number

    Returns void

  • get trendLineThickness(): 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} />

    Returns number

  • set trendLineThickness(v): void
  • Parameters

    • v: number

    Returns void

  • get trendLineType(): 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" />

    Returns TrendLineType

  • set trendLineType(v): void
  • Parameters

    • v: TrendLineType

    Returns void

  • get unknownValuePlotting(): 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" />

    Returns UnknownValuePlotting

  • set unknownValuePlotting(v): void
  • Parameters

    • v: UnknownValuePlotting

    Returns void

  • get valueLines(): IgrValueModeCollection
  • Gets or sets what value lines to use in the chart.

    Returns IgrValueModeCollection

  • set valueLines(v): void
  • Parameters

    Returns void

  • get valueLinesBrushes(): 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

    Returns string[]

  • set valueLinesBrushes(v): void
  • Parameters

    • v: string[]

    Returns void

  • get valueLinesThickness(): number
  • Gets or sets thickness of value lines.

    Returns number

  • set valueLinesThickness(v): void
  • Parameters

    • v: number

    Returns void

  • get verticalViewScrollbarCornerRadius(): number
  • Gets or sets the corner radius to use for the vertical scrollbar in the component, when enabled.

    Returns number

  • set verticalViewScrollbarCornerRadius(v): void
  • Parameters

    • v: number

    Returns void

  • get verticalViewScrollbarFill(): string
  • Gets or sets the fill to use for the vertical scrollbar in the component, when enabled.

    Returns string

  • set verticalViewScrollbarFill(v): void
  • Parameters

    • v: string

    Returns void

  • get verticalViewScrollbarInset(): number
  • Gets or sets the inset distance to use for the vertical scrollbar in the component, when enabled.

    Returns number

  • set verticalViewScrollbarInset(v): void
  • Parameters

    • v: number

    Returns void

  • get verticalViewScrollbarMaxOpacity(): number
  • Gets or sets the max opacity to use for the vertical scrollbar in the component, when enabled.

    Returns number

  • set verticalViewScrollbarMaxOpacity(v): void
  • Parameters

    • v: number

    Returns void

  • get verticalViewScrollbarMode(): SeriesViewerScrollbarMode
  • Gets or sets the vertical scrollbar mode to use for the series viewer.

    Returns SeriesViewerScrollbarMode

  • set verticalViewScrollbarMode(v): void
  • Parameters

    Returns void

  • get verticalViewScrollbarOutline(): string
  • Gets or sets the outline to use for the vertical scrollbar in the component, when enabled.

    Returns string

  • set verticalViewScrollbarOutline(v): void
  • Parameters

    • v: string

    Returns void

  • get verticalViewScrollbarPosition(): SeriesViewerVerticalScrollbarPosition
  • Gets or sets the position to use for the vertical scrollbar in the component, when enabled.

    Returns SeriesViewerVerticalScrollbarPosition

  • set verticalViewScrollbarPosition(v): void
  • Parameters

    Returns void

  • get verticalViewScrollbarShouldAddAutoTrackInsets(): boolean
  • Gets or sets whether to use automatic track insets for the vertical scrollbar in the component, when enabled.

    Returns boolean

  • set verticalViewScrollbarShouldAddAutoTrackInsets(v): void
  • Parameters

    • v: boolean

    Returns void

  • get verticalViewScrollbarStrokeThickness(): number
  • Gets or sets the stroke thickness to use for the vertical scrollbar in the component, when enabled.

    Returns number

  • set verticalViewScrollbarStrokeThickness(v): void
  • Parameters

    • v: number

    Returns void

  • get verticalViewScrollbarTrackEndInset(): number
  • Gets or sets the track end inset to use for the vertical scrollbar in the component, when enabled.

    Returns number

  • set verticalViewScrollbarTrackEndInset(v): void
  • Parameters

    • v: number

    Returns void

  • get verticalViewScrollbarTrackStartInset(): number
  • Gets or sets the track start inset to use for the vertical scrollbar in the component, when enabled.

    Returns number

  • set verticalViewScrollbarTrackStartInset(v): void
  • Parameters

    • v: number

    Returns void

  • get verticalViewScrollbarWidth(): number
  • Gets or sets the width to use for the vertical scrollbar in the component, when enabled.

    Returns number

  • set verticalViewScrollbarWidth(v): void
  • Parameters

    • v: number

    Returns void

  • get viewport(): IgRect
  • Gets a rectangle representing the bounds of the plot area.

    viewport property representing the bounds of the plot area.

    let viewport:Rect =  this.chart.viewport;
    

    Returns IgRect

  • get windowRect(): 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} />

    Returns IgRect

  • set windowRect(v): void
  • Parameters

    • v: IgRect

    Returns void

  • get windowRectMinHeight(): 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)

    Returns number

  • set windowRectMinHeight(v): void
  • Parameters

    • v: number

    Returns void

  • get windowRectMinWidth(): 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)

    Returns number

  • set windowRectMinWidth(v): void
  • Parameters

    • v: number

    Returns void

  • get windowSizeMinHeight(): 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

    Returns number

  • set windowSizeMinHeight(v): void
  • Parameters

    • v: number

    Returns void

  • get windowSizeMinWidth(): 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

    Returns number

  • set windowSizeMinWidth(v): void
  • Parameters

    • v: number

    Returns void

  • get xAxisExtent(): number
  • Gets or sets the distance between the X-axis and the bottom of the chart.

    To allocate space between the x-axis and the edge of the chart, set the XAxisExtent property.

    this.chart.xAxisExtent="250";
    
    <IgrCategoryChart
    xAxisExtent ={250}
    dataSource={this.state.data}
    chartType="stepArea" >
    </IgrCategoryChart>

    Returns number

  • set xAxisExtent(v): void
  • Parameters

    • v: number

    Returns void

  • get xAxisFormatLabel(): ((item) => string)
  • Gets or sets function which takes an context object and returns a formatted label for the X-axis.

    To customize the text of the x-axis label, set XAxisFormatLabel to a single-parameter function. The argument passed to that function will be your data item.

    formatX(item: any): string {
    return "[ " + item.label + "! ]";
    }
    <IgrCategoryChart
    xAxisFormatLabel="formatX"
    dataSource={this.state.data}
    chartType="stepArea" >
    </IgrCategoryChart>

    Returns ((item) => string)

      • (item): string
      • Gets or sets function which takes an context object and returns a formatted label for the X-axis.

        To customize the text of the x-axis label, set XAxisFormatLabel to a single-parameter function. The argument passed to that function will be your data item.

        formatX(item: any): string {
        return "[ " + item.label + "! ]";
        }
        <IgrCategoryChart
        xAxisFormatLabel="formatX"
        dataSource={this.state.data}
        chartType="stepArea" >
        </IgrCategoryChart>

        Parameters

        • item: any

        Returns string

  • set xAxisFormatLabel(v): void
  • Parameters

    • v: ((item) => string)
        • (item): string
        • Parameters

          • item: any

          Returns string

    Returns void

  • get xAxisInverted(): boolean
  • Gets or sets whether to invert the direction of the X-axis by placing the first data items on the right side of the chart.

    To reverse the direction of items along the x-axis, set the XAxisInverted property to true.

    this.chart.XAxisInverted="True";
    
    <IgrCategoryChart
    XAxisInverted="True"
    dataSource={this.state.data}
    chartType="stepArea" >
    </IgrCategoryChart>

    Returns boolean

  • set xAxisInverted(v): void
  • Parameters

    • v: boolean

    Returns void

  • get xAxisLabel(): any
  • Gets or sets the format for labels along the X-axis.

    Returns any

  • set xAxisLabel(v): void
  • Parameters

    • v: any

    Returns void

  • get xAxisLabelAngle(): number
  • Gets or sets the angle of rotation for labels along the X-axis.

    To control the rotation of labels on the x-axis, set the XAxisLabelAngle property to a number of rotational degrees.

    this.chart.xAxisLabelAngle="45";
    
    <IgrCategoryChart
    xAxisLabelAngle={45}
    dataSource={this.state.data}
    chartType="stepArea" >
    </IgrCategoryChart>

    Returns number

  • set xAxisLabelAngle(v): void
  • Parameters

    • v: number

    Returns void

  • get xAxisLabelBottomMargin(): number
  • Gets or sets the bottom margin of labels on the X-axis

    Use the XAxisLabelBottomMargin property to apply a margin below the x-axis labels.

    this.chart.xAxisLabelBottomMargin ="100";
    
    <IgrCategoryChart
    xAxisLabelBottomMargin={100}
    dataSource={this.state.data}
    chartType="stepArea" >
    </IgrCategoryChart>

    Returns number

  • set xAxisLabelBottomMargin(v): void
  • Parameters

    • v: number

    Returns void

  • get xAxisLabelFormat(): string
  • Gets or sets the format string for the X axis label.

    Returns string

  • set xAxisLabelFormat(v): void
  • Parameters

    • v: string

    Returns void

  • get xAxisLabelFormatSpecifiers(): any[]
  • Gets or sets the format specifiers to use with the XAxisLabelFormat string.

    Returns any[]

  • set xAxisLabelFormatSpecifiers(v): void
  • Parameters

    • v: any[]

    Returns void

  • get xAxisLabelHorizontalAlignment(): HorizontalAlignment
  • Gets or sets Horizontal alignment of X-axis labels.

    Returns HorizontalAlignment

  • set xAxisLabelHorizontalAlignment(v): void
  • Parameters

    • v: HorizontalAlignment

    Returns void

  • get xAxisLabelLeftMargin(): number
  • Gets or sets the left margin of labels on the X-axis

    Use the XAxisLabelLeftMargin property to apply a margin left of the x-axis labels.

    this.chart.xAxisLabelLeftMargin ="100";
    
    <IgrCategoryChart
    xAxisLabelLeftMargin={100}
    dataSource={this.state.data}
    chartType="stepArea" >
    </IgrCategoryChart>

    Returns number

  • set xAxisLabelLeftMargin(v): void
  • Parameters

    • v: number

    Returns void

  • get xAxisLabelLocation(): XAxisLabelLocation
  • Gets or sets location of X-axis labels, relative to the plot area.

    Returns XAxisLabelLocation

  • set xAxisLabelLocation(v): void
  • Parameters

    Returns void

  • get xAxisLabelRightMargin(): number
  • Gets or sets the right margin of labels on the X-axis

    Use the XAxisLabelRightMargin property to apply a margin right of the x-axis labels.

    this.chart.xAxisLabelRightMargin="100";
    
    <IgrCategoryChart
    xAxisLabelRightMargin={250}
    dataSource={this.state.data}
    chartType="stepArea" >
    </IgrCategoryChart>

    Returns number

  • set xAxisLabelRightMargin(v): void
  • Parameters

    • v: number

    Returns void

  • get xAxisLabelTextColor(): string
  • Gets or sets color of labels on the X-axis

    To change the color of x-axis labels, set the XAxisLabelTextColor property to a color string.

    this.chart.xAxisLabelTextColor="green";
    
    <IgrCategoryChart
    xAxisLabelTextColor="green"
    dataSource={this.state.data}
    chartType="stepArea" >
    </IgrCategoryChart>

    Returns string

  • set xAxisLabelTextColor(v): void
  • Parameters

    • v: string

    Returns void

  • get xAxisLabelTextStyle(): string
  • Gets or sets CSS font property for labels on X-axis

    To change the font of x-axis labels, set the XAxisLabelTextStyle property.

    this.chart.xAxisLabelTextStyle="italic 15px arial, sans-serif";
    
    <IgrCategoryChart
    xAxisLabelTextStyle="italic 15px arial, sans-serif"
    dataSource={this.state.data}
    chartType="stepArea" >
    </IgrCategoryChart>

    Returns string

  • set xAxisLabelTextStyle(v): void
  • Parameters

    • v: string

    Returns void

  • get xAxisLabelTopMargin(): number
  • Gets or sets the top margin of labels on the X-axis

    Use the XAxisLabelTopMargin property to apply a margin above the x-axis labels.

    this.chart.xAxisTitleTopMargin="250";
    
    <IgrCategoryChart
    xAxisTitleTopMargin ={250}
    dataSource={this.state.data}
    chartType="stepArea" >
    </IgrCategoryChart>

    Returns number

  • set xAxisLabelTopMargin(v): void
  • Parameters

    • v: number

    Returns void

  • get xAxisLabelVerticalAlignment(): VerticalAlignment
  • Gets or sets Vertical alignment of X-axis labels.

    Use the XAxisLabelVerticalAlignment property to change the vertical position of x-axis labels.

    this.chart.xAxisLabelVerticalAlignment="bottom";
    
    <IgrCategoryChart
    xAxisLabelVerticalAlignment="bottom"
    dataSource={this.state.data}
    chartType="stepArea" >
    </IgrCategoryChart>

    Returns VerticalAlignment

  • set xAxisLabelVerticalAlignment(v): void
  • Parameters

    • v: VerticalAlignment

    Returns void

  • get xAxisLabelVisibility(): Visibility
  • Gets or sets Visibility of X-axis labels.

    To hide the x-axis labels, set XAxisLabelVisibility to collapsed.

    this.chart.xAxisLabelVisibility="collapsed";
    
    <IgrCategoryChart
    xAxisLabelVisibility="collapsed"
    dataSource={this.state.data}>
    </IgrCategoryChart>

    Returns Visibility

  • set xAxisLabelVisibility(v): void
  • Parameters

    • v: Visibility

    Returns void

  • get xAxisMajorStroke(): string
  • Gets or sets the color to apply to major gridlines along the X-axis.

    Set XAxisMajorStroke to control the color of major gridlines extending vertically from the x-axis.

    this.chart.xAxisMajorStroke="green";
    
    <IgrCategoryChart
    xAxisMajorStroke="green"
    dataSource={this.state.data} >
    </IgrCategoryChart>

    Returns string

  • set xAxisMajorStroke(v): void
  • Parameters

    • v: string

    Returns void

  • get xAxisMajorStrokeThickness(): number
  • Gets or sets the thickness to apply to major gridlines along the X-axis.

    Set XAxisMajorStrokeThickness to control the thickness of major gridlines extending vertically from the x-axis.

    this.chart.xAxisMajorStrokeThickness="3" ;
    
    <IgrCategoryChart
    xAxisMajorStrokeThickness="3"
    xAxisExtent ={250}
    dataSource={this.state.data}
    chartType="stepArea" >
    </IgrCategoryChart>

    Returns number

  • set xAxisMajorStrokeThickness(v): void
  • Parameters

    • v: number

    Returns void

  • get xAxisMinorStroke(): string
  • Gets or sets the color to apply to minor gridlines along the X-axis.

    Set XAxisMinorStroke to control the color of minor gridlines extending vertically from the x-axis.

    this.chart.xAxisExtent="250";
    
    <IgrCategoryChart
    xAxisMinorStroke="green"
    dataSource={this.state.data}>
    </IgrCategoryChart>

    Returns string

  • set xAxisMinorStroke(v): void
  • Parameters

    • v: string

    Returns void

  • get xAxisMinorStrokeThickness(): number
  • Gets or sets the thickness to apply to minor gridlines along the X-axis.

    Set XAxisMinorStrokeThickness to control the thickness of minor gridlines extending vertically from the x-axis.

    this.chart.xAxisMinorStrokeThickness="3";
    
    <IgrCategoryChart
    xAxisMinorStrokeThickness="3"
    dataSource={this.state.data} >
    </IgrCategoryChart>

    Returns number

  • set xAxisMinorStrokeThickness(v): void
  • Parameters

    • v: number

    Returns void

  • get xAxisStrip(): string
  • Gets or sets the color to apply to stripes along the X-axis.

    Set XAxisStrip to control the alternating color of stripes extending vertically from the x-axis.

    this.chart.xAxisStrip="green";
    
    <IgrCategoryChart
    xAxisStrip="green"
    dataSource={this.state.data} >
    </IgrCategoryChart>

    Returns string

  • set xAxisStrip(v): void
  • Parameters

    • v: string

    Returns void

  • get xAxisStroke(): string
  • Gets or sets the color to apply to the X-axis line.

    Set XAxisStroke to control the color of the x-axis line.

    this.chart.xAxisStroke="green"";
    
    <IgrCategoryChart
    xAxisStroke="green"
    dataSource={this.state.data}>
    </IgrCategoryChart>

    Returns string

  • set xAxisStroke(v): void
  • Parameters

    • v: string

    Returns void

  • get xAxisStrokeThickness(): number
  • Gets or sets the thickness to apply to the X-axis line.

    Set XAxisStrokeThickness to control the thickness of the x-axis line.

    this.chart.xAxisStrokeThickness="2";
    
    <IgrCategoryChart
    xAxisStrokeThickness={2}
    dataSource={this.state.data}
    chartType="stepArea" >
    </IgrCategoryChart>

    Returns number

  • set xAxisStrokeThickness(v): void
  • Parameters

    • v: number

    Returns void

  • get xAxisTickLength(): number
  • Gets or sets the length of tickmarks along the X-axis.

    Set XAxisTickLength to control the length of tickmarks extending vertically from the x-axis line.

    this.chart.xAxisTickLength="25";
    
    <IgrCategoryChart
    xAxisTickLength ={25}
    dataSource={this.state.data}
    chartType="stepArea" >
    </IgrCategoryChart>

    Returns number

  • set xAxisTickLength(v): void
  • Parameters

    • v: number

    Returns void

  • get xAxisTickStroke(): string
  • Gets or sets the color to apply to tickmarks along the X-axis.

    Set XAxisTickStroke to control the color of tickmarks extending vertically from the x-axis line.

    this.chart. xAxisTickStroke="green";
    
    <IgrCategoryChart
    xAxisTickStroke="green"
    dataSource={this.state.data}>
    </IgrCategoryChart>

    Returns string

  • set xAxisTickStroke(v): void
  • Parameters

    • v: string

    Returns void

  • get xAxisTickStrokeThickness(): number
  • Gets or sets the thickness to apply to tickmarks along the X-axis.

    Set XAxisTickStrokeThickness to control the thickness of tickmarks extending vertically from the x-axis line.

    this.chart.xAxisTickStrokeThickness="20";
    
    <IgrCategoryChart
    xAxisTickStrokeThickness={20}
    dataSource={this.state.data}
    chartType="stepArea" >
    </IgrCategoryChart>

    Returns number

  • set xAxisTickStrokeThickness(v): void
  • Parameters

    • v: number

    Returns void

  • get xAxisTitle(): string
  • Gets or sets the Text to display below the X-axis.

    Set XAxisTitle to display a label adjacent to the x-axis.

    this.chart. xAxisTitle="x axis";
    
    <IgrCategoryChart
    xAxisTitle="x axis"
    dataSource={this.state.data} >
    </IgrCategoryChart>

    Returns string

  • set xAxisTitle(v): void
  • Parameters

    • v: string

    Returns void

  • get xAxisTitleAlignment(): HorizontalAlignment
  • Gets or sets Horizontal alignment of the X-axis title.

    Set XAxisTitleAlignment to control the horizontal alignment of the x-axis title.

    this.chart.xAxisTitleAlignment="right";
    
    <IgrCategoryChart
    xAxisTitleAlignment="right"
    dataSource={this.state.data}>
    </IgrCategoryChart>

    Returns HorizontalAlignment

  • set xAxisTitleAlignment(v): void
  • Parameters

    • v: HorizontalAlignment

    Returns void

  • get xAxisTitleAngle(): number
  • Gets or sets the angle of rotation for the X-axis title.

    Set XAxisTitleAngle to control the rotation of the x-axis title.

    this.chart.xAxisTitleAngle="50";
    
    <IgrCategoryChart
    xAxisTitleAngle ={50}
    dataSource={this.state.data}>
    </IgrCategoryChart>

    Returns number

  • set xAxisTitleAngle(v): void
  • Parameters

    • v: number

    Returns void

  • get xAxisTitleBottomMargin(): number
  • Gets or sets the bottom margin of a title on the X-axis

    Use the XAxisTitleBottomMargin property to apply a margin below the x-axis title.

    this.chart.xAxisTitleBottomMargin="150";
    
    <IgrCategoryChart
    xAxisTitleBottomMargin={250}
    dataSource={this.state.data}>
    </IgrCategoryChart>

    Returns number

  • set xAxisTitleBottomMargin(v): void
  • Parameters

    • v: number

    Returns void

  • get xAxisTitleLeftMargin(): number
  • Gets or sets the left margin of a title on the X-axis

    Use the XAxisTitleLeftMargin property to apply a margin left of the x-axis title.

    this.chart.xAxisTitleLeftMargin="150";
    
    <IgrCategoryChart
    xAxisTitleLeftMargin={150}
    dataSource={this.state.data}>
    </IgrCategoryChart>

    Returns number

  • set xAxisTitleLeftMargin(v): void
  • Parameters

    • v: number

    Returns void

  • get xAxisTitleMargin(): number
  • Gets or sets the margin around a title on the X-axis

    Use the XAxisTitleMargin property to set a margin around the y-axis title.

    Returns number

  • set xAxisTitleMargin(v): void
  • Parameters

    • v: number

    Returns void

  • get xAxisTitleRightMargin(): number
  • Gets or sets the right margin of a title on the X-axis

    Use the XAxisTitleRightMargin property to apply a margin right of the x-axis title.

    this.chart.xAxisTitleRightMargin="100";
    
    <IgrCategoryChart
    xAxisTitleRightMargin="100"
    dataSource={this.state.data}
    chartType="stepArea" >
    </IgrCategoryChart>

    Returns number

  • set xAxisTitleRightMargin(v): void
  • Parameters

    • v: number

    Returns void

  • get xAxisTitleTextColor(): string
  • Gets or sets color of title on the X-axis

    To change the color of the x-axis title, set the XAxisTitleTextColor property to a color string.

    this.chart.xAxisTitleTextColor="green";
    
    <IgrCategoryChart
    xAxisTitleTextColor="green"
    dataSource={this.state.data} >
    </IgrCategoryChart>

    Returns string

  • set xAxisTitleTextColor(v): void
  • Parameters

    • v: string

    Returns void

  • get xAxisTitleTextStyle(): string
  • Gets or sets CSS font property for title on X-axis

    To change the font of the x-axis title, set the XAxisTitleTextStyle property.

    this.chart.xAxisTitleTextStyle="italic 15px arial, sans-serif";
    
    <IgrCategoryChart
    xAxisTitleTextStyle="italic 15px arial, sans-serif"
    dataSource={this.state.data}>
    </IgrCategoryChart>

    Returns string

  • set xAxisTitleTextStyle(v): void
  • Parameters

    • v: string

    Returns void

  • get xAxisTitleTopMargin(): number
  • Gets or sets the top margin of a title on the X-axis

    Use the XAxisTitleTopMargin property to apply a margin above the x-axis title.

    this.chart.xAxisTitleTopMargin="150";
    
    <IgrCategoryChart
    xAxisTitleTopMargin ={150}
    dataSource={this.state.data} >
    </IgrCategoryChart>

    Returns number

  • set xAxisTitleTopMargin(v): void
  • Parameters

    • v: number

    Returns void

  • get yAxisExtent(): number
  • Gets or sets the distance between the Y-axis and the left edge of the chart.

    To allocate space between the x-axis and the edge of the chart, set the XAxisExtent property.

    this.chart.xAxisExtent="250";
    
    <IgrCategoryChart
    xAxisExtent ={250}
    dataSource={this.state.data}
    chartType="stepArea" >
    </IgrCategoryChart>

    Returns number

  • set yAxisExtent(v): void
  • Parameters

    • v: number

    Returns void

  • get yAxisFormatLabel(): ((item) => string)
  • Gets or sets function which takes a context object and returns a formatted label for the Y-axis.

    To customize the text of the y-axis label, set YAxisFormatLabel to a single-parameter function. The argument passed to that function will be the numeric value corresponding to a position on the y-axis.

    formatY(value: any): string {
    return "[ " + value+ "! ]";
    }
    <IgrCategoryChart
    yAxisFormatLabel="formatY"
    dataSource={this.state.data}
    chartType="stepArea" >
    </IgrCategoryChart>

    Returns ((item) => string)

      • (item): string
      • Gets or sets function which takes a context object and returns a formatted label for the Y-axis.

        To customize the text of the y-axis label, set YAxisFormatLabel to a single-parameter function. The argument passed to that function will be the numeric value corresponding to a position on the y-axis.

        formatY(value: any): string {
        return "[ " + value+ "! ]";
        }
        <IgrCategoryChart
        yAxisFormatLabel="formatY"
        dataSource={this.state.data}
        chartType="stepArea" >
        </IgrCategoryChart>

        Parameters

        • item: any

        Returns string

  • set yAxisFormatLabel(v): void
  • Parameters

    • v: ((item) => string)
        • (item): string
        • Parameters

          • item: any

          Returns string

    Returns void

  • get yAxisInverted(): boolean
  • Gets or sets whether to invert the direction of the Y-axis by placing the minimum numeric value at the top of the chart.

    You can use YAxisInverted to invert the scale of the y axis like this:

    this.chart.yAxisInverted="true";
    
    <IgrCategoryChart
    yAxisInverted="true"
    dataSource={this.state.data}>
    </IgrCategoryChart>

    The default value of YAxisInverted is false.

    Returns boolean

  • set yAxisInverted(v): void
  • Parameters

    • v: boolean

    Returns void

  • get yAxisLabel(): any
  • Gets or sets the property or string from which the labels are derived.

    Returns any

  • set yAxisLabel(v): void
  • Parameters

    • v: any

    Returns void

  • get yAxisLabelAngle(): number
  • Gets or sets the angle of rotation for labels along the Y-axis.

    To control the rotation of labels on the y-axis, set the YAxisLabelAngle property to a number of rotational degrees.

    this.chart.yAxisLabelAngle="25";
    
    <IgrCategoryChart
    yAxisLabelAngle ={25}
    dataSource={this.state.data} >
    </IgrCategoryChart>

    Returns number

  • set yAxisLabelAngle(v): void
  • Parameters

    • v: number

    Returns void

  • get yAxisLabelBottomMargin(): number
  • Gets or sets the bottom margin of labels on the Y-axis

    Use the YAxisLabelBottomMargin property to apply a margin below the y-axis labels.

    this.chart.yAxisLabelBottomMargin="250";
    
    <IgrCategoryChart
    yAxisLabelBottomMargin={250}
    dataSource={this.state.data} >
    </IgrCategoryChart>

    Returns number

  • set yAxisLabelBottomMargin(v): void
  • Parameters

    • v: number

    Returns void

  • get yAxisLabelFormat(): string
  • Gets or sets the format string for the Y axis label.

    Returns string

  • set yAxisLabelFormat(v): void
  • Parameters

    • v: string

    Returns void

  • get yAxisLabelFormatSpecifiers(): any[]
  • Gets or sets the format specifiers to use with the YAxisLabelFormat string.

    Returns any[]

  • set yAxisLabelFormatSpecifiers(v): void
  • Parameters

    • v: any[]

    Returns void

  • get yAxisLabelHorizontalAlignment(): HorizontalAlignment
  • Gets or sets Horizontal alignment of Y-axis labels.

    Set the YAxisLabelHorizontalAlignment property to change the horizontal alignment of y-axis labels.

    Returns HorizontalAlignment

  • set yAxisLabelHorizontalAlignment(v): void
  • Parameters

    • v: HorizontalAlignment

    Returns void

  • get yAxisLabelLeftMargin(): number
  • Gets or sets the left margin of labels on the Y-axis

    Use the YAxisLabelLeftMargin property to apply a margin left of the y-axis labels.

    this.chart. yAxisLabelLeftMargin="250";
    
    <IgrCategoryChart
    yAxisLabelLeftMargin={250}
    dataSource={this.state.data} >
    </IgrCategoryChart>

    Returns number

  • set yAxisLabelLeftMargin(v): void
  • Parameters

    • v: number

    Returns void

  • get yAxisLabelLocation(): YAxisLabelLocation
  • Gets or sets location of Y-axis labels, relative to the plot area.

    Set the YAxisLabelLocation property to change the location of the y-axis and its labels.

    this.chart.yAxisLabelLocation="outsideRight";
    
    <IgrCategoryChart
    yAxisLabelLocation="outsideRight"
    dataSource={this.state.data} >
    </IgrCategoryChart>

    Returns YAxisLabelLocation

  • set yAxisLabelLocation(v): void
  • Parameters

    Returns void

  • get yAxisLabelRightMargin(): number
  • Gets or sets the right margin of labels on the Y-axis

    Use the YAxisLabelRightMargin property to apply a margin right of the y-axis labels.

    this.chart.yAxisLabelRightMargin="250";
    
    <IgrCategoryChart
    yAxisLabelRightMargin={250}
    dataSource={this.state.data} >
    </IgrCategoryChart>

    Returns number

  • set yAxisLabelRightMargin(v): void
  • Parameters

    • v: number

    Returns void

  • get yAxisLabelTextColor(): string
  • Gets or sets color of labels on the Y-axis

    To change the color of y-axis labels, set the YAxisLabelTextColor property to a color string.

    this.chart.yAxisLabelTextColor="green";
    
    <IgrCategoryChart
    yAxisLabelTextColor="green"
    dataSource={this.state.data}
    chartType="stepArea" >
    </IgrCategoryChart>

    Returns string

  • set yAxisLabelTextColor(v): void
  • Parameters

    • v: string

    Returns void

  • get yAxisLabelTextStyle(): string
  • Gets or sets CSS font property for labels on Y-axis

    To change the font of x-axis labels, set the YAxisLabelTextStyle property.

    this.chart. yAxisLabelTextStyle="italic 15px arial, sans-serif";
    
    <IgrCategoryChart
    yAxisLabelTextStyle="italic 15px arial, sans-serif"
    dataSource={this.state.data}>
    </IgrCategoryChart>

    Returns string

  • set yAxisLabelTextStyle(v): void
  • Parameters

    • v: string

    Returns void

  • get yAxisLabelTopMargin(): number
  • Gets or sets the top margin of labels on the Y-axis

    Use the YAxisLabelTopMargin property to apply a margin above the y-axis labels.

    this.chart.yAxisLabelTopMargin="250";
    
    <IgrCategoryChart
    yAxisLabelTopMargin ={250}
    dataSource={this.state.data} >
    </IgrCategoryChart>

    Returns number

  • set yAxisLabelTopMargin(v): void
  • Parameters

    • v: number

    Returns void

  • get yAxisLabelVerticalAlignment(): VerticalAlignment
  • Gets or sets Vertical alignment of Y-axis labels.

    Returns VerticalAlignment

  • set yAxisLabelVerticalAlignment(v): void
  • Parameters

    • v: VerticalAlignment

    Returns void

  • get yAxisLabelVisibility(): Visibility
  • Gets or sets Visibility of Y-axis labels.

    To hide the y-axis labels, set YAxisLabelVisibility to collapsed.

    this.chart.yAxisLabelVisibility="collapsed"";
    
    <IgrCategoryChart
    yAxisLabelVisibility="collapsed"
    dataSource={this.state.data}
    chartType="stepArea" >
    </IgrCategoryChart>

    Returns Visibility

  • set yAxisLabelVisibility(v): void
  • Parameters

    • v: Visibility

    Returns void

  • get yAxisMajorStroke(): string
  • Gets or sets the color to apply to major gridlines along the Y-axis.

    Set YAxisMajorStroke to control the color of major gridlines extending horizontally from the y-axis.

    this.chart.yAxisMajorStroke="green";
    
    <IgrCategoryChart
    yAxisMajorStroke="green"
    dataSource={this.state.data}
    chartType="stepArea" >
    </IgrCategoryChart>

    Returns string

  • set yAxisMajorStroke(v): void
  • Parameters

    • v: string

    Returns void

  • get yAxisMajorStrokeThickness(): number
  • Gets or sets the thickness to apply to major gridlines along the Y-axis.

    Set YAxisMajorStrokeThickness to control the thickness of major gridlines extending horizontally from the y-axis.

    this.chart.yAxisMajorStrokeThickness="2";
    
    <IgrCategoryChart
    yAxisMajorStrokeThickness={2}
    dataSource={this.state.data}
    chartType="stepArea" >
    </IgrCategoryChart>

    Returns number

  • set yAxisMajorStrokeThickness(v): void
  • Parameters

    • v: number

    Returns void

  • get yAxisMinorStroke(): string
  • Gets or sets the color to apply to minor gridlines along the Y-axis.

    Set YAxisMinorStroke to control the color of minor gridlines extending horizontally from the y-axis.

    this.chart.yAxisMinorStroke="green";
    
    <IgrCategoryChart
    yAxisMinorStroke="green"
    dataSource={this.state.data}
    chartType="stepArea" >
    </IgrCategoryChart>

    Returns string

  • set yAxisMinorStroke(v): void
  • Parameters

    • v: string

    Returns void

  • get yAxisMinorStrokeThickness(): number
  • Gets or sets the thickness to apply to minor gridlines along the Y-axis.

    Set YAxisMinorStrokeThickness to control the thickness of minor gridlines extending horizontally from the y-axis.

    this.chart.yAxisMinorStrokeThickness="3";
    
    <IgrCategoryChart
    yAxisMinorStrokeThickness={3}
    dataSource={this.state.data}
    chartType="stepArea" >
    </IgrCategoryChart>

    Returns number

  • set yAxisMinorStrokeThickness(v): void
  • Parameters

    • v: number

    Returns void

  • get yAxisStrip(): string
  • Gets or sets the color to apply to stripes along the Y-axis.

    Set YAxisStrip to control the alternating color of stripes extending horizontally from the y-axis.

    this.chart.yAxisStrip="green";
    
    <IgrCategoryChart
    yAxisStrip="green"
    dataSource={this.state.data}
    chartType="stepArea" >
    </IgrCategoryChart>

    Returns string

  • set yAxisStrip(v): void
  • Parameters

    • v: string

    Returns void

  • get yAxisStroke(): string
  • Gets or sets the color to apply to the Y-axis line.

    Set YAxisStroke to control the color of the y-axis line.

    this.chart.yAxisStroke="green";
    
    <IgrCategoryChart
    yAxisStroke="green"
    dataSource={this.state.data}
    chartType="stepArea" >
    </IgrCategoryChart>

    Returns string

  • set yAxisStroke(v): void
  • Parameters

    • v: string

    Returns void

  • get yAxisStrokeThickness(): number
  • Gets or sets the thickness to apply to the Y-axis line.

    Set YAxisStrokeThickness to control the thickness of the y-axis line.

    this.chart. yAxisStrokeThickness="2";
    
    <IgrCategoryChart
    yAxisStrokeThickness={2}
    dataSource={this.state.data}
    chartType="stepArea" >
    </IgrCategoryChart>

    Returns number

  • set yAxisStrokeThickness(v): void
  • Parameters

    • v: number

    Returns void

  • get yAxisTickLength(): number
  • Gets or sets the length of tickmarks along the Y-axis.

    Set YAxisTickLength to control the length of tickmarks extending horizontally from the y-axis line.

    this.chart.yAxisTickLength="25";
    
    <IgrCategoryChart
    yAxisTickLength ={25}
    dataSource={this.state.data}
    chartType="stepArea" >
    </IgrCategoryChart>

    Returns number

  • set yAxisTickLength(v): void
  • Parameters

    • v: number

    Returns void

  • get yAxisTickStroke(): string
  • Gets or sets the color to apply to tickmarks along the Y-axis.

    Set YAxisTickStroke to control the color of tickmarks extending horizontally from the y-axis line.

    this.chart.yAxisTickStroke="green";
    
    <IgrCategoryChart
    yAxisTickStroke="green"
    dataSource={this.state.data}
    chartType="stepArea" >
    </IgrCategoryChart>

    Returns string

  • set yAxisTickStroke(v): void
  • Parameters

    • v: string

    Returns void

  • get yAxisTickStrokeThickness(): number
  • Gets or sets the thickness to apply to tickmarks along the Y-axis.

    Set YAxisTickStrokeThickness to control the thickness of tickmarks extending vertically from the y-axis line.

    this.chart.yAxisTickStrokeThickness="25";
    
    <IgrCategoryChart
    yAxisTickStrokeThickness ={25}
    dataSource={this.state.data}
    chartType="stepArea" >
    </IgrCategoryChart>

    Returns number

  • set yAxisTickStrokeThickness(v): void
  • Parameters

    • v: number

    Returns void

  • get yAxisTitle(): string
  • Gets or sets the Text to display to the left of the Y-axis.

    Set YAxisTitle to display a label adjacent to the y-axis.

    this.chart.yAxisTitle="y axis";
    
    <IgrCategoryChart
    yAxisTitle="y axis"
    dataSource={this.state.data}
    chartType="stepArea" >
    </IgrCategoryChart>

    Returns string

  • set yAxisTitle(v): void
  • Parameters

    • v: string

    Returns void

  • get yAxisTitleAlignment(): VerticalAlignment
  • Gets or sets Vertical alignment of the Y-axis title.

    Set YAxisTitleAlignment to control the vertical alignment of the x-axis title.

    this.chart.yAxisTitleAlignment="bottom";
    
    <IgrCategoryChart
    yAxisTitleAlignment="bottom"
    dataSource={this.state.data}
    chartType="stepArea" >
    </IgrCategoryChart>

    Returns VerticalAlignment

  • set yAxisTitleAlignment(v): void
  • Parameters

    • v: VerticalAlignment

    Returns void

  • get yAxisTitleAngle(): number
  • Gets or sets the angle of rotation for the Y-axis title.

    Set YAxisTitleAngle to control the rotation of the y-axis title.

    this.chart.yAxisTitleAngle="25";
    
    <IgrCategoryChart
    yAxisTitleAngle ={24}
    dataSource={this.state.data}
    chartType="stepArea" >
    </IgrCategoryChart>

    Returns number

  • set yAxisTitleAngle(v): void
  • Parameters

    • v: number

    Returns void

  • get yAxisTitleBottomMargin(): number
  • Gets or sets the bottom margin of a title on the Y-axis

    Use the YAxisTitleBottomMargin property to apply a margin below the y-axis title.

    this.chart.yAxisTitleBottomMargin="150";
    
    <IgrCategoryChart
    yAxisTitleBottomMargin ={150}
    dataSource={this.state.data}
    chartType="stepArea" >
    </IgrCategoryChart>

    Returns number

  • set yAxisTitleBottomMargin(v): void
  • Parameters

    • v: number

    Returns void

  • get yAxisTitleLeftMargin(): number
  • Gets or sets the left margin of a title on the Y-axis

    Use the YAxisTitleLeftMargin property to apply a margin left of the y-axis title.

    this.chart.yAxisTitleLeftMargin="150";
    
    <IgrCategoryChart
    yAxisTitleLeftMargin={150}
    dataSource={this.state.data}
    chartType="stepArea" >
    </IgrCategoryChart>

    Returns number

  • set yAxisTitleLeftMargin(v): void
  • Parameters

    • v: number

    Returns void

  • get yAxisTitleMargin(): number
  • Gets or sets the margin around a title on the Y-axis

    Use the YAxisTitleMargin property to set a margin around the y-axis title.

    Returns number

  • set yAxisTitleMargin(v): void
  • Parameters

    • v: number

    Returns void

  • get yAxisTitleRightMargin(): number
  • Gets or sets the right margin of a title on the Y-axis

    Use the YAxisTitleRightMargin property to apply a margin right of the y-axis title.

    this.chart.yAxisTitleRightMargin="150";
    
    <IgrCategoryChart
    yAxisTitleRightMargin={150}
    dataSource={this.state.data}
    chartType="stepArea" >
    </IgrCategoryChart>

    Returns number

  • set yAxisTitleRightMargin(v): void
  • Parameters

    • v: number

    Returns void

  • get yAxisTitleTextColor(): string
  • Gets or sets color of title on the Y-axis

    To change the color of the y-axis title, set the YAxisTitleTextColor property to a color string.

    this.chart.yAxisTitleTextColor="green";
    
    <IgrCategoryChart
    yAxisTitleTextColor="green"
    dataSource={this.state.data}
    chartType="stepArea" >
    </IgrCategoryChart>

    Returns string

  • set yAxisTitleTextColor(v): void
  • Parameters

    • v: string

    Returns void

  • get yAxisTitleTextStyle(): string
  • Gets or sets CSS font property for title on Y-axis

    To change the font of the x-axis title, set the YAxisTitleTextStyle property.

    this.chart.yAxisTitleTextStyle="italic 15px arial, sans-serif";
    
    <IgrCategoryChart
    yAxisTitleTextStyle="italic 15px arial, sans-serif"
    dataSource={this.state.data}
    chartType="stepArea" >
    </IgrCategoryChart>

    Returns string

  • set yAxisTitleTextStyle(v): void
  • Parameters

    • v: string

    Returns void

  • get yAxisTitleTopMargin(): number
  • Gets or sets the top margin of a title on the Y-axis

    Use the YAxisTitleTopMargin property to apply a margin above the y-axis title.

    this.chart.yAxisTitleTopMargin="150";
    
    <IgrCategoryChart
    yAxisTitleTopMargin ={150}
    dataSource={this.state.data}
    chartType="stepArea" >
    </IgrCategoryChart>

    Returns number

  • set yAxisTitleTopMargin(v): void
  • Parameters

    • v: number

    Returns void

Methods

  • Parameters

    • listener: ICommandAvailabilityListener

    Returns void

  • Parameters

    • listener: ICommandStateChangedListener

    Returns void

  • Catches exceptions generated in descendant components. Unhandled exceptions will cause the entire component tree to unmount.

    Parameters

    • error: Error
    • errorInfo: ErrorInfo

    Returns void

  • Called immediately after updating occurs. Not called for the initial render.

    The snapshot is only present if getSnapshotBeforeUpdate is present and returns non-null.

    Parameters

    • prevProps: Readonly<P>
    • prevState: Readonly<{}>
    • Optional snapshot: any

    Returns void

  • Called immediately before a component is destroyed. Perform any necessary cleanup in this method, such as cancelled network requests, or cleaning up any DOM elements created in componentDidMount.

    Returns void

  • Destroy this control

    Use the destroy property to destroy the chart.

    this.chart.destroy();
    

    Returns void