Class IgrFinancialChart<SS>

Type parameters

  • SS

Hierarchy

Constructors

Accessors

Methods

Constructors

constructor

Accessors

alignsGridLinesToPixels

  • get alignsGridLinesToPixels(): boolean
  • set alignsGridLinesToPixels(v: boolean): void
  • 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

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

    Parameters

    • v: boolean

    Returns void

animateSeriesWhenAxisRangeChanges

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

    Returns boolean

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

    Parameters

    • v: boolean

    Returns void

applyCustomIndicators

  • get applyCustomIndicators(): function
  • set applyCustomIndicators(ev: function): void

bottomMargin

  • get bottomMargin(): number
  • set bottomMargin(v: number): void
  • 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

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

    Parameters

    • v: number

    Returns void

brushes

  • get brushes(): string[]
  • set brushes(v: string[]): void
  • 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[]

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

    Parameters

    • v: string[]

    Returns void

calloutStyleUpdating

  • get calloutStyleUpdating(): function
  • set calloutStyleUpdating(ev: function): void

calloutStyleUpdatingEventEnabled

  • get calloutStyleUpdatingEventEnabled(): boolean
  • set calloutStyleUpdatingEventEnabled(v: boolean): void

calloutsContentMemberPath

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

    Returns string

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

    Parameters

    • v: string

    Returns void

calloutsDataSource

  • get calloutsDataSource(): any[]
  • set calloutsDataSource(value: any[]): void

calloutsLabelMemberPath

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

    Returns string

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

    Parameters

    • v: string

    Returns void

calloutsVisible

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

    Returns boolean

  • Gets or sets if callouts should be displayed.

    Parameters

    • v: boolean

    Returns void

calloutsXMemberPath

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

    Returns string

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

    Parameters

    • v: string

    Returns void

calloutsYMemberPath

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

    Returns string

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

    Parameters

    • v: string

    Returns void

chartTemplate

  • get chartTemplate(): any
  • set chartTemplate(value: any): void
  • Returns any

  • Parameters

    • value: any

    Returns void

chartTitle

  • get chartTitle(): string
  • set chartTitle(v: string): void
  • Gets or sets text to display above the plot area.

    Use the chartTitle 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

  • Gets or sets text to display above the plot area.

    Use the chartTitle 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"    />

    Parameters

    • v: string

    Returns void

chartType

  • The type of price series to display in the main chart.

    Use the chartType property to set a type of series that will be used to render prices in the Financial Chart control, e.g.

    <IgrFinancialChart
      width="100%"
      height="400px"
        chartType="Candle"
      dataSource={this.data} />

    Returns FinancialChartType

  • The type of price series to display in the main chart.

    Use the chartType property to set a type of series that will be used to render prices in the Financial Chart control, e.g.

    <IgrFinancialChart
      width="100%"
      height="400px"
        chartType="Candle"
      dataSource={this.data} />

    Parameters

    Returns void

chartTypePickerTemplate

  • get chartTypePickerTemplate(): any
  • set chartTypePickerTemplate(value: any): void
  • Returns any

  • Parameters

    • value: any

    Returns void

crosshairsAnnotationEnabled

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

    Returns boolean

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

    Parameters

    • v: boolean

    Returns void

crosshairsDisplayMode

crosshairsSnapToData

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

    Returns boolean

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

    Parameters

    • v: boolean

    Returns void

customIndicatorNames

  • The names of custom indicators to add to the chart. When CustomIndicatorNames is set, the ApplyCustomIndicators event will be raised for each custom indicator name.

    Returns IgrCustomIndicatorNameCollection

  • The names of custom indicators to add to the chart. When CustomIndicatorNames is set, the ApplyCustomIndicators event will be raised for each custom indicator name.

    Parameters

    Returns void

dataSource

  • get dataSource(): Array<any>
  • set dataSource(value: Array<any>): void
  • Returns Array<any>

  • Parameters

    • value: Array<any>

    Returns void

excludedProperties

  • get excludedProperties(): string[]
  • set excludedProperties(v: string[]): void
  • 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[]

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

    Parameters

    • v: string[]

    Returns void

finalValueAnnotationsVisible

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

    Returns boolean

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

    Parameters

    • v: boolean

    Returns void

height

  • get height(): string
  • set height(value: string): void
  • Returns string

  • Parameters

    • value: string

    Returns void

i

  • get i(): FinancialChart
  • Returns FinancialChart

includedProperties

  • get includedProperties(): string[]
  • set includedProperties(v: string[]): void
  • 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[]

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

    Parameters

    • v: string[]

    Returns void

indicatorBrushes

  • get indicatorBrushes(): string[]
  • set indicatorBrushes(v: string[]): void
  • Brushes to use for financial indicators.

    Use the indicatorBrushes property to set a collection of brushes that will be used to render positive elements of indicators in the Financial Chart control, e.g.

    <IgrFinancialChart
        width="100%"
        height="400px"
        dataSource={this.data}
        indicatorBrushes="Green" />

    Returns string[]

  • Brushes to use for financial indicators.

    Use the indicatorBrushes property to set a collection of brushes that will be used to render positive elements of indicators in the Financial Chart control, e.g.

    <IgrFinancialChart
        width="100%"
        height="400px"
        dataSource={this.data}
        indicatorBrushes="Green" />

    Parameters

    • v: string[]

    Returns void

indicatorDisplayTypes

  • The display types of financial indicators.

    Use the indicatorDisplayTypes property to set display types that will determine whether render all indicators as area, lines, or columns in the Financial Chart control, e.g.

    <IgrFinancialChart
        width="100%"
        height="400px"
        dataSource={this.data}
        indicatorDisplayTypes="line" />

    Returns IgrIndicatorDisplayTypeCollection

  • The display types of financial indicators.

    Use the indicatorDisplayTypes property to set display types that will determine whether render all indicators as area, lines, or columns in the Financial Chart control, e.g.

    <IgrFinancialChart
        width="100%"
        height="400px"
        dataSource={this.data}
        indicatorDisplayTypes="line" />

    Parameters

    Returns void

indicatorLongPeriod

  • get indicatorLongPeriod(): number
  • set indicatorLongPeriod(v: number): void
  • The long period of financial indicators, where applicable.

    The indicatorLongPeriod property applies only to these indicator types:

    • AbsoluteVolumeOscillator,
    • ChaikinOscillator,
    • MovingAverageConvergenceDivergence,
    • PercentagePriceOscillator,
    • PercentageVolumeOscillator,
    <IgrFinancialChart
        width="100%"
        height="400px"
        dataSource={this.data}
        indicatorLongPeriod={8} />

    Returns number

  • The long period of financial indicators, where applicable.

    The indicatorLongPeriod property applies only to these indicator types:

    • AbsoluteVolumeOscillator,
    • ChaikinOscillator,
    • MovingAverageConvergenceDivergence,
    • PercentagePriceOscillator,
    • PercentageVolumeOscillator,
    <IgrFinancialChart
        width="100%"
        height="400px"
        dataSource={this.data}
        indicatorLongPeriod={8} />

    Parameters

    • v: number

    Returns void

indicatorMenuTemplate

  • get indicatorMenuTemplate(): any
  • set indicatorMenuTemplate(value: any): void
  • Returns any

  • Parameters

    • value: any

    Returns void

