Hierarchy

Hierarchy

Properties

abbreviateLargeNumbers?: string | boolean

A boolean indicating whether or not to abbreviate large numbers.

abbreviatedLabelFormat?: string

Gets or sets the label format string to use for the label.

abbreviatedLabelFormatSpecifiers?: any[]

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

actualInterval?: string | number

Gets the effective value for the current Interval.

let effectiveInterval: number = yAxis.actualInterval;
actualIsLogarithmic?: string | boolean

Determines if the axis has a valid logarithmic scale.

let effectiveLogarithmic: boolean = this.yAxis.actualIsLogarithmic
actualMajorStroke?: string

Gets or sets the ActualMajorStroke property.

The ActualMajorStroke property is used for ActualMajorStroke of the axis.

actualMaximumValue?: string | number

Gets the effective maximum value for the current numeric axis object.

let effectiveMaxValue: number = yAxis.actualMaximumValue;
actualMinimumValue?: string | number

Gets the effective minimum value for the current numeric axis object.

let effectiveMinValue: number = yAxis.actualMinimumValue;
actualMinorInterval?: string | number

Gets the effective value for the current MinorInterval.

let effectiveMinorInterval: number = yAxis.actualMinorInterval;
actualMinorStroke?: string

Gets or sets the ActualMinorStroke property.

The ActualMinorStroke property is used for ActualMinorStroke of the axis.

actualStroke?: string

Gets or sets the effective stroke used for the axis.

actualVisibleMaximumValue?: string | number

Gets the effective visible maximum value for the current numeric axis object.

The ActualVisibleMaximumValue is used to get the current visible maximum value for the a numeric axis. Note, at times the ActualVisibleMaximumValue may differ from the ActualMaximumValue, for example when the chart is zoomed.

let effectiveVisibleMaxValue: number = yAxis.actualVisibleMaximumValue;
actualVisibleMinimumValue?: string | number

Gets the effective minimum value for the current numeric axis object.

The actualVisibleMinimumValue is used to get the current visible maximum value for the a numeric axis. Note, at times the actualVisibleMinimumValue may differ from the actualMinimumValue, for example when the chart is zoomed.

let effectiveVisibleMinValue: number = yAxis.actualVisibleMinimumValue;
autoRangeBufferMode?: string | AxisRangeBufferMode

Gets or sets how the numeric axis will adjust its range buffer to less closely fix the data from the series.

children?: ReactNode
coercionMethods?: any

Gets or sets the coercion methods to use when loading data from data sources. Should be specified before setting any member paths, if being used. Setting it later will not cause data to be re-imported into the chart.

The coercionMethods methods is to use when loading data from data sources. Should be specified before setting any member paths, if being used. Setting it later will not cause data to be reimported into the chart.

crossingAxis?: IgrAxis<IIgrAxisProps>

Gets or sets the CrossingAxis property.

The CrossingAxis property is used for CrossingAxis .

 <IgrDataChart
dataSource={this.state.dataSource} >

<IgrNumericXAxis name="xAxis" />
<IgrNumericYAxis name="yAxis"
crossingAxisName= "xAxis"
crossingValue= {700}/>
</IgrDataChart>
crossingAxisName?: string

Gets or sets the name to use to resolve crossingAxis from markup.

crossingValue?: any

Gets or sets the CrossingValue property.

The CrossingValue property is used for CrossingValue of the axis.

 <IgrDataChart
dataSource={this.state.dataSource} >

<IgrNumericXAxis name="xAxis" />
<IgrNumericYAxis name="yAxis"
crossingAxis= "xAxis"
crossingValue= {700}/>
</IgrDataChart>
enhancedIntervalMinimumCharacters?: string | number

Gets or sets the minimum desired characters to be displayed for horizontal axes when using advanced label heuristics. -1 will attempt to adjust the interval to precisely fit the horizontal labels.

The EnhancedIntervalMinimumCharacters property is used to set the mininum desired characters to be displayed for horizontal axes when using advanced label heuristics.

