Gets or sets the ActualMajorStroke property.
The actualMajorStroke property is used for ActualMajorStroke of the axis.
Gets or sets the ActualMajorStroke property.
The actualMajorStroke property is used for ActualMajorStroke of the axis.
Gets or sets the ActualMinorStroke property.
The actualMinorStroke property is used for ActualMinorStroke of the axis.
Gets or sets the ActualMinorStroke property.
The actualMinorStroke property is used for ActualMinorStroke of the axis.
Gets or sets the effective stroke used for the axis.
Gets or sets the effective stroke used for the axis.
Gets the current annotations for the axis.
Gets the current annotations for the axis.
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.
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.
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>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>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>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>Gets or sets the mininum 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.
Gets or sets the mininum 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.
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.
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.
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>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>Gets 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>Gets 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>Gets if the current axis is of angular axis type
Checks if the axis is of category axis type
Gets if the current axis is of category date time axis type
Gets if the current axis is a continuous rather than a discrete scale
Gets or sets if the current axis is of date time axis type
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.
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.
Gets or sets the IsInverted property.
Gets or sets the isInverted property.
Gets or sets the IsInverted property.
Gets or sets the isInverted property.
Gets or sets if the current axis is of numeric axis type
Gets or sets if the current axis is of numeric axis typeGets or sets if the axis is a piecewise scaling function.
Gets or sets if the current axis is of radial axis type
Gets or sets if the current axis is sorting data items
Gets if the current axis is a vertical axis.
Gets the number of items in the current category axis items source.
Gets the number of items in the current category axis items source.
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" />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" />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} />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} />Margin applied below the {0}.
The labelBottomMargin is used to set the bottom margin of the labels.
Margin applied below the {0}.
The labelBottomMargin is used to set the bottom margin of the labels.
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>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>Gets or sets the horizontal alignment of the {0}.
The HorizontalAlignment property is used for the horizontal alignment.
Gets or sets the horizontal alignment of the {0}.
The HorizontalAlignment property is used for the horizontal alignment.
Margin applied to the left of the {0}.
The labelLeftMargin property is used for the left margin of the labels.
Margin applied to the left of the {0}.
The labelLeftMargin property is used for the left margin of the labels.
Gets or sets the location of the {0}.
The Location property is used for the location.
Gets or sets the location of the {0}.
The Location property is used for the location.
Margin applied to the right of the {0}.
The labelRightMargin property is used for the right margin of the labels.
Margin applied to the right of the {0}.
The labelRightMargin property is used for the right margin of the labels.
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.
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.
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} />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} />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} />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} />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" />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" />Gets or sets the vertical alignment of the {0}.
The VerticalAlignment property is used for the vertical alignment of the axis.
Gets or sets the vertical alignment of the {0}.
The VerticalAlignment property is used for the vertical alignment of the axis.
Gets or sets the visibility of the {0}.
The Visibility property is used for the visibility of the axis.
Gets or sets the visibility of the {0}.
The Visibility property is used for the visibility of the axis.
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} />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} />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} />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} />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} />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} />Gets or sets the MinorStrokeThickness property.
Gets or sets the MinorStrokeThickness property.
Gets 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>Gets 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>Occurs when the axis range changes.
Occurs when the axis range changes.
This event is raised every time a render has been requested from a series.
This event is raised every time a render has been requested from a series.
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"/>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"/>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"/>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"/>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}>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}>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" />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" />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" />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" />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" />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" />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} />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} />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} />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} />Margin applied below the {0}.
The labelBottomMargin is used to set the bottom margin of the labels.
Margin applied below the {0}.
The labelBottomMargin is used to set the bottom margin of the labels.
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>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>Gets or sets the horizontal alignment of the {0}.
The HorizontalAlignment property is used for the horizontal alignment.
Gets or sets the horizontal alignment of the {0}.
The HorizontalAlignment property is used for the horizontal alignment.
Margin applied to the left of the {0}.
The labelLeftMargin property is used for the left margin of the labels.
Margin applied to the left of the {0}.
The labelLeftMargin property is used for the left margin of the labels.
Gets or sets the location of the {0}.
The Location property is used for the location.
Gets or sets the location of the {0}.
The Location property is used for the location.
Gets or sets the title position relative to the axis labels.
Gets or sets the title position relative to the axis labels.
Margin applied to the right of the {0}.
The labelRightMargin property is used for the right margin of the labels.
Margin applied to the right of the {0}.
The labelRightMargin property is used for the right margin of the labels.
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.
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.
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} />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} />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} />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} />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" />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" />Gets or sets the vertical alignment of the {0}.
The VerticalAlignment property is used for the vertical alignment of the axis.
Gets or sets the vertical alignment of the {0}.
The VerticalAlignment property is used for the vertical alignment of the axis.
Gets or sets the visibility of the {0}.
The Visibility property is used for the visibility of the axis.
Gets or sets the visibility of the {0}.
The Visibility property is used for the visibility of the axis.
Gets 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>Gets 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>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.
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.
Called immediately before mounting occurs, and before Component#render.
Avoid introducing any side-effects or subscriptions in this method.
This method will not stop working in React 17.
Note: the presence of getSnapshotBeforeUpdate or getDerivedStateFromProps prevents this from being invoked.
Called when the component may be receiving new props. React may call this even if props have not changed, so be sure to compare new and existing props if you only want to handle changes.
Calling Component#setState generally does not trigger this method.
This method will not stop working in React 17.
Note: the presence of getSnapshotBeforeUpdate or getDerivedStateFromProps prevents this from being invoked.
Called immediately before rendering when new props or state is received. Not called for the initial render.
Note: You cannot call Component#setState here.
This method will not stop working in React 17.
Note: the presence of getSnapshotBeforeUpdate or getDerivedStateFromProps prevents this from being invoked.
Catches exceptions generated in descendant components. Unhandled exceptions will cause the entire component tree to unmount.
Called immediately after updating occurs. Not called for the initial render.
The snapshot is only present if getSnapshotBeforeUpdate is present and returns non-null.
Called immediately before mounting occurs, and before Component#render.
Avoid introducing any side-effects or subscriptions in this method.
Note: the presence of getSnapshotBeforeUpdate or getDerivedStateFromProps prevents this from being invoked.
Called when the component may be receiving new props. React may call this even if props have not changed, so be sure to compare new and existing props if you only want to handle changes.
Calling Component#setState generally does not trigger this method.
Note: the presence of getSnapshotBeforeUpdate or getDerivedStateFromProps prevents this from being invoked.
Called immediately before a component is destroyed. Perform any necessary cleanup in this method, such as
cancelled network requests, or cleaning up any DOM elements created in componentDidMount.
Called immediately before rendering when new props or state is received. Not called for the initial render.
Note: You cannot call Component#setState here.
Note: the presence of getSnapshotBeforeUpdate or getDerivedStateFromProps prevents this from being invoked.
Runs before React applies the result of render to the document, and
returns an object to be given to componentDidUpdate. Useful for saving
things such as scroll position before render causes changes to it.
Note: the presence of getSnapshotBeforeUpdate prevents any of the deprecated lifecycle events from running.
Gets the label for a data item.
Used to manually notify the axis that the data source has reset or cleared its items.
Renders the axis with no animation.
If using enhanced interval management and precise interval fitting, this will reset the cached maximum label width, and recalculate using the current labels.
Scales a value from axis space into screen space.
Unscales a value from screen space into axis space.
Represents the base class for all IgxDataChartComponent category-based axes.
<IgrDataChart dataSource={this.state.dataSource} > <IgrCategoryXAxis name="xAxis" /> <IgrNumericYAxis name="yAxis" /> <IgrColumnSeries name="series1" xAxisName="xAxis" yAxisName="yAxis" valueMemberPath="Value" /> </IgrDataChart>this.columnSeries1 = new IgrColumnSeries({ name: "colSeries1" }); this.columnSeries1.dataSource = this.categoryData; this.columnSeries1.xAxis = this.categoryXAxis; this.columnSeries1.yAxis = this.numericYAxis; this.columnSeries1.xAxisName = "categoryXAxis"; this.columnSeries1.yAxisName = "numericYAxis"; this.columnSeries1.valueMemberPath = "USA";