Ignite UI for React

All
  • Public
  • Public/Protected
  • All

Interface IIgrAxisProps

Hierarchy

Hierarchy

Properties

Properties

Optional actualMajorStroke

actualMajorStroke?: string

Gets or sets the ActualMajorStroke property.

The ActualMajorStroke property is used for ActualMajorStroke of the axis.

Optional actualMinorStroke

actualMinorStroke?: string

Gets or sets the ActualMinorStroke property.

The ActualMinorStroke property is used for ActualMinorStroke of the axis.

Optional actualStroke

actualStroke?: string

Gets or sets the effective stroke used for the axis.

Optional children

children?: ReactNode

Optional coercionMethods

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.

Optional crossingAxis

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>

Optional crossingAxisName

crossingAxisName?: string

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

Optional crossingValue

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>

Optional enhancedIntervalMinimumCharacters

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.

Optional enhancedIntervalPreferMoreCategoryLabels

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.

Optional expectFunctions

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.

Optional formatLabel

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

Optional isDisabled

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.

Optional isInverted

isInverted?: string | boolean

Gets or sets the IsInverted property.

Gets or sets the IsInverted property.

Optional label

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

Optional labelAngle

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

Optional labelBottomMargin

labelBottomMargin?: string | number

Margin applied below the {0}.

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

Optional labelExtent

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>

Optional labelFormat

labelFormat?: string

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

Optional labelFormatSpecifiers

labelFormatSpecifiers?: any[]

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

Optional labelHorizontalAlignment

labelHorizontalAlignment?: string | HorizontalAlignment

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

The HorizontalAlignment property is used for the horizontal alignment.

Optional labelLeftMargin

labelLeftMargin?: string | number

Margin applied to the left of the {0}.

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

Optional labelLocation

labelLocation?: string | AxisLabelsLocation

Gets or sets the location of the {0}.

The Location property is used for the location.

Optional labelRightMargin

labelRightMargin?: string | number

Margin applied to the right of the {0}.

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

Optional labelShowFirstLabel

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.

Optional labelTextColor

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

Optional labelTextStyle

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

Optional labelTopMargin

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

Optional labelVerticalAlignment

labelVerticalAlignment?: string | VerticalAlignment

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

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

Optional labelVisibility

labelVisibility?: string | Visibility

Gets or sets the visibility of the {0}.

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

Optional majorStroke

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

Optional majorStrokeDashArray

majorStrokeDashArray?: string | number[]

Gets or sets the MajorStrokeDashArray property.

Optional majorStrokeThickness

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

Optional minorStroke

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

Optional minorStrokeDashArray

minorStrokeDashArray?: string | number[]

Gets or sets the MinorStrokeDashArray property.

Optional minorStrokeThickness

minorStrokeThickness?: string | number

Gets or sets the MinorStrokeThickness property.

name

name: string

Sets or gets a required unique name for the axis.

Optional rangeChanged

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

Type declaration

Optional renderRequested

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

Type declaration

Optional shouldAvoidAnnotationCollisions

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.

Optional shouldKeepAnnotationsInView

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.

Optional strip

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

Optional stroke

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

Optional strokeDashArray

strokeDashArray?: string | number[]

Gets or sets the StrokeDashArray property.

Optional strokeThickness

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

Optional tickLength

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

Optional tickStroke

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

Optional tickStrokeDashArray

tickStrokeDashArray?: string | number[]

Gets or sets the TickStrokeDashArray property.

Optional tickStrokeThickness

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

Optional title

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

Optional titleAngle

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

Optional titleBottomMargin

titleBottomMargin?: string | number

Margin applied below the {0}.

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

Optional titleExtent

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>

Optional titleHorizontalAlignment

titleHorizontalAlignment?: string | HorizontalAlignment

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

The HorizontalAlignment property is used for the horizontal alignment.

Optional titleLeftMargin

titleLeftMargin?: string | number

Margin applied to the left of the {0}.

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

Optional titleLocation

titleLocation?: string | AxisLabelsLocation

Gets or sets the location of the {0}.

The Location property is used for the location.

Optional titlePosition

titlePosition?: string | AxisTitlePosition

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

Optional titleRightMargin

titleRightMargin?: string | number

Margin applied to the right of the {0}.

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

Optional titleShowFirstLabel

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.

Optional titleTextColor

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

Optional titleTextStyle

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

Optional titleTopMargin

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

Optional titleVerticalAlignment

titleVerticalAlignment?: string | VerticalAlignment

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

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

Optional titleVisibility

titleVisibility?: string | Visibility

Gets or sets the visibility of the {0}.

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

Optional useEnhancedIntervalManagement

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.

Optional usePerLabelHeightMeasurement

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.