enhancedIntervalPreferMoreCategoryLabels?: string | boolean

Gets or sets whether the enhanced interval management should prefer to show all the labels if possible without collisions for supported types of category axes. This is for use with EnhancedIntervalMinimumCharacters = -1 and axes that have an integral interval.

expectFunctions?: string | boolean

Gets or sets whether the series should expect that properties in its items source may be functions that need to be evaluated to yield their value. This defaults to false, as there will be a subtle performance impact to using this feature. This value must be set before assigning an item's source to take effect.

favorLabellingScaleEnd?: string | boolean

Gets or sets whether the axis should favor emitting a label at the end of the scale.

formatAbbreviatedLabel?: ((item) => string)

Type declaration

    • (item): string
    • Sets or gets a function which takes an object that produces a formatted label for displaying in the chart.

      Parameters

      • item: any

      Returns string

formatLabel?: ((item) => string)

Type declaration

    • (item): string
    • Sets or gets a function which takes an object that produces a formatted label for displaying in the chart.

      The FormatLabel function takes an object that produces a formatted label for displaying in the chart.

      <IgrDataChart dataSource={this.data}   >
      <IgrCategoryXAxis
      name="xAxis"
      FormatLabel="xAxis_FormatLabel" />
      </IgrDataChart>

      Parameters

      • item: any

      Returns string

interval?: string | number

Gets or sets the Interval property.

The Interval is used to get or set the numeric axis major interval which specifies how frequent major gridlines and axis labels are rendered on an axis.

this.yAxis.interval = 20;
<IgrDataChart >


<IgrCategoryXAxis name="xAxisYears"
interval={12} labelLocation="OutsideBottom"
label="Year" overlap={1} gap={0.4} />

<IgrNumericYAxis name="yAxisLeft"
title="Expanse | Revenue"
minimumValue={-900}
labelLocation="OutsideLeft"
maximumValue={900}
interval={300} />


<IgrLineSeries name="series1"
valueMemberPath="Revenue"
xAxisName="xAxisMonths"
yAxisName="yAxisLeft" />
</IgrDataChart>
isDisabled?: string | boolean

Gets or sets the IsDisabled property. If true, the axis will not be rendered.

The IsDisabled property is used to decide if the axis will not be rendered.

isFormattingAbbreviatedLargeNumber?: string | boolean
isInverted?: string | boolean

Gets or sets the IsInverted property.

Gets or sets the IsInverted property.

isLogarithmic?: string | boolean

Gets or sets the IsLogarithmic property.

IsLogarithmic is used to get or set whether the numeric axis scaler is in linear or logarithmic mode. For logarithmic scaling, this can be used in conjunction with LogarithmBase to further define the logarithmic scale.

this.yAxis.isLogarithmic= true;
this.yAxis.logarithmBase = 2;
<IgrDataChart >


<IgrCategoryXAxis name="xAxisYears"
interval={12} labelLocation="OutsideBottom"
label="Year" overlap={1} gap={0.4} />

<IgrNumericYAxis name="yAxisLeft"
title="Expanse | Revenue"
IsLogarithmic="True"
LogarithmBase={2}/>


<IgrLineSeries name="series1"
valueMemberPath="Revenue"
xAxisName="xAxisMonths"
yAxisName="yAxisLeft" />
</IgrDataChart>
label?: any

Gets or sets the axis label format string.

The Label property is used for label mapping of the axis labels.

<IgrCategoryXAxis name="xAxis"
label="Country"
labelTextStyle="9pt Verdana"
labelTopMargin={5}
labelTextColor="gray" />
labelAngle?: string | number

Gets or sets the angle of the {0}.

The Angle property is used to set the angle of the axis.

<IgrDataChart
dataSource={this.state.dataSource}
width="700px"
height="500px">

<IgrCategoryXAxis name="xAxis"
label="Year"
titleAngle={90} />
<IgrNumericYAxis name="yAxis" />
</IgrDataChart>
<IgrCategoryXAxis name="xAxis"
title="Country"
titleTextColor="gray"
titleTextStyle="12pt Verdana"
titleAngle={90} />
labelBottomMargin?: string | number

