A horizontal axis that uses an ordinal DateTime scale. On an ordinal time axis, datapoints are aligned according to their order in the ItemsSource, like a category axis.

You can use the OrdinalTimeXAxis to display dates at equidistant.

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

<IgrOrdinalTimeXAxis name="xAxis" label="Date" />
<IgrNumericYAxis name="yAxis" />
</IgrDataChart>
this.series.xAxis = this.ordinalTimeXAxis;
this.series.yAxis = this.numericYAxis;
this.series.xAxisName = "xAxis";
this.series.yAxisName = "YAxis";

Type Parameters

Hierarchy

Hierarchy

Constructors

Properties

Accessors

Methods

Constructors

Properties

context: any

If using the new style context, re-declare this in your class to be the React.ContextType of your static contextType. Should be used with type annotation or static contextType.

static contextType = MyContext
// For TS pre-3.7:
context!: React.ContextType<typeof MyContext>
// For TS 3.7 and above:
declare context: React.ContextType<typeof MyContext>
props: Readonly<P> & Readonly<{
    children?: ReactNode;
}>
refs: {
    [key: string]: ReactInstance;
}

Type declaration

  • [key: string]: ReactInstance
state: Readonly<{}>
contextType?: Context<any>

If set, this.context will be set at runtime to the current value of the given Context.

Usage:

type MyContext = number
const Ctx = React.createContext<MyContext>(0)

class Foo extends React.Component {
static contextType = Ctx
context!: React.ContextType<typeof Ctx>
render () {
return <>My context's value: {this.context}</>;
}
}