indicatorMultiplier

  • get indicatorMultiplier(): number
  • set indicatorMultiplier(v: number): void
  • The multiplier of financial indicators, where applicable.

    The indicatorMultiplier property applies to only to BollingerBandWidth indicator type.

    <IgrFinancialChart
        width="100%"
        height="400px"
        dataSource={this.data}
        indicatorMultiplier= {8} />

    Returns number

  • The multiplier of financial indicators, where applicable.

    The indicatorMultiplier property applies to only to BollingerBandWidth indicator type.

    <IgrFinancialChart
        width="100%"
        height="400px"
        dataSource={this.data}
        indicatorMultiplier= {8} />

    Parameters

    • v: number

    Returns void

indicatorNegativeBrushes

  • get indicatorNegativeBrushes(): string[]
  • set indicatorNegativeBrushes(v: string[]): void
  • Brushes to use for negative elements in financial indicators.

    Use the indicatorNegativeBrushes property to set a collection of brushes that will be used to render negative elements of indicators in the Financial Chart control, e.g.

    <IgrFinancialChart
        width="100%"
        height="400px"
        dataSource={this.data}
        indicatorNegativeBrushes="Red"/>

    Returns string[]

  • Brushes to use for negative elements in financial indicators.

    Use the indicatorNegativeBrushes property to set a collection of brushes that will be used to render negative elements of indicators in the Financial Chart control, e.g.

    <IgrFinancialChart
        width="100%"
        height="400px"
        dataSource={this.data}
        indicatorNegativeBrushes="Red"/>

    Parameters

    • v: string[]

    Returns void

indicatorPeriod

  • get indicatorPeriod(): number
  • set indicatorPeriod(v: number): void
  • The period of financial indicators, where applicable.

    The indicatorPeriod property applies to only the BollingerBands overlay as well as to these indicators types: AverageDirectionalIndex, AverageTrueRange, BollingerBandWidth, ChaikinVolatility, CommodityChannelIndex, DetrendedPriceOscillator, FastStochasticOscillator, ForceIndex, FullStochasticOscillator, MoneyFlowIndex, IgrPriceChannelOverlay, RateOfChangeAndMomentum, RelativeStrengthIndex, SlowStochasticOscillator, StandardDeviation, StochRSI, TRIX, WilliamsPercentR

    <IgrFinancialChart
        width="100%"
        height="400px"
        dataSource={this.data}
        indicatorPeriod={8} />

    Returns number

  • The period of financial indicators, where applicable.

    The indicatorPeriod property applies to only the BollingerBands overlay as well as to these indicators types: AverageDirectionalIndex, AverageTrueRange, BollingerBandWidth, ChaikinVolatility, CommodityChannelIndex, DetrendedPriceOscillator, FastStochasticOscillator, ForceIndex, FullStochasticOscillator, MoneyFlowIndex, IgrPriceChannelOverlay, RateOfChangeAndMomentum, RelativeStrengthIndex, SlowStochasticOscillator, StandardDeviation, StochRSI, TRIX, WilliamsPercentR

    <IgrFinancialChart
        width="100%"
        height="400px"
        dataSource={this.data}
        indicatorPeriod={8} />

    Parameters

    • v: number

    Returns void

indicatorShortPeriod

  • get indicatorShortPeriod(): number
  • set indicatorShortPeriod(v: number): void
  • The short period of financial indicators, where applicable.

    The indicatorShortPeriod property applies only to these indicator types:

    • AbsoluteVolumeOscillator,
    • ChaikinOscillator,
    • MovingAverageConvergenceDivergence,
    • PercentagePriceOscillator,
    • PercentageVolumeOscillator,
    <IgrFinancialChart
        width="100%"
        height="400px"
        dataSource={this.data}
        indicatorShortPeriod={8} />

    Returns number

  • The short period of financial indicators, where applicable.

    The indicatorShortPeriod property applies only to these indicator types:

    • AbsoluteVolumeOscillator,
    • ChaikinOscillator,
    • MovingAverageConvergenceDivergence,
    • PercentagePriceOscillator,
    • PercentageVolumeOscillator,
    <IgrFinancialChart
        width="100%"
        height="400px"
        dataSource={this.data}
        indicatorShortPeriod={8} />

    Parameters

    • v: number

    Returns void

indicatorSignalPeriod

  • get indicatorSignalPeriod(): number
  • set indicatorSignalPeriod(v: number): void
  • The signal period of financial indicators, where applicable.

    The indicatorSignalPeriod property applies to only to MovingAverageConvergenceDivergence indicator type.

    <IgrFinancialChart
        width="100%"
        height="400px"
        dataSource={this.data}
        indicatorSignalPeriod ={8} />

    Returns number

  • The signal period of financial indicators, where applicable.

    The indicatorSignalPeriod property applies to only to MovingAverageConvergenceDivergence indicator type.

    <IgrFinancialChart
        width="100%"
        height="400px"
        dataSource={this.data}
        indicatorSignalPeriod ={8} />

    Parameters

    • v: number

    Returns void

indicatorSmoothingPeriod

  • get indicatorSmoothingPeriod(): number
  • set indicatorSmoothingPeriod(v: number): void
  • The smoothing period of financial indicators, where applicable.

    The indicatorSmoothingPeriod property applies to only to FullStochasticOscillator indicator type.

    <IgrFinancialChart
        width="100%"
        height="400px"
        dataSource={this.data}
        indicatorSmoothingPeriod={8}     />

    Returns number

  • The smoothing period of financial indicators, where applicable.

    The indicatorSmoothingPeriod property applies to only to FullStochasticOscillator indicator type.

    <IgrFinancialChart
        width="100%"
        height="400px"
        dataSource={this.data}
        indicatorSmoothingPeriod={8}     />

    Parameters

    • v: number

    Returns void

indicatorThickness

  • get indicatorThickness(): number
  • set indicatorThickness(v: number): void
  • The outline or stroke thickness of financial indicators.

    Use the indicatorThickness property to set a number that will be used to render outline thickness of all indicators in the Financial Chart control, e.g.

    <IgrFinancialChart
        width="100%"
        height="400px"
        dataSource={this.data}
        indicatorThickness={2.5}  />

    Returns number

  • The outline or stroke thickness of financial indicators.

    Use the indicatorThickness property to set a number that will be used to render outline thickness of all indicators in the Financial Chart control, e.g.

    <IgrFinancialChart
        width="100%"
        height="400px"
        dataSource={this.data}
        indicatorThickness={2.5}  />

    Parameters

    • v: number

    Returns void

indicatorTypes

  • A collection indicating what financial indicator types to display on the Financial Chart.

    Use the indicatorTypes property to set types of indicators that will be rendered below the price pane in the Financial Chart control, e.g.

    <IgrFinancialChart
        width="100%"
        height="400px"
        dataSource={this.data}
        indicatorTypes="ForceIndex" />

    Returns IgrFinancialIndicatorTypeCollection

  • A collection indicating what financial indicator types to display on the Financial Chart.

    Use the indicatorTypes property to set types of indicators that will be rendered below the price pane in the Financial Chart control, e.g.

    <IgrFinancialChart
        width="100%"
        height="400px"
        dataSource={this.data}
        indicatorTypes="ForceIndex" />

    Parameters

    Returns void

isHorizontalZoomEnabled

  • get isHorizontalZoomEnabled(): boolean
  • set isHorizontalZoomEnabled(v: boolean): void

isLegendVisible

  • get isLegendVisible(): boolean
  • set isLegendVisible(v: boolean): void
  • Gets or sets weather or not a legend is visible between toolbar and chart's plot area

    Returns boolean

  • Gets or sets weather or not a legend is visible between toolbar and chart's plot area

    Parameters

    • v: boolean

    Returns void