Margin applied below the {0}.

The labelBottomMargin is used to set the bottom margin of the labels.

labelExtent?: string | number

Distance between the axis and the edge of the control.

The Extent property is used for the extent.

<IgrDataChart
dataSource={this.state.dataSource}
width="700px"
height="500px">

<IgrCategoryXAxis name="xAxis"
label="Year"/>
<IgrNumericYAxis name="yAxis" />
</IgrDataChart>
labelFormat?: string

Gets or sets the label format string to use for the label.

labelFormatSpecifiers?: any[]

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

labelHorizontalAlignment?: string | HorizontalAlignment

Gets or sets the horizontal alignment of the {0}.

The HorizontalAlignment property is used for the horizontal alignment.

labelLeftMargin?: string | number

Margin applied to the left of the {0}.

The labelLeftMargin property is used for the left margin of the labels.

labelLocation?: string | AxisLabelsLocation

Gets or sets the location of the {0}.

The Location property is used for the location.

labelRightMargin?: string | number

Margin applied to the right of the {0}.

The labelRightMargin property is used for the right margin of the labels.

labelShowFirstLabel?: string | boolean

Gets or sets whether the first label is displayed when the zoom level is set to 1.

The ShowFirstLabel is used to check whether the first label is displayed when the zoom level is set to 1.

labelTextColor?: string

The color of the {0}.

The labelTextColor property Overrides the color of the text used for the axis labels.

<IgrDataChart
dataSource={this.state.dataSource}
width="700px"
height="500px">

<IgrCategoryXAxis name="xAxis"
label="Year"
labelTextColor="gray" />
<IgrNumericYAxis name="yAxis" />
</IgrDataChart>
<IgrCategoryXAxis name="xAxis"
title="Country"
titleTextColor="gray"
titleTextStyle="12pt Verdana"
titleAngle={90} />
labelTextStyle?: string

Gets or sets the text style to use for axis labels.

The labelTextStyle property Overrides the style of the text used for the axis labels.

<IgrDataChart
dataSource={this.state.dataSource}
width="700px"
height="500px">

<IgrCategoryXAxis name="xAxis"
label="Year"
titleTextStyle="12pt Verdana" />
<IgrNumericYAxis name="yAxis" />
</IgrDataChart>
<IgrCategoryXAxis name="xAxis"
title="Country"
titleTextColor="gray"
titleTextStyle="12pt Verdana"
titleAngle={90} />
labelTopMargin?: string | number

Margin applied above the {0}.

The labelTopMargin property is used for the top margin of the labels.

<IgrCategoryXAxis name="xAxis"
label="Country"
labelTextStyle="9pt Verdana"
labelTopMargin={5}
labelTextColor="gray" />
labelVerticalAlignment?: string | VerticalAlignment

Gets or sets the vertical alignment of the {0}.

The VerticalAlignment property is used for the vertical alignment of the axis.

labelVisibility?: string | Visibility

Gets or sets the visibility of the {0}.

The Visibility property is used for the visibility of the axis.

logarithmBase?: string | number

Gets or sets the LogarithmBase property.

LogarithmBase is used to get or set logarithm base when a numeric axis is in Logarithmic scale mode. For logarithmic scaling, this is used in conjunction with IsLogarithmic or ScaleMode to set logarithmic scaling.

this.yAxis.scaleMode = NumericScaleMode.Logarithmic;
this.yAxis.logarithmBase = 2;
<IgrDataChart >


<IgrCategoryXAxis name="xAxisYears"
interval={12} labelLocation="OutsideBottom"
label="Year" overlap={1} gap={0.4} />

<IgrNumericYAxis name="yAxisLeft"
title="Expanse | Revenue"
ScaleMode="Logarithmic"
LogarithmBase={2}/>