Accessors

  • get actualInterval(): number
  • Gets the effective value for the current Interval.

    let effectiveInterval: number = xAxis.actualInterval;
    

    Returns number

  • set actualInterval(v): void
  • Parameters

    • v: number

    Returns void

  • get actualIntervalChange(): ((s, e) => void)
  • Returns ((s, e) => void)

  • set actualIntervalChange(ev): void
  • Parameters

    Returns void

  • get actualMajorStroke(): string
  • Gets or sets the ActualMajorStroke property.

    The ActualMajorStroke property is used for ActualMajorStroke of the axis.

    Returns string

  • set actualMajorStroke(v): void
  • Parameters

    • v: string

    Returns void

  • get actualMinorInterval(): number
  • Gets the effective value for the current MinorInterval.

    let effectiveMinorInterval: number = xAxis.actualMinorInterval;
    

    Returns number

  • set actualMinorInterval(v): void
  • Parameters

    • v: number

    Returns void

  • get actualMinorIntervalChange(): ((s, e) => void)
  • Returns ((s, e) => void)

  • set actualMinorIntervalChange(ev): void
  • Parameters

    Returns void

  • get actualMinorStroke(): string
  • Gets or sets the ActualMinorStroke property.

    The ActualMinorStroke property is used for ActualMinorStroke of the axis.

    Returns string

  • set actualMinorStroke(v): void
  • Parameters

    • v: string

    Returns void

  • get actualStroke(): string
  • Gets or sets the effective stroke used for the axis.

    Returns string

  • set actualStroke(v): void
  • Parameters

    • v: string

    Returns void

  • get axisInternal(): Axis
  • Returns Axis

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

    Returns any

  • set coercionMethods(v): void
  • Parameters

    • v: any

    Returns void

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

    Returns IgrAxis<IIgrAxisProps>

  • set crossingAxis(v): void
  • Parameters

    Returns void

  • get crossingAxisName(): string
  • Gets or sets the name to use to resolve crossingAxis from markup.

    Returns string

  • set crossingAxisName(v): void
  • Parameters

    • v: string

    Returns void

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

    Returns any

  • set crossingValue(v): void
  • Parameters

    • v: any

    Returns void

  • get dataSource(): any
  • Returns any

  • set dataSource(value): void
  • Parameters

    • value: any

    Returns void

  • get dateTimeMemberPath(): string
  • Gets or sets the DateTime mapping property for the axis.

    Returns string

  • set dateTimeMemberPath(v): void
  • Parameters

    • v: string

    Returns void

  • get enhancedIntervalMinimumCharacters(): 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.

    Returns number

  • set enhancedIntervalMinimumCharacters(v): void
  • Parameters

    • v: number

    Returns void

  • get enhancedIntervalPreferMoreCategoryLabels(): 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.

    Returns boolean

  • set enhancedIntervalPreferMoreCategoryLabels(v): void
  • Parameters

    • v: boolean

    Returns void

  • get expectFunctions(): 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.

    Returns boolean

  • set expectFunctions(v): void
  • Parameters

    • v: boolean

    Returns void

  • get formatLabel(): ((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>

    Returns ((item) => string)

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

  • set formatLabel(v): void
  • Parameters

    • v: ((item) => string)
        • (item): string
        • Parameters

          • item: any

          Returns string

    Returns void

  • get gap(): number
  • 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>

    Returns number

  • set gap(v): void
  • Parameters

    • v: number

    Returns void

  • get interval(): number
  • 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.

    Interval determines how often to show a label, tickmark, and/or gridline along the x-axis. Set this property to n to display a label every nth item.

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

    <IgrCategoryXAxis name="xAxis" interval="3" />
    <IgrNumericYAxis name="yAxis" />

    <IgrLineSeries
    name="series1"
    xAxisName="xAxis"
    yAxisName="yAxis"
    valueMemberPath="Value"/>
    </IgrDataChart>

    Returns number

  • set interval(v): void
  • Parameters

    • v: number

    Returns void

  • get isAngular(): boolean
  • Gets if the current axis is of angular axis type

    Returns boolean

  • get isCategory(): boolean
  • Checks if the axis is of category axis type

    Returns boolean

  • get isCategoryDateTime(): boolean
  • Gets if the current axis is of category date time axis type

    Returns boolean

  • get isContinuous(): boolean
  • Gets if the current axis is a continuous rather than a discrete scale

    Returns boolean

  • get isDateTime(): boolean
  • Gets or sets if the current axis is of date time axis type

    Returns boolean

  • get isDisabled(): 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.

    Returns boolean

  • set isDisabled(v): void
  • Parameters

    • v: boolean

    Returns void

  • get isInverted(): boolean
  • Gets or sets the IsInverted property.

    Gets or sets the IsInverted property.

    Returns boolean

  • set isInverted(v): void
  • Parameters

    • v: boolean

    Returns void

  • get isNumeric(): boolean
  • Gets or sets if the current axis is of numeric axis type

    Gets or sets if the current axis is of numeric axis type
    

    Returns boolean

  • get isOrdinal(): boolean
  • Gets or sets if the current axis is of ordinal axis type

    Returns boolean

  • get isPiecewise(): boolean
  • Gets or sets if the axis is a piecewise scaling function.

    Returns boolean

  • get isRadial(): boolean
  • Gets or sets if the current axis is of radial axis type

    Returns boolean

  • get isSorting(): boolean
  • Gets or sets if the current axis is sorting data items

    Returns boolean

  • get isVertical(): boolean
  • Gets if the current axis is a vertical axis.

    Returns boolean

  • get itemsCount(): number
  • Gets the number of items in the current category axis items source.

    Returns number

  • set itemsCount(v): void
  • Parameters

    • v: number

    Returns void

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

    Returns any

  • set label(v): void
  • Parameters

    • v: any

    Returns void

  • get labelAngle(): 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} />

    Returns number

  • set labelAngle(v): void
  • Parameters

    • v: number

    Returns void

  • get labelBottomMargin(): number
  • Margin applied below the {0}.

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

    Returns number

  • set labelBottomMargin(v): void
  • Parameters

    • v: number

    Returns void

  • get labelExtent(): 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>

    Returns number

  • set labelExtent(v): void
  • Parameters

    • v: number

    Returns void

  • get labelFormat(): string
  • Gets or sets the label format string to use for the label.

    Returns string

  • set labelFormat(v): void
  • Parameters

    • v: string

    Returns void

  • get labelFormatSpecifiers(): any[]
  • Gets or sets the format specifiers to use with the LabelFormat string.

    Returns any[]

  • set labelFormatSpecifiers(v): void
  • Parameters

    • v: any[]

    Returns void

  • get labelFormats(): IgrTimeAxisLabelFormatCollection
  • A list of axis label formats to apply, which are selected according to the visible axis range. The label format selected will be the one with the largest range smaller than the visible range of the axis.

    You can use the LabelFormats for adjusting the labels depending on the range of the time shown by the chart.

    let labelFormat = new TimeAxisLabelFormat();
    labelFormat.format = "hh:mm:ss";
    labelFormat.range = 1000;
    this.xAxis.labelFormats.add(labelFormat);
    labelFormat = new TimeAxisLabelFormat();
    labelFormat.format = "hh:mm";
    labelFormat.range = 60 * 1000;
    this.xAxis.labelFormats.add(labelFormat);
    labelFormat = new TimeAxisLabelFormat();
    labelFormat.format = "MMM-dd-yy";
    labelFormat.range = 24 * 60 * 60 * 1000;
    this.xAxis.labelFormats.add(labelFormat);
    labelFormat = new TimeAxisLabelFormat();
    labelFormat.format = "MMM yy";
    labelFormat.range = 365.24 * 24 * 60 * 60 * 1000;
    this.xAxis.labelFormats.add(labelFormat);
    labelFormat = new TimeAxisLabelFormat();
    labelFormat.format = "yyyy";
    labelFormat.range = 5 * 365 * 24 * 60 * 60 * 1000;
    this.xAxis.labelFormats.add(labelFormat);
     <IgrDataChart
    dataSource={this.state.dataSource}
    width="700px"
    height="500px">

    <IgrOrdinalTimeXAxis name="xAxis"
    label="Date"
    labelFormats="labelFormats" />
    <IgrNumericYAxis name="yAxis" />
    </IgrDataChart>

    Returns IgrTimeAxisLabelFormatCollection

  • set labelFormats(v): void
  • Parameters

    Returns void

  • get labelHorizontalAlignment(): HorizontalAlignment
  • Gets or sets the horizontal alignment of the {0}.

    The HorizontalAlignment property is used for the horizontal alignment.

    Returns HorizontalAlignment

  • set labelHorizontalAlignment(v): void
  • Parameters

    • v: HorizontalAlignment

    Returns void

  • get labelLeftMargin(): number
  • Margin applied to the left of the {0}.

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

    Returns number

  • set labelLeftMargin(v): void
  • Parameters

    • v: number

    Returns void

  • get labelLocation(): AxisLabelsLocation
  • Gets or sets the location of the {0}.

    The Location property is used for the location.

    Returns AxisLabelsLocation

  • set labelLocation(v): void
  • Parameters

    Returns void

  • get labelRightMargin(): number
  • Margin applied to the right of the {0}.

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

    Returns number

  • set labelRightMargin(v): void
  • Parameters

    • v: number

    Returns void

  • get labelShowFirstLabel(): 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.

    Returns boolean

  • set labelShowFirstLabel(v): void
  • Parameters

    • v: boolean

    Returns void

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

    Returns string

  • set labelTextColor(v): void
  • Parameters

    • v: string

    Returns void

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

    Returns string

  • set labelTextStyle(v): void
  • Parameters

    • v: string

    Returns void

  • get labelTopMargin(): 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" />

    Returns number

  • set labelTopMargin(v): void
  • Parameters

    • v: number

    Returns void

  • get labelVerticalAlignment(): VerticalAlignment
  • Gets or sets the vertical alignment of the {0}.

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

    Returns VerticalAlignment

  • set labelVerticalAlignment(v): void
  • Parameters

    • v: VerticalAlignment

    Returns void

  • get labelVisibility(): Visibility
  • Gets or sets the visibility of the {0}.

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

    Returns Visibility

  • set labelVisibility(v): void
  • Parameters

    • v: Visibility

    Returns void

  • get labellingMode(): TimeAxisLabellingMode
  • Gets or sets the labelling mode to use when the automatic label formats are applied.

    Returns TimeAxisLabellingMode

  • set labellingMode(v): void
  • Parameters

    Returns void

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

    Returns string

  • set majorStroke(v): void
  • Parameters

    • v: string

    Returns void

  • get majorStrokeDashArray(): number[]
  • Gets or sets the MajorStrokeDashArray property.

    Returns number[]

  • set majorStrokeDashArray(v): void
  • Parameters

    • v: number[]

    Returns void

  • get majorStrokeThickness(): 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} />

    Returns number

  • set majorStrokeThickness(v): void
  • Parameters

    • v: number

    Returns void

  • get maximumGap(): number
  • Gets or sets the maximum gap value to allow. This defaults to 1.0.

    Returns number

  • set maximumGap(v): void
  • Parameters

    • v: number

    Returns void

  • get maximumValue(): Date
  • Sets the maximum DateTime value to be displayed on this axis. This property can be used to constrain the items displayed on the axis, within the range of DateTimes in the ItemsSource. It will ignore any setting outside the actual range of data.

    Returns Date

  • set maximumValue(v): void
  • Parameters

    • v: Date

    Returns void

  • get minimumGapSize(): number
  • Gets or sets the minimum amount of pixels to use for the gap between categories, if possible.

    Returns number

  • set minimumGapSize(v): void
  • Parameters

    • v: number

    Returns void

  • get minimumValue(): Date
  • Sets the minimum DateTime value to be displayed on this axis. This property can be used to constrain the items displayed on the axis, within the range of DateTimes in the ItemsSource. It will ignore any setting outside the actual range of data.

    Returns Date

  • set minimumValue(v): void
  • Parameters

    • v: Date

    Returns void

  • get minorInterval(): number
  • Gets or sets the frequency of displayed minor lines. The set value is a factor that determines how the minor lines will be displayed.

    MinorInterval determines how often to show a minor gridline along the x-axis. This property is relevant only when the displayed series is a type with grouping, like column series.

    MinorInterval is expressed as a number between 0 and 1, representing the frequency of the interval. To display minor gridlines representing 10ths of an item width, set MinorInterval to 0.1.

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

    <IgrCategoryXAxis name="xAxis"
    minorInterval={0.1}
    minorStroke="green"
    minorStrokeThickness={1} />
    <IgrNumericYAxis name="yAxis" />

    <IgrLineSeries
    name="series1"
    xAxisName="xAxis"
    yAxisName="yAxis"
    valueMemberPath="value"/>
    </IgrDataChart>

    Returns number

  • set minorInterval(v): void
  • Parameters

    • v: number

    Returns void

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

    Returns string

  • set minorStroke(v): void
  • Parameters

    • v: string

    Returns void

  • get minorStrokeDashArray(): number[]
  • Gets or sets the MinorStrokeDashArray property.

    Returns number[]

  • set minorStrokeDashArray(v): void
  • Parameters

    • v: number[]

    Returns void

  • get minorStrokeThickness(): number
  • Gets or sets the MinorStrokeThickness property.

    Returns number

  • set minorStrokeThickness(v): void
  • Parameters

    • v: number

    Returns void

  • get name(): string
  • Returns string

  • set name(value): void
  • Parameters

    • value: string

    Returns void

  • get overlap(): number
  • 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>

    Returns number

  • set overlap(v): void
  • Parameters

    • v: number

    Returns void

  • get rangeChanged(): ((s, e) => void)
  • Occurs when the axis range changes.

    Returns ((s, e) => void)

  • set rangeChanged(ev): void
  • Parameters

    Returns void

  • get renderRequested(): ((s, e) => void)
  • This event is raised every time a render has been requested from a series.

    Returns ((s, e) => void)

  • set renderRequested(ev): void
  • Parameters

    Returns void

  • get shouldAvoidAnnotationCollisions(): 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.

    Returns boolean

  • set shouldAvoidAnnotationCollisions(v): void
  • Parameters

    • v: boolean

    Returns void

  • get shouldKeepAnnotationsInView(): boolean
  • ets or sets whether annotations should be kept in view, even if they aren't positioned where they should appear on the scale.

    Returns boolean

  • set shouldKeepAnnotationsInView(v): void
  • Parameters

    • v: boolean

    Returns void

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

    Returns string

  • set strip(v): void
  • Parameters

    • v: string

    Returns void

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

    Returns string

  • set stroke(v): void
  • Parameters

    • v: string

    Returns void

  • get strokeDashArray(): number[]
  • Gets or sets the StrokeDashArray property.

    Returns number[]

  • set strokeDashArray(v): void
  • Parameters

    • v: number[]

    Returns void

  • get strokeThickness(): 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}>

    Returns number

  • set strokeThickness(v): void
  • Parameters

    • v: number

    Returns void

  • get tickLength(): 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" />

    Returns number

  • set tickLength(v): void
  • Parameters

    • v: number

    Returns void

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

    Returns string

  • set tickStroke(v): void
  • Parameters

    • v: string

    Returns void

  • get tickStrokeDashArray(): number[]
  • Gets or sets the TickStrokeDashArray property.

    Returns number[]

  • set tickStrokeDashArray(v): void
  • Parameters

    • v: number[]

    Returns void

  • get tickStrokeThickness(): 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" />

    Returns number

  • set tickStrokeThickness(v): void
  • Parameters

    • v: number

    Returns void

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

    Returns string

  • set title(v): void
  • Parameters

    • v: string

    Returns void

  • get titleAngle(): 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} />

    Returns number

  • set titleAngle(v): void
  • Parameters

    • v: number

    Returns void

  • get titleBottomMargin(): number
  • Margin applied below the {0}.

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

    Returns number

  • set titleBottomMargin(v): void
  • Parameters

    • v: number

    Returns void

  • get titleExtent(): 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>

    Returns number

  • set titleExtent(v): void
  • Parameters

    • v: number

    Returns void

  • get titleHorizontalAlignment(): HorizontalAlignment
  • Gets or sets the horizontal alignment of the {0}.

    The HorizontalAlignment property is used for the horizontal alignment.

    Returns HorizontalAlignment

  • set titleHorizontalAlignment(v): void
  • Parameters

    • v: HorizontalAlignment

    Returns void

  • get titleLeftMargin(): number
  • Margin applied to the left of the {0}.

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

    Returns number

  • set titleLeftMargin(v): void
  • Parameters

    • v: number

    Returns void

  • get titleLocation(): AxisLabelsLocation
  • Gets or sets the location of the {0}.

    The Location property is used for the location.

    Returns AxisLabelsLocation

  • set titleLocation(v): void
  • Parameters

    Returns void

  • get titlePosition(): AxisTitlePosition
  • Gets or sets the title position relative to the axis labels.

    Returns AxisTitlePosition

  • set titlePosition(v): void
  • Parameters

    Returns void

  • get titleRightMargin(): number
  • Margin applied to the right of the {0}.

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

    Returns number

  • set titleRightMargin(v): void
  • Parameters

    • v: number

    Returns void

  • get titleShowFirstLabel(): 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.

    Returns boolean

  • set titleShowFirstLabel(v): void
  • Parameters

    • v: boolean

    Returns void

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

    Returns string

  • set titleTextColor(v): void
  • Parameters

    • v: string

    Returns void

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

    Returns string

  • set titleTextStyle(v): void
  • Parameters

    • v: string

    Returns void

  • get titleTopMargin(): 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" />

    Returns number

  • set titleTopMargin(v): void
  • Parameters

    • v: number

    Returns void

  • get titleVerticalAlignment(): VerticalAlignment
  • Gets or sets the vertical alignment of the {0}.

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

    Returns VerticalAlignment

  • set titleVerticalAlignment(v): void
  • Parameters

    • v: VerticalAlignment

    Returns void

  • get titleVisibility(): Visibility
  • Gets or sets the visibility of the {0}.

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

    Returns Visibility

  • set titleVisibility(v): void
  • Parameters

    • v: Visibility

    Returns void

  • get useClusteringMode(): boolean
  • 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>

    Returns boolean

  • set useClusteringMode(v): void
  • Parameters

    • v: boolean

    Returns void

  • get useEnhancedIntervalManagement(): 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.

    Returns boolean

  • set useEnhancedIntervalManagement(v): void
  • Parameters

    • v: boolean

    Returns void

  • get usePerLabelHeightMeasurement(): boolean
  • Gets or sets whether to use label height measurement when determining the initial number of labels to render, before resolving collisions, etc.

    Returns boolean

  • set usePerLabelHeightMeasurement(v): void
  • Parameters

    • v: boolean

    Returns void

  • get zoomMaximumCategoryRange(): number
  • Gets or sets number of visible categories at maximum zooming level This property is overridden by chart's WindowRectMinWidth property

    Returns number

  • set zoomMaximumCategoryRange(v): void
  • Parameters

    • v: number

    Returns void

  • get zoomMaximumItemSpan(): number
  • Gets or sets maximum pixel span of series item that will be visible at maximum zooming level This property ensures that series item does not get stretch above specified value. This property is overridden by chart's WindowRectMinWidth property

    Returns number

  • set zoomMaximumItemSpan(v): void
  • Parameters

    • v: number

    Returns void

  • get zoomToCategoryRange(): number
  • Gets or sets range of categories that the chart will zoom in to and fill plot area This property is overridden by chart's WindowRect or WindowScaleHorizontal properties

    Returns number

  • set zoomToCategoryRange(v): void
  • Parameters

    • v: number

    Returns void

  • get zoomToCategoryStart(): number
  • Gets or sets starting category that chart will move its zoom window. Acceptable value is between 0 and number of data items This property is overridden by chart's WindowRect or WindowScaleHorizontal properties

    Returns number

  • set zoomToCategoryStart(v): void
  • Parameters

    • v: number

    Returns void

  • get zoomToItemSpan(): number
  • Gets or sets pixel span of series item that will be used to zoom chart such that the item has desired span Chart will automatically zoom in until series item has specified pixel span. This property is overridden by chart's WindowRect or WindowScaleHorizontal properties

    Returns number

  • set zoomToItemSpan(v): void
  • Parameters

    • v: number

    Returns void