isSeriesHighlightingEnabled

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

    Returns boolean

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

    Parameters

    • v: boolean

    Returns void

isToolbarVisible

  • get isToolbarVisible(): boolean
  • set isToolbarVisible(v: boolean): void
  • A boolean property controlling the visibility of the toolbar.

    Returns boolean

  • A boolean property controlling the visibility of the toolbar.

    Parameters

    • v: boolean

    Returns void

isVerticalZoomEnabled

  • get isVerticalZoomEnabled(): boolean
  • set isVerticalZoomEnabled(v: boolean): void

isWindowSyncedToVisibleRange

  • get isWindowSyncedToVisibleRange(): boolean
  • set isWindowSyncedToVisibleRange(v: boolean): void
  • A boolean indicating whether the chart should automatically zoom in vertically on the currently visible range of data. When this property is set to true, panning and zooming along the X-axis will result in a corresponding zoom on the Y-axis, so that the visible range of data fills the zoom window as fully as possible.

    Returns boolean

  • A boolean indicating whether the chart should automatically zoom in vertically on the currently visible range of data. When this property is set to true, panning and zooming along the X-axis will result in a corresponding zoom on the Y-axis, so that the visible range of data fills the zoom window as fully as possible.

    Parameters

    • v: boolean

    Returns void

leftMargin

  • get leftMargin(): number
  • set leftMargin(v: number): void

legend

  • get legend(): any
  • set legend(v: any): void
  • Returns any

  • Parameters

    • v: any

    Returns void

markerBrushes

  • get markerBrushes(): string[]
  • set markerBrushes(v: string[]): void
  • 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[]

  • 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}/>

    Parameters

    • v: string[]

    Returns void

markerMaxCount

  • get markerMaxCount(): number
  • set markerMaxCount(v: number): void
  • Gets or sets the maximum number of markers displyed 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

  • Gets or sets the maximum number of markers displyed 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}/>

    Parameters

    • v: number

    Returns void

markerOutlines

  • get markerOutlines(): string[]
  • set markerOutlines(v: string[]): void
  • 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[]

  • 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}/>

    Parameters

    • v: string[]

    Returns void

markerTypes

  • 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

  • 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

    Parameters

    Returns void

negativeBrushes

  • get negativeBrushes(): string[]
  • set negativeBrushes(v: string[]): void
  • Gets or sets the palette used for coloring negative items of Waterfall chart type.

    Use the negativeBrushes property to set a collection of brushes that will be used to render fill area of negative elements in the price pane, e.g.

    <IgrFinancialChart
        width="100%"
        height="400px"
        dataSource={this.data}
        negativeBrushes="Red" />

    Returns string[]

  • Gets or sets the palette used for coloring negative items of Waterfall chart type.

    Use the negativeBrushes property to set a collection of brushes that will be used to render fill area of negative elements in the price pane, e.g.

    <IgrFinancialChart
        width="100%"
        height="400px"
        dataSource={this.data}
        negativeBrushes="Red" />

    Parameters

    • v: string[]

    Returns void

negativeOutlines

  • get negativeOutlines(): string[]
  • set negativeOutlines(v: string[]): void
  • Brushes to use for drawing negative elements, when using a chart type with contextual coloring, such as Waterfall.

    Use the negativeOutlines property to set a collection of brushes that will be used to render outline of negative elements in the price pane, e.g.

    <IgrFinancialChart
        width="100%"
        height="400px"
        dataSource={this.data}
        negativeOutlines= "Green"/>

    Returns string[]

  • Brushes to use for drawing negative elements, when using a chart type with contextual coloring, such as Waterfall.

    Use the negativeOutlines property to set a collection of brushes that will be used to render outline of negative elements in the price pane, e.g.

    <IgrFinancialChart
        width="100%"
        height="400px"
        dataSource={this.data}
        negativeOutlines= "Green"/>

    Parameters

    • v: string[]

    Returns void

outlines

  • get outlines(): string[]
  • set outlines(v: string[]): void
  • 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[]

  • 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}/>

    Parameters

    • v: string[]

    Returns void

overlayBrushes

  • get overlayBrushes(): string[]
  • set overlayBrushes(v: string[]): void
  • Brushes to use for filling financial overlays.

    Use the overlayBrushes property to set a collection of brushes that will be used to render fill area of overlays in the Financial Chart control, e.g.

    <IgrFinancialChart
        width="100%"
        height="400px"
        dataSource={this.data}
        overlayBrushes="Green" />

    Returns string[]

  • Brushes to use for filling financial overlays.

    Use the overlayBrushes property to set a collection of brushes that will be used to render fill area of overlays in the Financial Chart control, e.g.

    <IgrFinancialChart
        width="100%"
        height="400px"
        dataSource={this.data}
        overlayBrushes="Green" />

    Parameters

    • v: string[]

    Returns void

overlayOutlines

  • get overlayOutlines(): string[]
  • set overlayOutlines(v: string[]): void
  • Brushes to use for outlining financial overlays.

    Use the overlayOutlines property to set a collection of brushes that will be used to render outlines of overlays in the Financial Chart control, e.g.

    <IgrFinancialChart
        width="100%"
        height="400px"
        dataSource={this.data}
        overlayOutlines="Red" />

    Returns string[]

  • Brushes to use for outlining financial overlays.

    Use the overlayOutlines property to set a collection of brushes that will be used to render outlines of overlays in the Financial Chart control, e.g.

    <IgrFinancialChart
        width="100%"
        height="400px"
        dataSource={this.data}
        overlayOutlines="Red" />

    Parameters

    • v: string[]

    Returns void

overlayThickness

  • get overlayThickness(): number
  • set overlayThickness(v: number): void
  • The outline thickness of financial overlays.

    Use the overlayThickness property to set a number that will be used to render outline thickness of all overlays in the Financial Chart control, e.g.

    <IgrFinancialChart
        width="100%"
        height="400px"
        dataSource={this.data}
        overlayThickness ={2.5}  />

    Returns number

  • The outline thickness of financial overlays.

    Use the overlayThickness property to set a number that will be used to render outline thickness of all overlays in the Financial Chart control, e.g.

    <IgrFinancialChart
        width="100%"
        height="400px"
        dataSource={this.data}
        overlayThickness ={2.5}  />

    Parameters

    • v: number

    Returns void

overlayTypes

  • A collection indicating what financial overlay types to display on the Financial Chart.

    Use the overlayTypes property to set types of overlays that will be rendered behind price series in the Financial Chart control, e.g.

    <IgrFinancialChart
        width="100%"
        height="400px"
        dataSource={this.data}
        overlayType ="PriceChannel" />

    Returns IgrFinancialOverlayTypeCollection

  • A collection indicating what financial overlay types to display on the Financial Chart.

    Use the overlayTypes property to set types of overlays that will be rendered behind price series in the Financial Chart control, e.g.

    <IgrFinancialChart
        width="100%"
        height="400px"
        dataSource={this.data}
        overlayType ="PriceChannel" />

    Parameters

    Returns void

pixelScalingRatio

  • get pixelScalingRatio(): number
  • set pixelScalingRatio(v: number): void
  • 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

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

    Parameters

    • v: number

    Returns void

rangeSelectorOptions

  • A FinancialChartRangeSelectorOptionCollection containing the available range selector options on the toolbar.

    Returns IgrFinancialChartRangeSelectorOptionCollection

  • A FinancialChartRangeSelectorOptionCollection containing the available range selector options on the toolbar.

    Parameters

    Returns void

