Interface IIgrFinancialChartProps

Hierarchy

Properties

Properties

Optional alignsGridLinesToPixels

alignsGridLinesToPixels: boolean | string

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;

Optional animateSeriesWhenAxisRangeChanges

animateSeriesWhenAxisRangeChanges: boolean | string

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

Optional applyCustomIndicators

applyCustomIndicators: function

Event raised by the chart when custom indicator data is needed from the application. During series rendering, event will be raised once for each value in the CustomIndicatorNames collection.

Optional bottomMargin

bottomMargin: number | string

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

Optional brushes

brushes: string[] | string

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

Use the brushes property to set the brushes.

this.chart.brushes = ["#ff0000","#00ff00"];

Optional calloutStyleUpdating

calloutStyleUpdating: function

Occurs when the style of a callout is updated.

Type declaration

Optional calloutStyleUpdatingEventEnabled

calloutStyleUpdatingEventEnabled: boolean | string

Gets or sets if event annotations should be displayed.

Optional calloutsContentMemberPath

calloutsContentMemberPath: string

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

Optional calloutsDataSource

calloutsDataSource: any[]

Optional calloutsLabelMemberPath

calloutsLabelMemberPath: string

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

Optional calloutsVisible

calloutsVisible: boolean | string

Gets or sets if callouts should be displayed.

Optional calloutsXMemberPath

calloutsXMemberPath: string

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

Optional calloutsYMemberPath

calloutsYMemberPath: string

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

Optional chartTitle

chartTitle: 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"    />

Optional chartType

chartType: FinancialChartType | string

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

Optional crosshairsAnnotationEnabled

crosshairsAnnotationEnabled: boolean | string

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

Optional crosshairsDisplayMode

crosshairsDisplayMode: CrosshairsDisplayMode | string

Gets or sets the crosshairs to be displayed.

Optional crosshairsSnapToData

crosshairsSnapToData: boolean | string

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

Optional customIndicatorNames

customIndicatorNames: IgrCustomIndicatorNameCollection | string

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.

Optional dataSource

dataSource: any[]

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

Optional excludedProperties

excludedProperties: string[]

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

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

this.chart.excludedProperties = ["ID", "Discount"];
    <IgrCategoryChart
    chartType="Line"
    markerTypes={this.state.markersTypes}
    dataSource={this.categoryData}
    excludedProperties="value" />

Optional finalValueAnnotationsVisible

finalValueAnnotationsVisible: boolean | string

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

Optional height

height: string

Optional includedProperties

includedProperties: string[]

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

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

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

Optional indicatorBrushes

indicatorBrushes: string[] | 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" />

Optional indicatorDisplayTypes

indicatorDisplayTypes: IgrIndicatorDisplayTypeCollection | string

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

Optional indicatorLongPeriod

indicatorLongPeriod: number | string

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

Optional indicatorMultiplier

indicatorMultiplier: number | string

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

Optional indicatorNegativeBrushes

indicatorNegativeBrushes: string[] | 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"/>

Optional indicatorPeriod

indicatorPeriod: number | string

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

Optional indicatorShortPeriod

indicatorShortPeriod: number | string

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

Optional indicatorSignalPeriod

indicatorSignalPeriod: number | string

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

Optional indicatorSmoothingPeriod

indicatorSmoothingPeriod: number | string

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

Optional indicatorThickness

indicatorThickness: number | string

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

Optional indicatorTypes

indicatorTypes: IgrFinancialIndicatorTypeCollection | string

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

Optional isHorizontalZoomEnabled

isHorizontalZoomEnabled: boolean | string

Optional isLegendVisible

isLegendVisible: boolean | string

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

Optional isSeriesHighlightingEnabled

isSeriesHighlightingEnabled: boolean | string

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

Optional isToolbarVisible

isToolbarVisible: boolean | string

A boolean property controlling the visibility of the toolbar.

Optional isVerticalZoomEnabled

isVerticalZoomEnabled: boolean | string

Optional isWindowSyncedToVisibleRange

isWindowSyncedToVisibleRange: boolean | string

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.

Optional leftMargin

leftMargin: number | string

Optional markerBrushes

markerBrushes: string[] | string

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

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

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

Optional markerMaxCount

markerMaxCount: number | string

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

Optional markerOutlines

markerOutlines: string[] | string

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

markerOutlines property used for rendering outlines of data point markers.

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

Optional markerTypes

markerTypes: IgrMarkerTypeCollection | string

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

Optional negativeBrushes