Methods

  • Catches exceptions generated in descendant components. Unhandled exceptions will cause the entire component tree to unmount.

    Parameters

    • error: Error
    • errorInfo: ErrorInfo

    Returns void

  • Called immediately after updating occurs. Not called for the initial render.

    The snapshot is only present if getSnapshotBeforeUpdate is present and returns non-null.

    Parameters

    • prevProps: Readonly<P>
    • prevState: Readonly<{}>
    • Optional snapshot: any

    Returns void

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

    Returns void

  • Parameters

    • name: string

    Returns any

  • Parameters

    • Optional callback: (() => void)
        • (): void
        • Returns void

    Returns void

  • Parameters

    • point: IgPoint
    • useInterpolation: boolean
    • singularWidth: number

    Returns IgRect

  • Parameters

    • point: IgPoint
    • useInterpolation: boolean
    • singularWidth: number
    • isVertical: boolean

    Returns IgRect

  • Returns number[]

  • Parameters

    • item: any
    • memberPathName: string

    Returns any

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

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

    Parameters

    • prevProps: Readonly<P>
    • prevState: Readonly<{}>

    Returns any

  • Gets the label for a data item.

    Parameters

    • value: number
      • The unscaled value to get a label for.

    Returns string

  • Gets window zoom scale required to zoom to specified number of categories

    Parameters

    • categoriesCount: number

    Returns number

  • Gets window zoom scale required to zoom to specified span of series item

    Parameters

    • pixels: number

    Returns number

  • Used to manually notify the axis that the data source has reset or cleared its items.

    Returns void

  • Parameters

    • index: number
    • newItem: any

    Returns void

  • Parameters

    • index: number
    • oldItem: any

    Returns void

  • Parameters

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

    Returns void

  • Parameters

    • data: any[]

    Returns void

  • Returns any

  • Renders the axis with no animation.

    Returns void

  • If using enhanced interval management and precise interval fitting, this will reset the cached maximum label width, and recalculate using the current labels.

    Returns void

  • Scales a value from axis space into screen space.

    Parameters

    • unscaledValue: number
      • The unscaled axis value to scale.

    Returns number

  • Scrolls the specified item into view.

    Parameters

    • item: any
      • Data item to scroll into view

    Returns void

  • Parameters

    • minimum: number
    • maximum: number

    Returns void

  • Type parameters

    Type Parameters

    • K extends never

    Parameters

    • state: {} | ((prevState, props) => {} | Pick<{}, K>) | Pick<{}, K>
    • Optional callback: (() => void)
        • (): void
        • Returns void

    Returns void

  • Parameters

    • nextProps: any
    • nextState: any

    Returns boolean

  • Unscales a value from screen space into axis space.

    Parameters

    • unscaledValue: number
      • The scaled value in screen coordinates to unscale into axis space.

    Returns number