<IgrLineSeries name="series1"
valueMemberPath="Revenue"
xAxisName="xAxisMonths"
yAxisName="yAxisLeft" />
</IgrDataChart>
majorStroke?: string

Gets or sets the MajorStroke property. Null is treated as auto. Major lines will be displayed or not based on the axis type and series used with it.

Gets or sets the MajorStroke using this property.

<IgrNumericYAxis name="yAxis"
interval={100}
majorStroke="black"
majorStrokeThickness={1}
minorInterval={25}
minorStroke="gray"
minorStrokeThickness={0.5} />
majorStrokeDashArray?: string | number[]

Gets or sets the MajorStrokeDashArray property.

majorStrokeThickness?: string | number

Gets or sets the MajorStrokeThickness property.

Gets or sets the MajorStrokeThickness using this property.

<IgrNumericYAxis name="yAxis"
interval={100}
majorStroke="black"
majorStrokeThickness={1}
minorInterval={25}
minorStroke="gray"
minorStrokeThickness={0.5} />
maximumValue?: string | number

Gets or sets the MaximumValue property.

Used to set the maximum value of a numeric axis. To get the maximum value in effect on a numeric axis use ActualMaximumValue.

this.yAxis.maximumValue = 80;
<IgrDataChart >


<IgrCategoryXAxis name="xAxisYears"
interval={12} labelLocation="OutsideBottom"
label="Year" overlap={1} gap={0.4} />

<IgrNumericYAxis name="yAxisLeft"
title="Expanse | Revenue"
minimumValue={-900}
labelLocation="OutsideLeft"
interval={300} />


<IgrLineSeries name="series1"
valueMemberPath="Revenue"
xAxisName="xAxisMonths"
yAxisName="yAxisLeft" />
</IgrDataChart>
minimumValue?: string | number

Gets or sets the MinimumValue property.

Used to set the minimum value of a numeric axis. To get the minimum value in effect on a numeric axis use ActualMinimumValue.

this.yAxis.minimumValue = 0;
<IgrDataChart >


<IgrCategoryXAxis name="xAxisYears"
interval={12} labelLocation="OutsideBottom"
label="Year" overlap={1} gap={0.4} />

<IgrNumericYAxis name="yAxisLeft"
title="Expanse | Revenue"
minimumValue={-900}
labelLocation="OutsideLeft"
maximumValue={900}
interval={300} />


<IgrLineSeries name="series1"
valueMemberPath="Revenue"
xAxisName="xAxisMonths"
yAxisName="yAxisLeft" />
</IgrDataChart>
minorInterval?: string | number

Gets or sets the MinorInterval property.

The MinorInterval is used to get or set the numeric axis minor interval which specifies how frequent minor gridlines are rendered on an axis. Please note, in order for minor gridlines to be displayed the following may also need to be set: MinorStroke, MinorStrokeThickness.

this.yAxis.minorInterval = 2.5;
this.yAxis.minorStroke = 'blue';
this.yAxis.minorStrokeThickness = 1;
<IgrDataChart >

<IgrCategoryXAxis name="xAxisYears"
interval={12} labelLocation="OutsideBottom"
label="Year" overlap={1} gap={0.4} />

<IgrNumericYAxis name="yAxisLeft"
title="Expanse | Revenue"
minimumValue={-900}
minorInterval= 2.5
minorStroke="blue" />


<IgrLineSeries name="series1"
valueMemberPath="Revenue"
xAxisName="xAxisMonths"
yAxisName="yAxisLeft" />
</IgrDataChart>
minorStroke?: string

Gets or sets the MinorStroke property.

Gets or sets the minorStroke thickness using MinorStrokeThickness property.

<IgrNumericYAxis name="yAxis"
interval={100}
majorStroke="black"
majorStrokeThickness={1}
minorInterval={25}
minorStroke="gray"
minorStrokeThickness={0.5} />
minorStrokeDashArray?: string | number[]

Gets or sets the MinorStrokeDashArray property.

minorStrokeThickness?: string | number

Gets or sets the MinorStrokeThickness property.

name: string