rangeSelectorTemplate

  • get rangeSelectorTemplate(): any
  • set rangeSelectorTemplate(value: any): void
  • Returns any

  • Parameters

    • value: any

    Returns void

resolution

  • get resolution(): number
  • set resolution(v: number): void
  • 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 datapoint. When Resolution = 0, all datapoints will be rendered as graphical objects. Charts with a higher resolution will have faster performance.

    Returns 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 datapoint. When Resolution = 0, all datapoints will be rendered as graphical objects. Charts with a higher resolution will have faster performance.

    Parameters

    • v: number

    Returns void

rightMargin

  • get rightMargin(): number
  • set rightMargin(v: number): void
  • 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

  • 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}/>

    Parameters

    • v: number

    Returns void

seriesAdded

  • get seriesAdded(): function
  • set seriesAdded(ev: function): 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 function

  • 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

seriesPointerDown

  • get seriesPointerDown(): function
  • set seriesPointerDown(ev: function): 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 function

  • Occurs when the pointer is pressed down over a Series.

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

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

    Parameters

    Returns void

seriesPointerEnter

  • get seriesPointerEnter(): function
  • set seriesPointerEnter(ev: function): void

seriesPointerLeave

  • get seriesPointerLeave(): function
  • set seriesPointerLeave(ev: function): 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 function

  • Occurs when the pointer leaves a Series.

    SeriesPointerLeave event raised when the pointer leaves a Series.

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

    Parameters

    Returns void

seriesPointerMove

  • get seriesPointerMove(): function
  • set seriesPointerMove(ev: function): 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 function

  • Occurs when the pointer moves over a Series.

    SeriesPointerMove event raised when the pointer moves over a Series.

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

    Parameters

    Returns void

seriesPointerUp

  • get seriesPointerUp(): function
  • set seriesPointerUp(ev: function): 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 function

  • Occurs when the pointer is released over a Series.

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

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

    Parameters

    Returns void

seriesRemoved

  • get seriesRemoved(): function
  • set seriesRemoved(ev: function): 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 function

  • 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

subtitle

  • get subtitle(): string
  • set subtitle(v: string): void
  • 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

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

    Parameters

    • v: string

    Returns void

subtitleAlignment

  • get subtitleAlignment(): HorizontalAlignment
  • set subtitleAlignment(v: HorizontalAlignment): void
  • 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

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

    Parameters

    • v: HorizontalAlignment

    Returns void

subtitleBottomMargin

  • get subtitleBottomMargin(): number
  • set subtitleBottomMargin(v: number): void
  • 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

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

    Parameters

    • v: number

    Returns void

subtitleLeftMargin

  • get subtitleLeftMargin(): number
  • set subtitleLeftMargin(v: number): void
  • 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

  • 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}/>

    Parameters

    • v: number

    Returns void

subtitleRightMargin

  • get subtitleRightMargin(): number
  • set subtitleRightMargin(v: number): void
  • 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

  • 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}/>

    Parameters

    • v: number

    Returns void

subtitleTextColor

  • get subtitleTextColor(): string
  • set subtitleTextColor(v: string): void
  • 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

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

    Parameters

    • v: string

    Returns void

subtitleTextStyle

  • get subtitleTextStyle(): string
  • set subtitleTextStyle(v: string): void
  • 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

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

    Parameters

    • v: string

    Returns void

subtitleTopMargin

  • get subtitleTopMargin(): number
  • set subtitleTopMargin(v: number): void
  • 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

  • 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}/>

    Parameters

    • v: number

    Returns void

thickness

  • get thickness(): number
  • set thickness(v: number): void
  • 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

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

    Parameters

    • v: number

    Returns void

titleAlignment

  • get titleAlignment(): HorizontalAlignment
  • set titleAlignment(v: HorizontalAlignment): void
  • 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

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

    Parameters

    • v: HorizontalAlignment

    Returns void

titleBottomMargin

  • get titleBottomMargin(): number
  • set titleBottomMargin(v: number): void
  • 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

  • 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}/>

    Parameters

    • v: number

    Returns void

titleLeftMargin

  • get titleLeftMargin(): number
  • set titleLeftMargin(v: number): void
  • 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

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

    Parameters

    • v: number

    Returns void

titleRightMargin

  • get titleRightMargin(): number
  • set titleRightMargin(v: number): void
  • 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

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

    Parameters

    • v: number

    Returns void

titleTextColor

  • get titleTextColor(): string
  • set titleTextColor(v: string): void
  • 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

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

    Parameters

    • v: string

    Returns void

titleTextStyle

  • get titleTextStyle(): string
  • set titleTextStyle(v: string): void
  • 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

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

    Parameters

    • v: string

    Returns void

titleTopMargin

  • get titleTopMargin(): number
  • set titleTopMargin(v: number): void
  • 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

  • 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} />

    Parameters

    • v: number

    Returns void

toolTipType

toolbarHeight

  • get toolbarHeight(): number
  • set toolbarHeight(v: number): void
  • Returns number

  • Parameters

    • v: number

    Returns void

toolbarTemplate

  • get toolbarTemplate(): any
  • set toolbarTemplate(value: any): void
  • Returns any

  • Parameters

    • value: any

    Returns void

tooltipTemplate

  • get tooltipTemplate(): React.SFC<IChartTooltipProps> | Component<IChartTooltipProps>
  • set tooltipTemplate(v: React.SFC<IChartTooltipProps> | Component<IChartTooltipProps>): void
  • Sets or gets the template reference to use for tooltips for all the series.

    Returns React.SFC<IChartTooltipProps> | Component<IChartTooltipProps>

  • Sets or gets the template reference to use for tooltips for all the series.

    Parameters

    • v: React.SFC<IChartTooltipProps> | Component<IChartTooltipProps>

    Returns void

tooltipTemplates

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

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

  • Sets or gets the template references to use for tooltips for all the series, in order.

    Parameters

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

    Returns void

topMargin

  • get topMargin(): number
  • set topMargin(v: number): void
  • 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

  • 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} />

    Parameters

    • v: number

    Returns void

transitionDuration

  • get transitionDuration(): number
  • set transitionDuration(v: number): void
  • 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

  • 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} />

    Parameters

    • v: number

    Returns void

transitionEasingFunction

  • get transitionEasingFunction(): function
  • set transitionEasingFunction(v: function): void
  • 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 function

      • (time: number): number
      • Parameters

        • time: number

        Returns 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

    • v: function
        • (time: number): number
        • Parameters

          • time: number

          Returns number

    Returns void

trendLineBrushes

  • get trendLineBrushes(): string[]
  • set trendLineBrushes(v: string[]): void
  • 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[]

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

    Parameters

    • v: string[]

    Returns void

trendLinePeriod

  • get trendLinePeriod(): number
  • set trendLinePeriod(v: number): void

trendLineThickness

  • get trendLineThickness(): number
  • set trendLineThickness(v: number): void
  • 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

  • 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} />

    Parameters

    • v: number

    Returns void

trendLineType

  • get trendLineType(): TrendLineType
  • set trendLineType(v: TrendLineType): void
  • 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

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

    Parameters

    • v: TrendLineType

    Returns void

unknownValuePlotting

  • get unknownValuePlotting(): UnknownValuePlotting
  • set unknownValuePlotting(v: UnknownValuePlotting): void
  • 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

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

    Parameters

    • v: UnknownValuePlotting

    Returns void

viewport

  • 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