negativeBrushes: string[] | 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" />

Optional negativeOutlines

negativeOutlines: string[] | 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"/>

Optional outlines

outlines: string[] | string

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

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

<IgrCategoryChart
    chartType="Line"
    outlines= "#ff0000"
    dataSource={this.categoryData}/>

Optional overlayBrushes

overlayBrushes: string[] | 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" />

Optional overlayOutlines

overlayOutlines: string[] | 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" />

Optional overlayThickness

overlayThickness: number | string

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

Optional overlayTypes

overlayTypes: IgrFinancialOverlayTypeCollection | string

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

Optional pixelScalingRatio

pixelScalingRatio: number | string

Gets or sets the scaling value used to affect the pixel density of the control. A higher scaling ratio will produce crisper visuals at the expense of memory. Lower values will cause the control to appear blurry.

Optional rangeSelectorOptions

rangeSelectorOptions: IgrFinancialChartRangeSelectorOptionCollection | string

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

Optional resolution

resolution: number | string

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.

Optional rightMargin

rightMargin: number | string

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

Optional seriesAdded

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

Type declaration

Optional seriesPointerDown

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

  }

Type declaration

Optional seriesPointerEnter

seriesPointerEnter: function

Occurs when the pointer enters a Series.

SeriesPointerEnter event raised when the pointer enters a Series.

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

  }

Type declaration

Optional seriesPointerLeave

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

  }

Type declaration

Optional seriesPointerMove

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

  }

Type declaration

Optional seriesPointerUp

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

  }

Type declaration

Optional seriesRemoved

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

  }

Type declaration

Optional subtitle

subtitle: string

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

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

 <IgrCategoryChart
    width="100%"
    height="100%"
    chartType="Line"
    dataSource={this.categoryData}
    subtitle= "CategoryChart Subtitle"/>
 this.chart.subtitle ="CategoryChart Subtitle" ;

Optional subtitleAlignment

subtitleAlignment: HorizontalAlignment | string

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;

Optional subtitleBottomMargin

subtitleBottomMargin: number | string

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 ;

Optional subtitleLeftMargin

subtitleLeftMargin: number | string

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

Optional subtitleRightMargin

subtitleRightMargin: number | string

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

Optional subtitleTextColor

subtitleTextColor: string

Gets or sets color of chart subtitle

Use subtitleTextColor property to color the subtitle.

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

Optional subtitleTextStyle

subtitleTextStyle: string

Gets or sets CSS font property for the chart subtitle

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

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

Optional subtitleTopMargin

subtitleTopMargin: number | string

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

Optional thickness

thickness: number | string

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.

Optional titleAlignment

titleAlignment: HorizontalAlignment | string

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

Optional titleBottomMargin

titleBottomMargin: number | string

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

Optional titleLeftMargin

titleLeftMargin: number | string

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>

Optional titleRightMargin

titleRightMargin: number | string

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>

Optional titleTextColor

titleTextColor: string

Gets or sets color of chart title

Use titleTextColor property to color the chart title

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

Optional titleTextStyle

titleTextStyle: string

Gets or sets CSS font property for the chart title

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

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

Optional titleTopMargin

titleTopMargin: number | string

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

Optional toolTipType

toolTipType: ToolTipType | string

Gets or sets the style of tooltip to be displayed.

Optional toolbarHeight

toolbarHeight: number | string

Optional tooltipTemplate

tooltipTemplate: React.SFC<IChartTooltipProps> | Component<IChartTooltipProps>

Optional tooltipTemplates

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

Optional topMargin

topMargin: number | string

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

Optional transitionDuration

transitionDuration: number | string

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

Optional transitionEasingFunction

transitionEasingFunction: function

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

Type declaration

    • (time: number): number
    • Parameters

      • time: number

      Returns number

Optional trendLineBrushes

trendLineBrushes: string[] | string

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

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

this.chart.trendLineBrushes=["#ff0000", "#ffff00", "#00ffff"]    ;
<IgrCategoryChart dataSource={this.state.data}
               trendLineBrushes="#ffff00" />

Optional trendLinePeriod

trendLinePeriod: number | string

Optional trendLineThickness

trendLineThickness: number | string

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

Optional trendLineType

trendLineType: TrendLineType | string

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

Optional unknownValuePlotting

unknownValuePlotting: UnknownValuePlotting | string

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

Optional volumeBrushes

volumeBrushes: string[] | 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" />

Optional volumeOutlines

volumeOutlines: string[] | 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" />