Sets or gets a required unique name for the axis.

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

Type declaration

referenceValue?: string | number

Gets or sets the ReferenceValue property.

Used to get or set a reference value on a numeric axis which when used with an area, bar, or column series will result in the series shapes being drawn above or below the specified value.

this.yAxis.referenceValue = 30;
<IgrDataChart >

<IgrCategoryXAxis name="xAxisYears"
interval={12} labelLocation="OutsideBottom"
label="Year" overlap={1} gap={0.4} />

<IgrNumericYAxis name="yAxisLeft"
title="Expanse | Revenue"
referenceValue= {30} />


<IgrLineSeries name="series1"
valueMemberPath="Revenue"
xAxisName="xAxisMonths"
yAxisName="yAxisLeft" />
</IgrDataChart>
renderRequested?: ((s, e) => void)

Type declaration

scaleMode?: string | NumericScaleMode

Gets or sets the axis scale mode.

ScaleMode can be used on numeric axes to allow scaling data values using built-in scalers. The available scalers are linear or logarithmic.

this.yAxis.scaleMode = NumericScaleMode.Logarithmic;
 <IgrDataChart
dataSource={this.state.dataSource} >

<IgrCategoryXAxis name="xAxis" />
<IgrNumericYAxis name="yAxis"
scaleMode="logarithmic" />

<IgrLineSeries
name="series1"
xAxisName="xAxis"
yAxisName="yAxis"
valueMemberPath="Value" />
</IgrDataChart>
shouldAvoidAnnotationCollisions?: string | boolean

Gets or sets whether annotations should be shifted to avoid collision, even if this would result in them appearing where they shouldn't be along the scale.

shouldKeepAnnotationsInView?: string | boolean

ets or sets whether annotations should be kept in view, even if they aren't positioned where they should appear on the scale.

strip?: string

Gets or sets the Strip property.

Use Strip property to set the strip of the chart.

<IgrCategoryChart
ref={this.onChartRef}
width="100%"
height="100%"
dataSource={this.data}
titleTopMargin={5}
xAxisStrip="gray"/>
stroke?: string

Gets or sets the Stroke property. Null is treated as auto. The axis stroke will be displayed or not based on the axis type and series used with it.

Use Stroke property to set the stroke of the chart.

<IgrCategoryChart
ref={this.onChartRef}
width="100%"
height="100%"
dataSource={this.data}
titleTopMargin={5}
xAxisStroke="gray"/>
strokeDashArray?: string | number[]

Gets or sets the StrokeDashArray property.

strokeThickness?: string | number

Gets or sets the StrokeThickness property.

Use StrokeThickness property for the thickness of the stroke.

<IgrCategoryChart
ref={this.onChartRef}
width="100%"
height="100%"
dataSource={this.data}
titleTopMargin={5}
xAxisStrokeThickness={2}>
tickLength?: string | number

Gets or sets the TickLength property.

Use TickLength property for The length of the tickmarks to display for this axis.

<IgrCategoryXAxis name="xAxis"
tickLength={10}
tickStrokeThickness={0.5}
tickStroke="black" />
tickStroke?: string

Gets or sets the TickStroke property.

Use TickStroke property for the color of the tickmarks.

<IgrCategoryXAxis name="xAxis"
tickLength={10}
tickStrokeThickness={0.5}
tickStroke="black" />
tickStrokeDashArray?: string | number[]

Gets or sets the TickStrokeDashArray property.

tickStrokeThickness?: string | number

Gets or sets the TickStrokeThickness property.

Use TickStrokeThickness property for thickness of the stroke tickmarks.

<IgrCategoryXAxis name="xAxis"
tickLength={10}
tickStrokeThickness={0.5}
tickStroke="black" />
title?: string

Gets or sets the Title property.

Use Title property to display the title of the component.

<IgrCategoryXAxis name="xAxis"
title="Country"
titleTextColor="gray"
titleTextStyle="12pt Verdana"
titleAngle={90} />
titleAngle?: string | number