volumeBrushes

  • get volumeBrushes(): string[]
  • set volumeBrushes(v: string[]): void
  • Brushes to use for filling volume series in the volume pane.

    Use the volumeBrushes property to set a collection of brushes that will be used to render fill area of multiple series in the volume pane of the Financial Chart control, e.g.

    <IgrFinancialChart
        width="100%"
        height="400px"
        dataSource={this.data}
        volumeBrushes="Green" />

    Returns string[]

  • Brushes to use for filling volume series in the volume pane.

    Use the volumeBrushes property to set a collection of brushes that will be used to render fill area of multiple series in the volume pane of the Financial Chart control, e.g.

    <IgrFinancialChart
        width="100%"
        height="400px"
        dataSource={this.data}
        volumeBrushes="Green" />

    Parameters

    • v: string[]

    Returns void

volumeOutlines

  • get volumeOutlines(): string[]
  • set volumeOutlines(v: string[]): void
  • Brushes to use for outlining volume series in the volume pane.

    Use the volumeOutlines property to set a collection of brushes that will be used to render outline of multiple series in the volume pane of the Financial Chart control, e.g.

    <IgrFinancialChart
        width="100%"
        height="400px"
        dataSource={this.data}
        volumeOutlines="Green" />

    Returns string[]

  • Brushes to use for outlining volume series in the volume pane.

    Use the volumeOutlines property to set a collection of brushes that will be used to render outline of multiple series in the volume pane of the Financial Chart control, e.g.

    <IgrFinancialChart
        width="100%"
        height="400px"
        dataSource={this.data}
        volumeOutlines="Green" />

    Parameters

    • v: string[]

    Returns void

volumeThickness

  • get volumeThickness(): number
  • set volumeThickness(v: number): void
  • The outline thickness of volume series in the volume pane.

    Use the volumeThickness property to set a number that will be used to render outline thickness of all series in the volume pane, e.g.

    <IgrFinancialChart
        width="100%"
        height="400px"
        dataSource={this.data}
        volumeThickness= {2.5}/>

    Returns number

  • The outline thickness of volume series in the volume pane.

    Use the volumeThickness property to set a number that will be used to render outline thickness of all series in the volume pane, e.g.

    <IgrFinancialChart
        width="100%"
        height="400px"
        dataSource={this.data}
        volumeThickness= {2.5}/>

    Parameters

    • v: number

    Returns void

volumeType

  • The type of series to display in the volume pane.

    Use the volumeType property to set a type of all series that will be rendered in the volume pane, e.g.

    <IgrFinancialChart
        width="100%"
        height="400px"
        dataSource={this.data}
        volumeType="Column" />

    Returns FinancialChartVolumeType

  • The type of series to display in the volume pane.

    Use the volumeType property to set a type of all series that will be rendered in the volume pane, e.g.

    <IgrFinancialChart
        width="100%"
        height="400px"
        dataSource={this.data}
        volumeType="Column" />

    Parameters

    Returns void

width

  • get width(): string
  • set width(value: string): void
  • Returns string

  • Parameters

    • value: string

    Returns void

windowRect

  • get windowRect(): IgRect
  • set windowRect(v: IgRect): void
  • 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

  • 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} />

    Parameters

    • v: IgRect

    Returns void

xAxisBreaks

  • get xAxisBreaks(): IgCollection<any, any>
  • set xAxisBreaks(v: IgCollection<any, any>): void
  • TimeAxisBreaks to apply to this chart when in time axis mode, representing spans of time to omit, such as weekends.

    Returns IgCollection<any, any>

  • TimeAxisBreaks to apply to this chart when in time axis mode, representing spans of time to omit, such as weekends.

    Parameters

    • v: IgCollection<any, any>

    Returns void

xAxisExtent

  • get xAxisExtent(): number
  • set xAxisExtent(v: number): void
  • 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

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

    Parameters

    • v: number

    Returns void

xAxisFormatLabel

  • get xAxisFormatLabel(): function
  • set xAxisFormatLabel(v: function): void
  • 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 function

      • (item: any): string
      • Parameters

        • item: any

        Returns 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

    • v: function
        • (item: any): string
        • Parameters

          • item: any

          Returns string

    Returns void

xAxisInverted

  • get xAxisInverted(): boolean
  • set xAxisInverted(v: boolean): void
  • 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

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

    Parameters

    • v: boolean

    Returns void

xAxisLabel

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

    Returns any

  • Gets or sets the format for labels along the X-axis.

    Parameters

    • v: any

    Returns void

xAxisLabelAngle

  • get xAxisLabelAngle(): number
  • set xAxisLabelAngle(v: number): void
  • 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

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

    Parameters

    • v: number

    Returns void

xAxisLabelBottomMargin

  • get xAxisLabelBottomMargin(): number
  • set xAxisLabelBottomMargin(v: number): void
  • 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

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

    Parameters

    • v: number

    Returns void

xAxisLabelHorizontalAlignment

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

    Returns HorizontalAlignment

  • Gets or sets Horizontal alignment of X-axis labels.

    Parameters

    • v: HorizontalAlignment

    Returns void

xAxisLabelLeftMargin

  • get xAxisLabelLeftMargin(): number
  • set xAxisLabelLeftMargin(v: number): void
  • 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

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

    Parameters

    • v: number

    Returns void

xAxisLabelRightMargin

  • get xAxisLabelRightMargin(): number
  • set xAxisLabelRightMargin(v: number): void
  • 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

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

    Parameters

    • v: number

    Returns void

xAxisLabelTextColor

  • get xAxisLabelTextColor(): string
  • set xAxisLabelTextColor(v: string): void
  • 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

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

    Parameters

    • v: string

    Returns void

xAxisLabelTextStyle

  • get xAxisLabelTextStyle(): string
  • set xAxisLabelTextStyle(v: string): void
  • 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

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

    Parameters

    • v: string

    Returns void

xAxisLabelTopMargin

  • get xAxisLabelTopMargin(): number
  • set xAxisLabelTopMargin(v: number): void
  • 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

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

    Parameters

    • v: number

    Returns void

xAxisLabelVerticalAlignment

  • get xAxisLabelVerticalAlignment(): VerticalAlignment
  • set xAxisLabelVerticalAlignment(v: VerticalAlignment): void
  • 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

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

    Parameters

    • v: VerticalAlignment

    Returns void

xAxisLabelVisibility

  • get xAxisLabelVisibility(): Visibility
  • set xAxisLabelVisibility(v: Visibility): void
  • 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

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

    Parameters

    • v: Visibility

    Returns void

xAxisMajorStroke

  • get xAxisMajorStroke(): string
  • set xAxisMajorStroke(v: string): void
  • 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

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

    Parameters

    • v: string

    Returns void

xAxisMajorStrokeThickness

  • get xAxisMajorStrokeThickness(): number
  • set xAxisMajorStrokeThickness(v: number): void
  • 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

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

    Parameters

    • v: number

    Returns void

xAxisMaximumValue

  • get xAxisMaximumValue(): Date
  • set xAxisMaximumValue(v: Date): void
  • Gets or sets maximum value on x-axis

    Returns Date

  • Gets or sets maximum value on x-axis

    Parameters

    • v: Date

    Returns void

xAxisMinimumValue

  • get xAxisMinimumValue(): Date
  • set xAxisMinimumValue(v: Date): void
  • Gets or sets minimum value on x-axis

    Returns Date

  • Gets or sets minimum value on x-axis

    Parameters

    • v: Date

    Returns void