Optional volumeThickness

volumeThickness: number | string

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

Optional volumeType

volumeType: FinancialChartVolumeType | string

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

Optional width

width: string

Optional windowRect

windowRect: IgRect | string

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

Optional xAxisExtent

xAxisExtent: number | string

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>

Optional xAxisFormatLabel

xAxisFormatLabel: function

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>

Type declaration

    • (item: any): string
    • Parameters

      • item: any

      Returns string

Optional xAxisInverted

xAxisInverted: boolean | string

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>

Optional xAxisLabel

xAxisLabel: any

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

Optional xAxisLabelAngle

xAxisLabelAngle: number | string

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>

Optional xAxisLabelBottomMargin

xAxisLabelBottomMargin: number | string

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>

Optional xAxisLabelHorizontalAlignment

xAxisLabelHorizontalAlignment: HorizontalAlignment | string

Gets or sets Horizontal alignment of X-axis labels.

Optional xAxisLabelLeftMargin

xAxisLabelLeftMargin: number | string

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>

Optional xAxisLabelRightMargin

xAxisLabelRightMargin: number | string

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>

Optional xAxisLabelTextColor

xAxisLabelTextColor: string

Gets or sets color of labels on the X-axis

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

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

Optional xAxisLabelTextStyle

xAxisLabelTextStyle: string

Gets or sets CSS font property for labels on X-axis

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

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

Optional xAxisLabelTopMargin

xAxisLabelTopMargin: number | string

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>

Optional xAxisLabelVerticalAlignment

xAxisLabelVerticalAlignment: VerticalAlignment | string

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>

Optional xAxisLabelVisibility

xAxisLabelVisibility: Visibility | string

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>

Optional xAxisMajorStroke

xAxisMajorStroke: string

Gets or sets the color to apply to major gridlines along the X-axis.

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

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

Optional xAxisMajorStrokeThickness

xAxisMajorStrokeThickness: number | string

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>

Optional xAxisMaximumValue

xAxisMaximumValue: Date

Gets or sets maximum value on x-axis

Optional xAxisMinimumValue

xAxisMinimumValue: Date

Gets or sets minimum value on x-axis

Optional xAxisMinorStroke

xAxisMinorStroke: string

Gets or sets the color to apply to minor gridlines along the X-axis.

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

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

Optional xAxisMinorStrokeThickness

xAxisMinorStrokeThickness: number | string

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>

Optional xAxisMode

xAxisMode: FinancialChartXAxisMode | string

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

Optional xAxisStrip

xAxisStrip: string

Gets or sets the color to apply to stripes along the X-axis.

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

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

Optional xAxisStroke

xAxisStroke: string

Gets or sets the color to apply to the X-axis line.

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

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

Optional xAxisStrokeThickness

xAxisStrokeThickness: number | string

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>

Optional xAxisTickLength

xAxisTickLength: number | string

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>

Optional xAxisTickStroke

xAxisTickStroke: string

Gets or sets the color to apply to tickmarks along the X-axis.

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

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

Optional xAxisTickStrokeThickness

xAxisTickStrokeThickness: number | string

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>

Optional xAxisTitle

xAxisTitle: string

Gets or sets the Text to display below the X-axis.

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

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

Optional xAxisTitleAlignment

xAxisTitleAlignment: HorizontalAlignment | string

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>

Optional xAxisTitleAngle

xAxisTitleAngle: number | string

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>

Optional xAxisTitleBottomMargin

xAxisTitleBottomMargin: number | string

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>

Optional xAxisTitleLeftMargin

xAxisTitleLeftMargin: number | string

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>

Optional xAxisTitleMargin

xAxisTitleMargin: number | string

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.

Optional xAxisTitleRightMargin

xAxisTitleRightMargin: number | string

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>

Optional xAxisTitleTextColor

xAxisTitleTextColor: string

Gets or sets color of title on the X-axis

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

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

Optional xAxisTitleTextStyle

xAxisTitleTextStyle: string

Gets or sets CSS font property for title on X-axis

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

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

Optional xAxisTitleTopMargin

xAxisTitleTopMargin: number | string

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>

Optional yAxisAbbreviateLargeNumbers

yAxisAbbreviateLargeNumbers: boolean | string

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

Optional yAxisExtent

yAxisExtent: number | string

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>

Optional yAxisFormatLabel

yAxisFormatLabel: function

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>

Type declaration

    • (item: any): string
    • Parameters

      • item: any

      Returns string

Optional yAxisInterval