Gets or sets the angle of the {0}.

The Angle property is used to set the angle of the axis.

<IgrDataChart
dataSource={this.state.dataSource}
width="700px"
height="500px">

<IgrCategoryXAxis name="xAxis"
label="Year"
titleAngle={90} />
<IgrNumericYAxis name="yAxis" />
</IgrDataChart>
<IgrCategoryXAxis name="xAxis"
title="Country"
titleTextColor="gray"
titleTextStyle="12pt Verdana"
titleAngle={90} />
titleBottomMargin?: string | number

Margin applied below the {0}.

The labelBottomMargin is used to set the bottom margin of the labels.

titleExtent?: string | number

Distance between the axis and the edge of the control.

The Extent property is used for the extent.

<IgrDataChart
dataSource={this.state.dataSource}
width="700px"
height="500px">

<IgrCategoryXAxis name="xAxis"
label="Year"/>
<IgrNumericYAxis name="yAxis" />
</IgrDataChart>
titleHorizontalAlignment?: string | HorizontalAlignment

Gets or sets the horizontal alignment of the {0}.

The HorizontalAlignment property is used for the horizontal alignment.

titleLeftMargin?: string | number

Margin applied to the left of the {0}.

The labelLeftMargin property is used for the left margin of the labels.

titleLocation?: string | AxisLabelsLocation

Gets or sets the location of the {0}.

The Location property is used for the location.

titlePosition?: string | AxisTitlePosition

Gets or sets the title position relative to the axis labels.

titleRightMargin?: string | number

Margin applied to the right of the {0}.

The labelRightMargin property is used for the right margin of the labels.

titleShowFirstLabel?: string | boolean

Gets or sets whether the first label is displayed when the zoom level is set to 1.

The ShowFirstLabel is used to check whether the first label is displayed when the zoom level is set to 1.

titleTextColor?: string

The color of the {0}.

The labelTextColor property Overrides the color of the text used for the axis labels.

<IgrDataChart
dataSource={this.state.dataSource}
width="700px"
height="500px">

<IgrCategoryXAxis name="xAxis"
label="Year"
labelTextColor="gray" />
<IgrNumericYAxis name="yAxis" />
</IgrDataChart>
<IgrCategoryXAxis name="xAxis"
title="Country"
titleTextColor="gray"
titleTextStyle="12pt Verdana"
titleAngle={90} />
titleTextStyle?: string

Gets or sets the text style to use for axis labels.

The labelTextStyle property Overrides the style of the text used for the axis labels.

<IgrDataChart
dataSource={this.state.dataSource}
width="700px"
height="500px">

<IgrCategoryXAxis name="xAxis"
label="Year"
titleTextStyle="12pt Verdana" />
<IgrNumericYAxis name="yAxis" />
</IgrDataChart>
<IgrCategoryXAxis name="xAxis"
title="Country"
titleTextColor="gray"
titleTextStyle="12pt Verdana"
titleAngle={90} />
titleTopMargin?: string | number

Margin applied above the {0}.

The labelTopMargin property is used for the top margin of the labels.

<IgrCategoryXAxis name="xAxis"
label="Country"
labelTextStyle="9pt Verdana"
labelTopMargin={5}
labelTextColor="gray" />
titleVerticalAlignment?: string | VerticalAlignment

Gets or sets the vertical alignment of the {0}.

The VerticalAlignment property is used for the vertical alignment of the axis.

titleVisibility?: string | Visibility

Gets or sets the visibility of the {0}.

The Visibility property is used for the visibility of the axis.

useEnhancedIntervalManagement?: string | boolean

Gets or sets whether to use more advanced heuristics when determining the initial number of labels to render, before resolving collisions, etc.

Use UseEnhancedIntervalManagement property to gets/sets whether to use more advanced heuristics when determining the initial number of labels to render, before resolving collisions, etc.

usePerLabelHeightMeasurement?: string | boolean

Gets or sets whether to use label height measurement when determining the initial number of labels to render, before resolving collisions, etc.