xAxisMinorStroke

  • get xAxisMinorStroke(): string
  • set xAxisMinorStroke(v: string): void
  • 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

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

    Parameters

    • v: string

    Returns void

xAxisMinorStrokeThickness

  • get xAxisMinorStrokeThickness(): number
  • set xAxisMinorStrokeThickness(v: number): void
  • 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

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

    Parameters

    • v: number

    Returns void

xAxisMode

  • The scaling mode of the X-axis.

    Use the xAxisMode property to plot data items without any breaks in data range (Ordinal mode) or with breaks in data range (Time mode) such as weekends/holidays. Note that the Ordinal axis mode is less expensive to use in the financial chart than the Time axis mode.

    <IgrFinancialChart
         xAxisMode="time"
        dataSource={this.data} />

    Returns FinancialChartXAxisMode

  • The scaling mode of the X-axis.

    Use the xAxisMode property to plot data items without any breaks in data range (Ordinal mode) or with breaks in data range (Time mode) such as weekends/holidays. Note that the Ordinal axis mode is less expensive to use in the financial chart than the Time axis mode.

    <IgrFinancialChart
         xAxisMode="time"
        dataSource={this.data} />

    Parameters

    Returns void

xAxisStrip

  • get xAxisStrip(): string
  • set xAxisStrip(v: string): void
  • 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

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

    Parameters

    • v: string

    Returns void

xAxisStroke

  • get xAxisStroke(): string
  • set xAxisStroke(v: string): void
  • 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

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

    Parameters

    • v: string

    Returns void

xAxisStrokeThickness

  • get xAxisStrokeThickness(): number
  • set xAxisStrokeThickness(v: number): void
  • 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

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

    Parameters

    • v: number

    Returns void

xAxisTickLength

  • get xAxisTickLength(): number
  • set xAxisTickLength(v: number): void
  • 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

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

    Parameters

    • v: number

    Returns void

xAxisTickStroke

  • get xAxisTickStroke(): string
  • set xAxisTickStroke(v: string): void
  • 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

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

    Parameters

    • v: string

    Returns void

xAxisTickStrokeThickness

  • get xAxisTickStrokeThickness(): number
  • set xAxisTickStrokeThickness(v: number): void
  • 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

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

    Parameters

    • v: number

    Returns void

xAxisTitle

  • get xAxisTitle(): string
  • set xAxisTitle(v: string): void
  • 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

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

    Parameters

    • v: string

    Returns void

xAxisTitleAlignment

  • get xAxisTitleAlignment(): HorizontalAlignment
  • set xAxisTitleAlignment(v: HorizontalAlignment): void
  • 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

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

    Parameters

    • v: HorizontalAlignment

    Returns void

xAxisTitleAngle

  • get xAxisTitleAngle(): number
  • set xAxisTitleAngle(v: number): void
  • 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

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

    Parameters

    • v: number

    Returns void

xAxisTitleBottomMargin

  • get xAxisTitleBottomMargin(): number
  • set xAxisTitleBottomMargin(v: number): void
  • 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

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

    Parameters

    • v: number

    Returns void

xAxisTitleLeftMargin

  • get xAxisTitleLeftMargin(): number
  • set xAxisTitleLeftMargin(v: number): void
  • 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

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

    Parameters

    • v: number

    Returns void

xAxisTitleMargin

  • get xAxisTitleMargin(): number
  • set xAxisTitleMargin(v: number): void
  • 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

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

    Parameters

    • v: number

    Returns void

xAxisTitleRightMargin

  • get xAxisTitleRightMargin(): number
  • set xAxisTitleRightMargin(v: number): void
  • 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

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

    Parameters

    • v: number

    Returns void

xAxisTitleTextColor

  • get xAxisTitleTextColor(): string
  • set xAxisTitleTextColor(v: string): void
  • 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

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

    Parameters

    • v: string

    Returns void

xAxisTitleTextStyle

  • get xAxisTitleTextStyle(): string
  • set xAxisTitleTextStyle(v: string): void
  • 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

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

    Parameters

    • v: string

    Returns void

xAxisTitleTopMargin

  • get xAxisTitleTopMargin(): number
  • set xAxisTitleTopMargin(v: number): void
  • 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

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

    Parameters

    • v: number

    Returns void

yAxisAbbreviateLargeNumbers

  • get yAxisAbbreviateLargeNumbers(): boolean
  • set yAxisAbbreviateLargeNumbers(v: boolean): void
  • Gets or sets whether the large numbers on the Y-axis labels are abbreviated.

    Returns boolean

  • Gets or sets whether the large numbers on the Y-axis labels are abbreviated.

    Parameters

    • v: boolean

    Returns void

yAxisActualMaximum

  • get yAxisActualMaximum(): number
  • Gets the current maximum value for the Y-axis.

    Returns number

yAxisActualMinimum

  • get yAxisActualMinimum(): number
  • Gets the current minimum value for the Y-axis.

    Returns number

yAxisExtent

  • get yAxisExtent(): number
  • set yAxisExtent(v: number): void
  • 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

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

    Parameters

    • v: number

    Returns void

yAxisFormatLabel

  • get yAxisFormatLabel(): function
  • set yAxisFormatLabel(v: function): void
  • 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 function

      • (item: any): string
      • Parameters

        • item: any

        Returns 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

    • v: function
        • (item: any): string
        • Parameters

          • item: any

          Returns string

    Returns void

yAxisInterval

  • get yAxisInterval(): number
  • set yAxisInterval(v: number): void
  • Gets or sets the distance between each label and grid line along the Y-axis.

    The yAxisInterval determines how often to show a label, tickmark, and/or gridline along the y-axis. Set this property to a number less than the numeric range of the y-axis.

    <IgrFinancialChart
        width="100%"
        height="400px"
        dataSource={this.data}
        yAxisInterval={20}
     />

    Returns number

  • Gets or sets the distance between each label and grid line along the Y-axis.

    The yAxisInterval determines how often to show a label, tickmark, and/or gridline along the y-axis. Set this property to a number less than the numeric range of the y-axis.

    <IgrFinancialChart
        width="100%"
        height="400px"
        dataSource={this.data}
        yAxisInterval={20}
     />

    Parameters

    • v: number

    Returns void

yAxisInverted

  • get yAxisInverted(): boolean
  • set yAxisInverted(v: boolean): void
  • 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

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

    Parameters

    • v: boolean

    Returns void

yAxisIsLogarithmic

  • get yAxisIsLogarithmic(): boolean
  • set yAxisIsLogarithmic(v: boolean): void
  • Gets or sets whether the Y-axis should use a logarithmic scale instead of a linear one. Since log(-1) is imaginary and log(0) is undefined, it is recommended to enable this property only when the Y-axis minimum is greater than zero.

    Returns boolean

  • Gets or sets whether the Y-axis should use a logarithmic scale instead of a linear one. Since log(-1) is imaginary and log(0) is undefined, it is recommended to enable this property only when the Y-axis minimum is greater than zero.

    Parameters

    • v: boolean

    Returns void

yAxisLabel

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

    Returns any

  • Gets or sets the property or string from which the labels are derived.

    Parameters

    • v: any

    Returns void

yAxisLabelAngle

  • get yAxisLabelAngle(): number
  • set yAxisLabelAngle(v: number): void
  • 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

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

    Parameters

    • v: number

    Returns void

yAxisLabelBottomMargin

  • get yAxisLabelBottomMargin(): number
  • set yAxisLabelBottomMargin(v: number): void
  • 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

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

    Parameters

    • v: number

    Returns void