yAxisInterval: number | string

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

Optional yAxisInverted

yAxisInverted: boolean | string

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.

Optional yAxisIsLogarithmic

yAxisIsLogarithmic: boolean | string

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.

Optional yAxisLabel

yAxisLabel: any

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

Optional yAxisLabelAngle

yAxisLabelAngle: number | string

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>

Optional yAxisLabelBottomMargin

yAxisLabelBottomMargin: number | string

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>

Optional yAxisLabelHorizontalAlignment

yAxisLabelHorizontalAlignment: HorizontalAlignment | string

Gets or sets Horizontal alignment of Y-axis labels.

Optional yAxisLabelLeftMargin

yAxisLabelLeftMargin: number | string

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>

Optional yAxisLabelLocation

yAxisLabelLocation: AxisLabelsLocation | string

Gets or sets the location of Y-axis labels, relative to the plot area.

Optional yAxisLabelRightMargin

yAxisLabelRightMargin: number | string

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>

Optional yAxisLabelTextColor

yAxisLabelTextColor: string

Gets or sets color of labels on the Y-axis

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

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

Optional yAxisLabelTextStyle

yAxisLabelTextStyle: string

Gets or sets CSS font property for labels on Y-axis

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

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

Optional yAxisLabelTopMargin

yAxisLabelTopMargin: number | string

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>

Optional yAxisLabelVerticalAlignment

yAxisLabelVerticalAlignment: VerticalAlignment | string

Gets or sets Vertical alignment of Y-axis labels.

Optional yAxisLabelVisibility

yAxisLabelVisibility: Visibility | string

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>

Optional yAxisLogarithmBase

yAxisLogarithmBase: number | string

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.

Optional yAxisMajorStroke

yAxisMajorStroke: string

Gets or sets the color to apply to major gridlines along the Y-axis.

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

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

Optional yAxisMajorStrokeThickness

yAxisMajorStrokeThickness: number | string

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>

Optional yAxisMaximumValue

yAxisMaximumValue: number | string

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

Optional yAxisMinimumValue

yAxisMinimumValue: number | string

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

Optional yAxisMinorInterval

yAxisMinorInterval: number | string

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

Optional yAxisMinorStroke

yAxisMinorStroke: string

Gets or sets the color to apply to minor gridlines along the Y-axis.

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

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

Optional yAxisMinorStrokeThickness

yAxisMinorStrokeThickness: number | string

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>

Optional yAxisMode

yAxisMode: FinancialChartYAxisMode | string

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

Optional yAxisStrip

yAxisStrip: string

Gets or sets the color to apply to stripes along the Y-axis.

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

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

Optional yAxisStroke

yAxisStroke: string

Gets or sets the color to apply to the Y-axis line.

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

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

Optional yAxisStrokeThickness

yAxisStrokeThickness: number | string

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>

Optional yAxisTickLength

yAxisTickLength: number | string

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>

Optional yAxisTickStroke

yAxisTickStroke: string

Gets or sets the color to apply to tickmarks along the Y-axis.

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

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

Optional yAxisTickStrokeThickness

yAxisTickStrokeThickness: number | string

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>

Optional yAxisTitle

yAxisTitle: string

Gets or sets the Text to display to the left of the Y-axis.

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

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

Optional yAxisTitleAlignment

yAxisTitleAlignment: VerticalAlignment | string

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>

Optional yAxisTitleAngle

yAxisTitleAngle: number | string

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>

Optional yAxisTitleBottomMargin

yAxisTitleBottomMargin: number | string

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>

Optional yAxisTitleLeftMargin

yAxisTitleLeftMargin: number | string

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>

Optional yAxisTitleMargin

yAxisTitleMargin: number | string

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.

Optional yAxisTitleRightMargin

yAxisTitleRightMargin: number | string

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>

Optional yAxisTitleTextColor

yAxisTitleTextColor: string

Gets or sets color of title on the Y-axis

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

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

Optional yAxisTitleTextStyle

yAxisTitleTextStyle: string

Gets or sets CSS font property for title on Y-axis

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

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

Optional yAxisTitleTopMargin

yAxisTitleTopMargin: number | string

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>

Optional zoomSliderType

zoomSliderType: FinancialChartZoomSliderType | string

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

Optional zoomSliderXAxisMajorStroke

zoomSliderXAxisMajorStroke: string

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

Optional zoomSliderXAxisMajorStrokeThickness

zoomSliderXAxisMajorStrokeThickness: number | string

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