Optional
actualOptional
actualGets or sets the ActualMajorStroke property.
The ActualMajorStroke
property is used for ActualMajorStroke of the axis.
Optional
actualGets the effective value for the current MinorInterval.
Get the effective value for the current minorInterval.
<IgrDataChart
ref={this.onChartRef}
dataSource={this.state.dataSource}
width="100%"
height="100%" >
<IgrCategoryAngleAxis name="angleAxis" label="Department" actualMinorInterval={5} />
<IgrNumericRadiusAxis name="radiusAxis" />
</IgrDataChart>
Optional
actualGets or sets the ActualMinorStroke property.
The ActualMinorStroke
property is used for ActualMinorStroke of the axis.
Optional
actualGets or sets the effective stroke used for the axis.
Optional
childrenOptional
coercionGets 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.
Optional
crossingGets 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>
Optional
crossingGets or sets the name to use to resolve crossingAxis from markup.
Optional
crossingGets 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>
Optional
dataOptional
enhancedGets 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.
Optional
enhancedGets 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.
Optional
expectGets 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.
Optional
formatSets 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>
Optional
gapGets or sets the amount of space between adjacent categories for the current axis object. The gap is silently clamped to the range [0, 1] when used.
Use the Gap
property to configure the spacing between items on a category axis with item spacing.
A Gap
of 0 allocates no space between items. A Gap
of 1 allocates a space between items equal to the width of one item.
To set the item spacing to 75% the width of one item, set the Gap
to 0.75, as in this code:
<IgrDataChart
ref={this.onChartRef}
dataSource={this.state.dataSource} >
<IgrCategoryXAxis name="xAxis" gap={0.4} />
<IgrNumericYAxis name="yAxis" />
<IgrColumnSeries
name="series1"
xAxisName="xAxis"
yAxisName="yAxis"
valueMemberPath="Value" />
</IgrDataChart>
Optional
intervalGets or sets the frequency of displayed labels. The set value is a factor that determines which labels will be hidden. For example, an interval of 2 will display every other label.
Gets or sets the frequency of displayed labels.The set value is a factor that determines which labels will be hidden. For example, an interval of 2 will display every other label.
<IgrDataChart
dataSource={this.state.dataSource} >
<IgrCategoryAngleAxis name="angleAxis" interval ={2} />
<IgrNumericRadiusAxis name="radiusAxis" />
</IgrDataChart>
Optional
isGets 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.
Optional
isGets or sets the IsInverted property.
Gets or sets the IsInverted
property.
Optional
itemsGets the number of items in the current category axis items source.
Optional
labelGets 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" />
Optional
labelGets 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} />
Optional
labelMargin applied below the {0}.
The labelBottomMargin
is used to set the bottom margin of the labels.
Optional
labelDistance 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>
Optional
labelGets or sets the label format string to use for the label.
Optional
labelGets or sets the format specifiers to use with the LabelFormat string.
Optional
labelGets or sets the horizontal alignment of the {0}.
The HorizontalAlignment
property is used for the horizontal alignment.
Optional
labelMargin applied to the left of the {0}.
The labelLeftMargin
property is used for the left margin of the labels.
Optional
labelGets or sets the location of the {0}.
The Location
property is used for the location.
Optional
labelIndicates the mode axis labels will operate in.
Optional
labelMargin applied to the right of the {0}.
The labelRightMargin
property is used for the right margin of the labels.
Optional
labelGets 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.
Optional
labelThe 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} />
Optional
labelGets 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} />
Optional
labelMargin 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" />
Optional
labelGets or sets the vertical alignment of the {0}.
The VerticalAlignment
property is used for the vertical alignment of the axis.
Optional
labelGets or sets the visibility of the {0}.
The Visibility
property is used for the visibility of the axis.
Optional
majorGets 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} />
Optional
majorGets or sets the MajorStrokeDashArray property.
Optional
majorGets 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} />
Optional
maximumGets or sets the maximum gap value to allow. This defaults to 1.0.
Optional
minimumGets or sets the minimum amount of pixels to use for the gap between categories, if possible.
Optional
minorGets or sets the frequency of displayed minor lines. The set value is a factor that determines how the minor lines will be displayed.
Gets or sets the frequency of displayed minor lines. The set value is a factor that determines how the minor lines will be displayed.
<IgrDataChart
ref={this.onChartRef}
dataSource={this.state.dataSource}
width="100%"
height="100%" >
<IgrCategoryAngleAxis name="angleAxis" label="Department" minorInterval={5} />
<IgrNumericRadiusAxis name="radiusAxis" />
</IgrDataChart>
Optional
minorGets 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} />
Optional
minorGets or sets the MinorStrokeDashArray property.
Optional
minorGets or sets the MinorStrokeThickness property.
Sets or gets a required unique name for the axis.
Optional
othersGets or sets the label of the Others slice.
Optional
othersGets or sets the threshold value that determines if categories are grouped into the Others category.
Optional
othersGets or sets whether to use numeric or percent-based threshold value.
Optional
overlapGets or sets the amount of overlap between adjacent categories for the current axis object. The overlap is silently clamped to the range [-1, 1] when used.
Use the Overlap
property to configure the spacing between items on a category axis with item spacing and more than one series.
An Overlap
of 0 places grouped items adjacent to each other. An Overlap
of 1 places grouped items in the same axis space, completely overlapping. An Overlap
of -1 places a space between grouped items equal to the width of one item.
To place grouped items with 75% overlap, set the Overlap
to 0.75, as in this code:
<IgrDataChart
dataSource={this.state.dataSource} >
<IgrCategoryXAxis name="xAxis" overlap={1} />
<IgrNumericYAxis name="yAxis" />
<IgrColumnSeries
name="series1"
xAxisName="xAxis"
yAxisName="yAxis"
valueMemberPath="Value"
/>
</IgrDataChart>
Optional
rangeOccurs when the axis range changes.
Optional
renderThis event is raised every time a render has been requested from a series.
Optional
shouldGets 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.
Optional
shouldets or sets whether annotations should be kept in view, even if they aren't positioned where they should appear on the scale.
Optional
startIndicates the angle in degress that the chart's 0th angle should be offset.
Indicates the angle in degress that the chart's 0th angle should be offset.
<IgrDataChart
dataSource={this.state.dataSource} >
<IgrCategoryAngleAxis name="angleAxis" startAngleOffset ={30} />
<IgrNumericRadiusAxis name="radiusAxis" />
</IgrDataChart>
Optional
stripGets 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"/>
Optional
strokeGets 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"/>
Optional
strokeGets or sets the StrokeDashArray property.
Optional
strokeGets 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}>
Optional
tickGets 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" />
Optional
tickGets or sets the TickStroke property.
Use TickStroke
property for the color of the tickmarks.
<IgrCategoryXAxis name="xAxis"
tickLength={10}
tickStrokeThickness={0.5}
tickStroke="black" />
Optional
tickGets or sets the TickStrokeDashArray property.
Optional
tickGets or sets the TickStrokeThickness property.
Use TickStrokeThickness
property for thickness of the stroke tickmarks.
<IgrCategoryXAxis name="xAxis"
tickLength={10}
tickStrokeThickness={0.5}
tickStroke="black" />
Optional
titleGets 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} />
Optional
titleGets 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} />
Optional
titleMargin applied below the {0}.
The labelBottomMargin
is used to set the bottom margin of the labels.
Optional
titleDistance 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>
Optional
titleGets or sets the horizontal alignment of the {0}.
The HorizontalAlignment
property is used for the horizontal alignment.
Optional
titleMargin applied to the left of the {0}.
The labelLeftMargin
property is used for the left margin of the labels.
Optional
titleGets or sets the location of the {0}.
The Location
property is used for the location.
Optional
titleGets or sets the title position relative to the axis labels.
Optional
titleMargin applied to the right of the {0}.
The labelRightMargin
property is used for the right margin of the labels.
Optional
titleGets 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.
Optional
titleThe 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} />
Optional
titleGets 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} />
Optional
titleMargin 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" />
Optional
titleGets or sets the vertical alignment of the {0}.
The VerticalAlignment
property is used for the vertical alignment of the axis.
Optional
titleGets or sets the visibility of the {0}.
The Visibility
property is used for the visibility of the axis.
Optional
useGets or sets whether the category axis should use clustering display mode even if no series are present that would force clustering mode.
UseClusteringMode
applies grouping and spacing to a category axis equivalent to the grouping that occurs when grouping series, such as ColumnSeries, are used.
Try setting it on an axis displaying financial series to adjust the spacing on the left and right sides of the axis:
<IgrDataChart
dataSource={this.state.dataSource} >
<IgrCategoryXAxis name="xAxis" useClusteringMode={2} />
<IgrNumericYAxis name="yAxis" />
<IgrColumnSeries
name="series1"
xAxisName="xAxis"
yAxisName="yAxis"
valueMemberPath="Value" />
</IgrDataChart>
Optional
useGets 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.
Optional
useGets or sets whether to use label height measurement when determining the initial number of labels to render, before resolving collisions, etc.
Optional
valueGets or sets the Value mapping property for the axis.
Gets the effective value for the current Interval.
Gets the effective value for the current Interval.