yAxisLabelHorizontalAlignment

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

    Returns HorizontalAlignment

  • Gets or sets Horizontal alignment of Y-axis labels.

    Parameters

    • v: HorizontalAlignment

    Returns void

yAxisLabelLeftMargin

  • get yAxisLabelLeftMargin(): number
  • set yAxisLabelLeftMargin(v: number): void
  • 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

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

    Parameters

    • v: number

    Returns void

yAxisLabelLocation

yAxisLabelRightMargin

  • get yAxisLabelRightMargin(): number
  • set yAxisLabelRightMargin(v: number): void
  • 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

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

    Parameters

    • v: number

    Returns void

yAxisLabelTextColor

  • get yAxisLabelTextColor(): string
  • set yAxisLabelTextColor(v: string): void
  • 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

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

    Parameters

    • v: string

    Returns void

yAxisLabelTextStyle

  • get yAxisLabelTextStyle(): string
  • set yAxisLabelTextStyle(v: string): void
  • 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

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

    Parameters

    • v: string

    Returns void

yAxisLabelTopMargin

  • get yAxisLabelTopMargin(): number
  • set yAxisLabelTopMargin(v: number): void
  • 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

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

    Parameters

    • v: number

    Returns void

yAxisLabelVerticalAlignment

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

    Returns VerticalAlignment

  • Gets or sets Vertical alignment of Y-axis labels.

    Parameters

    • v: VerticalAlignment

    Returns void

yAxisLabelVisibility

  • get yAxisLabelVisibility(): Visibility
  • set yAxisLabelVisibility(v: Visibility): void
  • 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

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

    Parameters

    • v: Visibility

    Returns void

yAxisLogarithmBase

  • get yAxisLogarithmBase(): number
  • set yAxisLogarithmBase(v: number): void
  • Gets or sets the base value to use in the log function when mapping the position of data items along the Y-axis. This property is effective only when YAxisIsLogarithmic is true.

    Returns number

  • Gets or sets the base value to use in the log function when mapping the position of data items along the Y-axis. This property is effective only when YAxisIsLogarithmic is true.

    Parameters

    • v: number

    Returns void

yAxisMajorStroke

  • get yAxisMajorStroke(): string
  • set yAxisMajorStroke(v: string): void
  • 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

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

    Parameters

    • v: string

    Returns void

yAxisMajorStrokeThickness

  • get yAxisMajorStrokeThickness(): number
  • set yAxisMajorStrokeThickness(v: number): void
  • 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

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

    Parameters

    • v: number

    Returns void

yAxisMaximumValue

  • get yAxisMaximumValue(): number
  • set yAxisMaximumValue(v: number): void
  • Gets or sets the data value corresponding to the maximum value of the Y-axis.

    The yAxisMaximumValue determines ending value of labels, tickmarks, and gridlines on the y-axis.

    <IgrFinancialChart
     yAxisMinimumValue={-200}
        yAxisMaximumValue={100}
        dataSource={this.data} />

    Returns number

  • Gets or sets the data value corresponding to the maximum value of the Y-axis.

    The yAxisMaximumValue determines ending value of labels, tickmarks, and gridlines on the y-axis.

    <IgrFinancialChart
     yAxisMinimumValue={-200}
        yAxisMaximumValue={100}
        dataSource={this.data} />

    Parameters

    • v: number

    Returns void

yAxisMinimumValue

  • get yAxisMinimumValue(): number
  • set yAxisMinimumValue(v: number): void
  • Gets or sets the data value corresponding to the minimum value of the Y-axis.

    The yAxisMinimumValue determines starting value of labels, tickmarks, and gridlines on the y-axis.

    <IgrFinancialChart
        yAxisMinimumValue={-200}
        yAxisMaximumValue={1000}
        dataSource={this.data} />

    Returns number

  • Gets or sets the data value corresponding to the minimum value of the Y-axis.

    The yAxisMinimumValue determines starting value of labels, tickmarks, and gridlines on the y-axis.

    <IgrFinancialChart
        yAxisMinimumValue={-200}
        yAxisMaximumValue={1000}
        dataSource={this.data} />

    Parameters

    • v: number

    Returns void

yAxisMinorInterval

  • get yAxisMinorInterval(): number
  • set yAxisMinorInterval(v: number): void
  • Gets or sets the frequency of displayed minor lines along the Y-axis.

    The yAxisMinorInterval determines how often to show minor gridline along the y-axis. Set this property to a number less than the yAxisInterval and the numeric range of the y-axis.

    <IgrFinancialChart
         yAxisMinorInterval={50}
        dataSource={this.data} />

    Returns number

  • Gets or sets the frequency of displayed minor lines along the Y-axis.

    The yAxisMinorInterval determines how often to show minor gridline along the y-axis. Set this property to a number less than the yAxisInterval and the numeric range of the y-axis.

    <IgrFinancialChart
         yAxisMinorInterval={50}
        dataSource={this.data} />

    Parameters

    • v: number

    Returns void

yAxisMinorStroke

  • get yAxisMinorStroke(): string
  • set yAxisMinorStroke(v: string): void
  • 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

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

    Parameters

    • v: string

    Returns void

yAxisMinorStrokeThickness

  • get yAxisMinorStrokeThickness(): number
  • set yAxisMinorStrokeThickness(v: number): void
  • 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

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

    Parameters

    • v: number

    Returns void

yAxisMode

  • The scaling mode of the Y-axis.

    Use the yAxisMode property to plot data items using their actual values (Numeric) or using percent changes from the first data point (PercentChange), e.g.

    <IgrFinancialChart
         yAxisMode={this.state.yAxisMode}
        dataSource={this.data} />

    Returns FinancialChartYAxisMode

  • The scaling mode of the Y-axis.

    Use the yAxisMode property to plot data items using their actual values (Numeric) or using percent changes from the first data point (PercentChange), e.g.

    <IgrFinancialChart
         yAxisMode={this.state.yAxisMode}
        dataSource={this.data} />

    Parameters

    Returns void

yAxisStrip

  • get yAxisStrip(): string
  • set yAxisStrip(v: string): void
  • 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

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

    Parameters

    • v: string

    Returns void

yAxisStroke

  • get yAxisStroke(): string
  • set yAxisStroke(v: string): void
  • 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

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

    Parameters

    • v: string

    Returns void

yAxisStrokeThickness

  • get yAxisStrokeThickness(): number
  • set yAxisStrokeThickness(v: number): void
  • 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

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

    Parameters

    • v: number

    Returns void

yAxisTickLength

  • get yAxisTickLength(): number
  • set yAxisTickLength(v: number): void
  • 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

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

    Parameters

    • v: number

    Returns void

yAxisTickStroke

  • get yAxisTickStroke(): string
  • set yAxisTickStroke(v: string): void
  • 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

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

    Parameters

    • v: string

    Returns void

yAxisTickStrokeThickness

  • get yAxisTickStrokeThickness(): number
  • set yAxisTickStrokeThickness(v: number): void
  • 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

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

    Parameters

    • v: number

    Returns void

yAxisTitle

  • get yAxisTitle(): string
  • set yAxisTitle(v: string): void
  • 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

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

    Parameters

    • v: string

    Returns void

yAxisTitleAlignment

  • get yAxisTitleAlignment(): VerticalAlignment
  • set yAxisTitleAlignment(v: VerticalAlignment): void
  • 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

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

    Parameters

    • v: VerticalAlignment

    Returns void

yAxisTitleAngle

  • get yAxisTitleAngle(): number
  • set yAxisTitleAngle(v: number): void
  • 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

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

    Parameters

    • v: number

    Returns void

yAxisTitleBottomMargin

  • get yAxisTitleBottomMargin(): number
  • set yAxisTitleBottomMargin(v: number): void
  • 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

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

    Parameters

    • v: number

    Returns void

yAxisTitleLeftMargin

  • get yAxisTitleLeftMargin(): number
  • set yAxisTitleLeftMargin(v: number): void
  • 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

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

    Parameters

    • v: number

    Returns void

yAxisTitleMargin

  • get yAxisTitleMargin(): number
  • set yAxisTitleMargin(v: number): void
  • 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

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

    Parameters

    • v: number

    Returns void

yAxisTitleRightMargin

  • get yAxisTitleRightMargin(): number
  • set yAxisTitleRightMargin(v: number): void
  • 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

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

    Parameters

    • v: number

    Returns void

yAxisTitleTextColor

  • get yAxisTitleTextColor(): string
  • set yAxisTitleTextColor(v: string): void
  • 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

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

    Parameters

    • v: string

    Returns void

yAxisTitleTextStyle

  • get yAxisTitleTextStyle(): string
  • set yAxisTitleTextStyle(v: string): void
  • 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

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

    Parameters

    • v: string

    Returns void

yAxisTitleTopMargin

  • get yAxisTitleTopMargin(): number
  • set yAxisTitleTopMargin(v: number): void
  • 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

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

    Parameters

    • v: number

    Returns void

zoomSliderType

  • Gets or sets type of series to display in the zoom slider pane.

    Use the zoomSliderType property to set a type of all series that will be rendered in the zoom pane, e.g.

    <IgrFinancialChart
        zoomSliderType="Candle"
        dataSource={this.data} />

    Returns FinancialChartZoomSliderType

  • Gets or sets type of series to display in the zoom slider pane.

    Use the zoomSliderType property to set a type of all series that will be rendered in the zoom pane, e.g.

    <IgrFinancialChart
        zoomSliderType="Candle"
        dataSource={this.data} />

    Parameters

    Returns void

zoomSliderXAxisMajorStroke

  • get zoomSliderXAxisMajorStroke(): string
  • set zoomSliderXAxisMajorStroke(v: string): void
  • Gets or sets stroke brush of major gridlines on x-axis of the zoom slider pane

    Returns string

  • Gets or sets stroke brush of major gridlines on x-axis of the zoom slider pane

    Parameters

    • v: string

    Returns void

zoomSliderXAxisMajorStrokeThickness

  • get zoomSliderXAxisMajorStrokeThickness(): number
  • set zoomSliderXAxisMajorStrokeThickness(v: number): void
  • Gets or sets thickness of major gridlines on x-axis of the zoom slider pane

    Returns number

  • Gets or sets thickness of major gridlines on x-axis of the zoom slider pane

    Parameters

    • v: number

    Returns void

Methods

Optional UNSAFE_componentWillMount

  • UNSAFE_componentWillMount(): void

Optional UNSAFE_componentWillReceiveProps

Optional UNSAFE_componentWillUpdate

  • UNSAFE_componentWillUpdate(nextProps: Readonly<IIgrFinancialChartProps>, nextState: Readonly<__type>, nextContext: any): void

bindCalloutsData

  • bindCalloutsData(): void

bindData

  • bindData(): void
  • Returns void

Optional componentDidCatch

  • componentDidCatch(error: Error, errorInfo: ErrorInfo): void
  • Catches exceptions generated in descendant components. Unhandled exceptions will cause the entire component tree to unmount.

    Parameters

    • error: Error
    • errorInfo: ErrorInfo

    Returns void

componentDidMount

  • componentDidMount(): void

Optional componentDidUpdate

  • componentDidUpdate(prevProps: Readonly<IIgrFinancialChartProps>, prevState: Readonly<__type>, snapshot?: SS): 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

    Returns void

Optional componentWillMount

  • componentWillMount(): void

Optional componentWillReceiveProps

componentWillUnmount

  • componentWillUnmount(): void
  • Returns void

Optional componentWillUpdate

  • componentWillUpdate(nextProps: Readonly<IIgrFinancialChartProps>, nextState: Readonly<__type>, nextContext: any): void

destroy

  • destroy(): void
  • Destroy this control

    Use the destroy property to destroy the chart.

    this.chart.destroy();

    Returns void

exportSerializedVisualData

  • exportSerializedVisualData(): string
  • Returns visuals as a serialized string.

    Returns string

flush

  • flush(): void
  • Forces any pending refresh to the chart to be finished.

    Method flush used to Forces any pending deferred work to render on the chart before continuing.

    this.chart.flush();

    Returns void

getScaledValueX

  • getScaledValueX(unscaledValue: number): number
  • Converts the given visual location to a data value.

    Parameters

    • unscaledValue: number
      • The x-coordinate of the location to scale.

    Returns number

getScaledValueY

  • getScaledValueY(unscaledValue: number): number
  • Converts the given visual location to a data value.

    Parameters

    • unscaledValue: number
      • The y-coordinate of the location to scale.

    Returns number

Optional getSnapshotBeforeUpdate

  • Runs before React applies the result of render to the document, and returns an object to be given to componentDidUpdate. Useful for saving things such as scroll position before render causes changes to it.

    Note: the presence of getSnapshotBeforeUpdate prevents any of the deprecated lifecycle events from running.

    Parameters

    Returns SS | null

getUnscaledValueX

  • getUnscaledValueX(scaledValue: number): number
  • Converts the given data value to a visual location.

    Parameters

    • scaledValue: number
      • The data value to un-scale.

    Returns number

getUnscaledValueY

  • getUnscaledValueY(scaledValue: number): number
  • Converts the given data value to a visual location.

    Parameters

    • scaledValue: number
      • The data value to un-scale.

    Returns number

hideToolTip

  • hideToolTip(): void
  • Hides the active main tooltip, if displayed.

    Use the hideToolTip method to hide the active tooltip.

    this.chart.hideToolTip();

    Returns void

initializeContent

  • initializeContent(): void
  • Returns void

notifyClearItems

  • notifyClearItems(source_: any): void

notifyInsertItem

  • notifyInsertItem(source_: any, index: number, newItem: any): void
  • Parameters

    • source_: any
    • index: number
    • newItem: any

    Returns void

notifyRemoveItem

  • notifyRemoveItem(source_: any, index: number, oldItem: any): void
  • Parameters

    • source_: any
    • index: number
    • oldItem: any

    Returns void

notifyResized

  • notifyResized(): void
  • Called when the control has been resized.

    notifyResized method Called when the control has been resized.

    this.chart.notifyResized();

    Returns void

notifySetItem

  • notifySetItem(source_: any, index: number, oldItem: any, newItem: any): void
  • Parameters

    • source_: any
    • index: number
    • oldItem: any
    • newItem: any

    Returns void

notifyVisualPropertiesChanged

  • notifyVisualPropertiesChanged(): void

provideContainer

  • provideContainer(container: any): void
  • Called by the UI framework to provide a UI container for rendering this control.

    Parameters

    • container: any
      • The UI container element.

    Returns void

render

  • render(): DetailedReactHTMLElement<object, any>
  • Returns DetailedReactHTMLElement<object, any>

shouldComponentUpdate

  • shouldComponentUpdate(nextProps: any, nextState: any): boolean
  • Parameters

    • nextProps: any
    • nextState: any

    Returns boolean