Represents a IgxDataChartComponent numeric X axis.

The NumericXAxis treats the data as continuously varying numerical data items. Labels on this axis are placed along the X-axis. The location of labels varies according to the value in a data column that is mapped using the XMemberPath property of Scatter Series or ValueMemberPath property of Bar Series.

<igx-data-chart
[dataSource]="data" >
<igx-numeric-x-axis
label="label"
#xAxis>
</igx-category-x-axis>
<igx-numeric-y-axis
crossingAxis= "xAxis"
crossingValue= 700
#yAxis>
</igx-numeric-y-axis>
</igx-data-chart>

Hierarchy

Hierarchy

Constructors

Properties

Accessors

Methods

Constructors

Properties

ngAcceptInputType_abbreviateLargeNumbers: string | boolean
ngAcceptInputType_abbreviatedLabelFormatSpecifiers: string | any[]
ngAcceptInputType_actualInterval: string | number
ngAcceptInputType_actualIsLogarithmic: string | boolean
ngAcceptInputType_actualMaximumValue: string | number
ngAcceptInputType_actualMinimumValue: string | number
ngAcceptInputType_actualMinorInterval: string | number
ngAcceptInputType_actualVisibleMaximumValue: string | number
ngAcceptInputType_actualVisibleMinimumValue: string | number
ngAcceptInputType_annotations: string | IgxAxisAnnotationCollection
ngAcceptInputType_autoRangeBufferMode: string | AxisRangeBufferMode
ngAcceptInputType_enhancedIntervalMinimumCharacters: string | number
ngAcceptInputType_enhancedIntervalPreferMoreCategoryLabels: string | boolean
ngAcceptInputType_expectFunctions: string | boolean
ngAcceptInputType_favorLabellingScaleEnd: string | boolean
ngAcceptInputType_hasUserMaximum: string | boolean
ngAcceptInputType_hasUserMinimum: string | boolean
ngAcceptInputType_interval: string | number
ngAcceptInputType_isAngular: string | boolean
ngAcceptInputType_isCategory: string | boolean
ngAcceptInputType_isCategoryDateTime: string | boolean
ngAcceptInputType_isContinuous: string | boolean
ngAcceptInputType_isDateTime: string | boolean
ngAcceptInputType_isDisabled: string | boolean
ngAcceptInputType_isFormattingAbbreviatedLargeNumber: string | boolean
ngAcceptInputType_isInverted: string | boolean
ngAcceptInputType_isLogarithmic: string | boolean
ngAcceptInputType_isNumeric: string | boolean
ngAcceptInputType_isOrdinal: string | boolean
ngAcceptInputType_isPiecewise: string | boolean
ngAcceptInputType_isRadial: string | boolean
ngAcceptInputType_isSorting: string | boolean
ngAcceptInputType_isVertical: string | boolean
ngAcceptInputType_labelAngle: string | number
ngAcceptInputType_labelBottomMargin: string | number
ngAcceptInputType_labelExtent: string | number
ngAcceptInputType_labelFormatSpecifiers: string | any[]
ngAcceptInputType_labelHorizontalAlignment: string | HorizontalAlignment
ngAcceptInputType_labelLeftMargin: string | number
ngAcceptInputType_labelLocation: string | AxisLabelsLocation
ngAcceptInputType_labelRightMargin: string | number
ngAcceptInputType_labelShowFirstLabel: string | boolean
ngAcceptInputType_labelTopMargin: string | number
ngAcceptInputType_labelVerticalAlignment: string | VerticalAlignment
ngAcceptInputType_labelVisibility: string | Visibility
ngAcceptInputType_logarithmBase: string | number
ngAcceptInputType_majorStrokeDashArray: string | number[]
ngAcceptInputType_majorStrokeThickness: string | number
ngAcceptInputType_maximumValue: string | number
ngAcceptInputType_minimumValue: string | number
ngAcceptInputType_minorInterval: string | number
ngAcceptInputType_minorStrokeDashArray: string | number[]
ngAcceptInputType_minorStrokeThickness: string | number
ngAcceptInputType_referenceValue: string | number
ngAcceptInputType_scaleMode: string | NumericScaleMode
ngAcceptInputType_shouldAvoidAnnotationCollisions: string | boolean
ngAcceptInputType_shouldKeepAnnotationsInView: string | boolean
ngAcceptInputType_strokeDashArray: string | number[]
ngAcceptInputType_strokeThickness: string | number
ngAcceptInputType_tickLength: string | number
ngAcceptInputType_tickStrokeDashArray: string | number[]
ngAcceptInputType_tickStrokeThickness: string | number
ngAcceptInputType_titleAngle: string | number
ngAcceptInputType_titleBottomMargin: string | number
ngAcceptInputType_titleExtent: string | number
ngAcceptInputType_titleHorizontalAlignment: string | HorizontalAlignment
ngAcceptInputType_titleLeftMargin: string | number
ngAcceptInputType_titleLocation: string | AxisLabelsLocation
ngAcceptInputType_titlePosition: string | AxisTitlePosition
ngAcceptInputType_titleRightMargin: string | number
ngAcceptInputType_titleShowFirstLabel: string | boolean
ngAcceptInputType_titleTopMargin: string | number
ngAcceptInputType_titleVerticalAlignment: string | VerticalAlignment
ngAcceptInputType_titleVisibility: string | Visibility
ngAcceptInputType_useEnhancedIntervalManagement: string | boolean
ngAcceptInputType_usePerLabelHeightMeasurement: string | boolean
ɵcmp: unknown
ɵfac: unknown

Accessors

  • get abbreviateLargeNumbers(): boolean
  • A boolean indicating whether or not to abbreviate large numbers.

    Returns boolean

  • set abbreviateLargeNumbers(v: boolean): void
  • Parameters

    • v: boolean

    Returns void

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

    Returns string

  • set abbreviatedLabelFormat(v: string): void
  • Parameters

    • v: string

    Returns void

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

    Returns any[]

  • set abbreviatedLabelFormatSpecifiers(v: any[]): void
  • Parameters

    • v: any[]

    Returns void

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

    let effectiveInterval: number = yAxis.actualInterval;
    

    Returns number

  • set actualInterval(v: number): void
  • Parameters

    • v: number

    Returns void

  • get actualIntervalChange(): EventEmitter<number>
  • Returns EventEmitter<number>

  • get actualIsLogarithmic(): boolean
  • Determines if the axis has a valid logarithmic scale.

    let effectiveLogarithmic: boolean = this.yAxis.actualIsLogarithmic
    

    Returns boolean

  • set actualIsLogarithmic(v: boolean): void
  • Parameters

    • v: boolean

    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: string): void
  • Parameters

    • v: string

    Returns void

  • get actualMaximumValue(): number
  • Gets the effective maximum value for the current numeric axis object.

    let effectiveMaxValue: number = yAxis.actualMaximumValue;
    

    Returns number

  • set actualMaximumValue(v: number): void
  • Parameters

    • v: number

    Returns void

  • get actualMaximumValueChange(): EventEmitter<number>
  • Returns EventEmitter<number>

  • get actualMinimumValue(): number
  • Gets the effective minimum value for the current numeric axis object.

    let effectiveMinValue: number = yAxis.actualMinimumValue;
    

    Returns number

  • set actualMinimumValue(v: number): void
  • Parameters

    • v: number

    Returns void

  • get actualMinimumValueChange(): EventEmitter<number>
  • Returns EventEmitter<number>

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

    let effectiveMinorInterval: number = yAxis.actualMinorInterval;
    

    Returns number

  • set actualMinorInterval(v: number): void
  • Parameters

    • v: number

    Returns void

  • get actualMinorIntervalChange(): EventEmitter<number>
  • Returns EventEmitter<number>

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

    The ActualMinorStroke property is used for ActualMinorStroke of the axis.

    Returns string

  • set actualMinorStroke(v: string): void
  • Parameters

    • v: string

    Returns void

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

    Returns string

  • set actualStroke(v: string): void
  • Parameters

    • v: string

    Returns void

  • get actualVisibleMaximumValue(): number
  • Gets the effective visible maximum value for the current numeric axis object.

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

    let effectiveVisibleMaxValue: number = yAxis.actualVisibleMaximumValue;
    

    Returns number

  • set actualVisibleMaximumValue(v: number): void
  • Parameters

    • v: number

    Returns void

  • get actualVisibleMinimumValue(): number
  • Gets the effective minimum value for the current numeric axis object.

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

    let effectiveVisibleMinValue: number = yAxis.actualVisibleMinimumValue;
    

    Returns number

  • set actualVisibleMinimumValue(v: number): void
  • Parameters

    • v: number

    Returns void

  • get autoRangeBufferMode(): AxisRangeBufferMode
  • Gets or sets how the numeric axis will adjust its range buffer to less closely fix the data from the series.

    Returns AxisRangeBufferMode

  • set autoRangeBufferMode(v: AxisRangeBufferMode): void
  • Parameters

    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: any): void
  • Parameters

    • v: any

    Returns void

  • get crossingAxis(): IgxAxisComponent
  • Gets or sets the CrossingAxis property.

    The CrossingAxis property is used for CrossingAxis .

    <igx-data-chart
    [dataSource]="data" >
    <igx-category-x-axis
    label="label"
    #xAxis>
    </igx-category-x-axis>
    <igx-numeric-y-axis
    crossingAxis= "xAxis"
    crossingValue= 700
    #yAxis>
    </igx-numeric-y-axis>
    </igx-data-chart>

    Returns IgxAxisComponent

  • set crossingAxis(v: IgxAxisComponent): void
  • Parameters

    Returns void

  • get crossingValue(): any
  • Gets or sets the CrossingValue property.

    The CrossingValue property is used for CrossingValue of the axis.

    <igx-data-chart
    [dataSource]="data" >
    <igx-category-x-axis
    label="label"
    #xAxis>
    </igx-category-x-axis>
    <igx-numeric-y-axis
    crossingAxis= "xAxis"
    crossingValue= 700
    #yAxis>
    </igx-numeric-y-axis>
    </igx-data-chart>

    Returns any

  • set crossingValue(v: any): void
  • Parameters

    • v: any

    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.

    <igx-data-chart
    [dataSource]="data" >
    <igx-category-x-axis
    label="label"
    #xAxis>
    </igx-category-x-axis>
    <igx-numeric-y-axis
    enhancedIntervalMinimumCharacters=5
    #yAxis>
    </igx-numeric-y-axis>

    </igx-data-chart>

    Returns number

  • set enhancedIntervalMinimumCharacters(v: number): 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: boolean): 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: boolean): void
  • Parameters

    • v: boolean

    Returns void

  • get favorLabellingScaleEnd(): boolean
  • Gets or sets whether the axis should favor emitting a label at the end of the scale.

    Returns boolean

  • set favorLabellingScaleEnd(v: boolean): void
  • Parameters

    • v: boolean

    Returns void

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

    Returns ((item: any) => string)

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

        Parameters

        • item: any

        Returns string

  • set formatAbbreviatedLabel(v: ((item: any) => string)): void
  • Parameters

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

          • item: any

          Returns string

    Returns void

  • get formatLabel(): ((item: any) => 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.

    <igx-data-chart [dataSource]="data" >
    <igx-category-x-axis
    name="xAxis"
    FormatLabel="xAxis_FormatLabel" />
    </igx-data-chart>

    Returns ((item: any) => string)

      • (item: any): 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.

        <igx-data-chart [dataSource]="data" >
        <igx-category-x-axis
        name="xAxis"
        FormatLabel="xAxis_FormatLabel" />
        </igx-data-chart>

        Parameters

        • item: any

        Returns string

  • set formatLabel(v: ((item: any) => string)): void
  • Parameters

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

          • item: any

          Returns string

    Returns void

  • get hasUserMaximum(): boolean
  • Determines if the axis has a user-defined maximum.

    HasUserMinimum is used to determine if a numeric axis has a user definied minium value.

    let hasSetMinimum: boolean = this.yAxis.hasUserMinimum;
    

    Returns boolean

  • get hasUserMinimum(): boolean
  • Determines if the axis has a user-defined minimum.

    HasUserMaximum is used to determine if a numeric axis has a user definied maximum value.

    let hasSetMaximum: boolean = this.yAxis.hasUserMaximum;
    

    Returns boolean

  • get interval(): number
  • Gets or sets the Interval property.

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

    this.yAxis.interval = 20;
    
    <igx-data-chart
    [dataSource]="data">
    <igx-category-x-axis
    label="label"
    #xAxis
    >
    </igx-category-x-axis>
    <igx-numeric-y-axis
    interval="20"
    #yAxis>
    </igx-numeric-y-axis>

    <igx-column-series
    [xAxis]="xAxis"
    [yAxis]="yAxis"
    valueMemberPath="value">
    </igx-column-series>
    </igx-data-chart>

    Returns number

  • set interval(v: number): void
  • Parameters

    • v: number

    Returns void

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

    Returns boolean

  • get isCategory(): boolean
  • Gets or sets if the current 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: boolean): void
  • Parameters

    • v: boolean

    Returns void

  • get isFormattingAbbreviatedLargeNumber(): boolean
  • Returns boolean

  • set isFormattingAbbreviatedLargeNumber(v: boolean): void
  • Parameters

    • v: boolean

    Returns void

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

    Gets or sets the IsInverted property.

    <igx-data-chart
    [dataSource]="data" >
    <igx-category-x-axis
    label="label"
    isInverted= true
    #xAxis>
    </igx-category-x-axis>
    <igx-numeric-y-axis
    #yAxis>
    </igx-numeric-y-axis>

    </igx-data-chart>

    Returns boolean

  • set isInverted(v: boolean): void
  • Parameters

    • v: boolean

    Returns void

  • get isLogarithmic(): boolean
  • Gets or sets the IsLogarithmic property.

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

    this.yAxis.isLogarithmic= true;
    this.yAxis.logarithmBase = 2;
    <igx-data-chart
    [dataSource]="data">
    <igx-category-x-axis
    label="label"
    #xAxis>
    </igx-category-x-axis>
    <igx-numeric-y-axis
    isLogarithmic=true
    logarithmBase=2
    #yAxis>
    </igx-numeric-y-axis>
    <igx-line-series
    [xAxis]="xAxis"
    [yAxis]="yAxis"
    valueMemberPath="value">
    </igx-line-series>
    </igx-data-chart>

    Returns boolean

  • set isLogarithmic(v: boolean): void
  • Parameters

    • v: boolean

    Returns void

  • get isNumeric(): boolean
  • 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 label(): any
  • Gets or sets the axis label format string.

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

    Returns any

  • set label(v: any): 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.

    Returns number

  • set labelAngle(v: number): 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: number): 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.

    Returns number

  • set labelExtent(v: number): 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: string): 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: any[]): void
  • Parameters

    • v: any[]

    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: HorizontalAlignment): void
  • Parameters

    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: number): 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: AxisLabelsLocation): 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: number): 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: boolean): 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.

    Returns string

  • set labelTextColor(v: string): 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.

    Returns string

  • set labelTextStyle(v: string): 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.

    Returns number

  • set labelTopMargin(v: number): 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: VerticalAlignment): void
  • Parameters

    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: Visibility): void
  • Parameters

    Returns void

  • get logarithmBase(): number
  • Gets or sets the LogarithmBase property.

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

    this.yAxis.scaleMode = NumericScaleMode.Logarithmic;
    this.yAxis.logarithmBase = 2;
    <igx-data-chart
    [dataSource]="data">
    <igx-category-x-axis
    label="label"
    #xAxis>
    </igx-category-x-axis>
    <igx-numeric-y-axis
    scaleMode="Logarithmic"
    logarithmBase=2
    #yAxis>
    </igx-numeric-y-axis>
    <igx-line-series
    [xAxis]="xAxis"
    [yAxis]="yAxis"
    valueMemberPath="value">
    </igx-line-series>
    </igx-data-chart>

    Returns number

  • set logarithmBase(v: number): void
  • Parameters

    • v: number

    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.

    <igx-data-chart
    [dataSource]="data" >
    <igx-category-x-axis
    label="label"
    #xAxis>
    </igx-category-x-axis>
    <igx-numeric-y-axis
    majorStroke="black"
    #yAxis>
    </igx-numeric-y-axis>
    </igx-data-chart>

    Returns string

  • set majorStroke(v: string): void
  • Parameters

    • v: string

    Returns void

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

    Returns number[]

  • set majorStrokeDashArray(v: number[]): void
  • Parameters

    • v: number[]

    Returns void

  • get majorStrokeThickness(): number
  • Gets or sets the MajorStrokeThickness property.

    Gets or sets the MajorStrokeThickness using this property.

    <igx-data-chart
    [dataSource]="data" >
    <igx-category-x-axis
    label="label"
    #xAxis>
    </igx-category-x-axis>
    <igx-numeric-y-axis
    majorStrokeThickness="1"
    #yAxis>
    </igx-numeric-y-axis>
    </igx-data-chart>

    Returns number

  • set majorStrokeThickness(v: number): void
  • Parameters

    • v: number

    Returns void

  • get maximumValue(): number
  • Gets or sets the MaximumValue property.

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

    this.yAxis.maximumValue = 80;
    
    <igx-data-chart
    [dataSource]="data">
    <igx-category-x-axis
    label="label"
    #xAxis>
    </igx-category-x-axis>
    <igx-numeric-y-axis
    maximumValue=80
    #yAxis>
    </igx-numeric-y-axis>
    <igx-line-series
    [xAxis]="xAxis"
    [yAxis]="yAxis"
    valueMemberPath="value">
    </igx-line-series>
    </igx-data-chart>

    Returns number

  • set maximumValue(v: number): void
  • Parameters

    • v: number

    Returns void

  • get minimumValue(): number
  • Gets or sets the MinimumValue property.

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

    this.yAxis.minimumValue = 0;
    
    <igx-data-chart
    [dataSource]="data">
    <igx-category-x-axis
    label="label"
    #xAxis>
    </igx-category-x-axis>
    <igx-numeric-y-axis
    minimumValue=0
    #yAxis>
    </igx-numeric-y-axis>
    <igx-column-series
    [xAxis]="xAxis"
    [yAxis]="yAxis"
    valueMemberPath="value">
    </igx-column-series>
    </igx-data-chart>

    Returns number

  • set minimumValue(v: number): void
  • Parameters

    • v: number

    Returns void

  • get minorInterval(): number
  • Gets or sets the MinorInterval property.

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

    this.yAxis.minorInterval = 2.5;
    this.yAxis.minorStroke = 'blue';
    this.yAxis.minorStrokeThickness = 1;
    <igx-data-chart
    [dataSource]="data" >
    <igx-category-x-axis
    label="label"
    #xAxis>
    </igx-category-x-axis>
    <igx-numeric-y-axis
    minorInterval= 2.5
    minorStroke="blue"
    #yAxis>
    </igx-numeric-y-axis>
    <igx-column-series
    [xAxis]="xAxis"
    [yAxis]="yAxis"
    valueMemberPath="value">
    </igx-column-series>
    </igx-data-chart>

    Returns number

  • set minorInterval(v: number): void
  • Parameters

    • v: number

    Returns void

  • get minorStroke(): string
  • Gets or sets the MinorStroke property.

    Gets or sets the minorStroke thickness using MinorStrokeThickness property.

    <igx-data-chart
    [dataSource]="data" >
    <igx-category-x-axis
    label="label"
    #xAxis>
    </igx-category-x-axis>
    <igx-numeric-y-axis
    minorStrokeThickness="1"
    #yAxis>
    </igx-numeric-y-axis>
    </igx-data-chart>

    Returns string

  • set minorStroke(v: string): void
  • Parameters

    • v: string

    Returns void

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

    Returns number[]

  • set minorStrokeDashArray(v: number[]): void
  • Parameters

    • v: number[]

    Returns void

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

    Returns number

  • set minorStrokeThickness(v: number): void
  • Parameters

    • v: number

    Returns void

  • get name(): string
  • Returns string

  • set name(value: string): void
  • Parameters

    • value: string

    Returns void

  • get rangeChanged(): EventEmitter<{
        args: IgxAxisRangeChangedEventArgs;
        sender: any;
    }>
  • Occurs when the axis range changes.

    Returns EventEmitter<{
        args: IgxAxisRangeChangedEventArgs;
        sender: any;
    }>

  • get referenceValue(): number
  • Gets or sets the ReferenceValue property.

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

    this.yAxis.referenceValue = 30;
    
    <igx-data-chart
    [dataSource]="data">
    <igx-category-x-axis
    label="label"
    #xAxis>
    </igx-category-x-axis>
    <igx-numeric-y-axis
    referenceValue=30
    #yAxis>
    </igx-numeric-y-axis>
    <igx-column-series
    [xAxis]="xAxis"
    [yAxis]="yAxis"
    valueMemberPath="value">
    </igx-column-series>
    </igx-data-chart>

    Returns number

  • set referenceValue(v: number): void
  • Parameters

    • v: number

    Returns void

  • get renderRequested(): EventEmitter<{
        args: IgxRenderRequestedEventArgs;
        sender: any;
    }>
  • This event is raised every time a render has been requested from a series.

    Returns EventEmitter<{
        args: IgxRenderRequestedEventArgs;
        sender: any;
    }>

  • get scaleMode(): NumericScaleMode
  • Gets or sets the axis scale mode.

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

    <igx-data-chart
    [dataSource]="data">
    <igx-category-x-axis
    label="label"
    #xAxis>
    </igx-category-x-axis>
    <igx-numeric-y-axis
    #yAxis
    scaleMode="logarithmic">
    </igx-numeric-y-axis>
    <igx-line-series
    [xAxis]="xAxis"
    [yAxis]="yAxis"
    valueMemberPath="value">
    </igx-line-series>
    </igx-data-chart>
    this.yAxis.scaleMode = NumericScaleMode.Logarithmic;
    

    Returns NumericScaleMode

  • set scaleMode(v: NumericScaleMode): 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: boolean): 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: boolean): 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.

    <igx-data-chart
    [dataSource]="data" >
    <igx-category-x-axis
    label="label"
    strip= "grey"
    #xAxis>
    </igx-category-x-axis>
    <igx-numeric-y-axis
    #yAxis>
    </igx-numeric-y-axis>

    </igx-data-chart>

    Returns string

  • set strip(v: string): 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.

    <igx-data-chart
    [dataSource]="data" >
    <igx-category-x-axis
    label="label"
    stroke="blue"
    #xAxis>
    </igx-category-x-axis>
    <igx-numeric-y-axis
    #yAxis>
    </igx-numeric-y-axis>
    </igx-data-chart>

    Returns string

  • set stroke(v: string): void
  • Parameters

    • v: string

    Returns void

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

    Returns number[]

  • set strokeDashArray(v: number[]): void
  • Parameters

    • v: number[]

    Returns void

  • get strokeThickness(): number
  • Gets or sets the StrokeThickness property.

    Use StrokeThickness property for the thickness of the stroke.

    <igx-data-chart
    [dataSource]="data" >
    <igx-category-x-axis
    label="label"
    strokeThickness= 5
    #xAxis>
    </igx-category-x-axis>
    <igx-numeric-y-axis
    #yAxis>
    </igx-numeric-y-axis>

    </igx-data-chart>

    Returns number

  • set strokeThickness(v: number): 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.

    <igx-data-chart
    [dataSource]="data" >
    <igx-category-x-axis
    label="label"
    tickLength="5"
    #xAxis>
    </igx-category-x-axis>
    <igx-numeric-y-axis
    #yAxis>
    </igx-numeric-y-axis>

    </igx-data-chart>

    Returns number

  • set tickLength(v: number): void
  • Parameters

    • v: number

    Returns void

  • get tickStroke(): string
  • Gets or sets the TickStroke property.

    Use TickStroke property for the color of the tickmarks.

    <igx-data-chart
    [dataSource]="data" >
    <igx-category-x-axis
    label="label"
    tickStroke="black"
    #xAxis>
    </igx-category-x-axis>
    <igx-numeric-y-axis
    #yAxis>
    </igx-numeric-y-axis>
    </igx-data-chart>

    Returns string

  • set tickStroke(v: string): void
  • Parameters

    • v: string

    Returns void

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

    Returns number[]

  • set tickStrokeDashArray(v: number[]): void
  • Parameters

    • v: number[]

    Returns void

  • get tickStrokeThickness(): number
  • Gets or sets the TickStrokeThickness property.

    Use TickStrokeThickness property for thickness of the stroke tickmarks.

    <igx-data-chart
    [dataSource]="data" >
    <igx-category-x-axis
    label="label"
    tickStrokeThicknes="2"
    #xAxis>
    </igx-category-x-axis>
    <igx-numeric-y-axis
    #yAxis>
    </igx-numeric-y-axis>

    </igx-data-chart>

    Returns number

  • set tickStrokeThickness(v: number): 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.

    <igx-data-chart
    [dataSource]="data" >
    <igx-category-x-axis
    label="label"
    #xAxis>
    </igx-category-x-axis>
    <igx-numeric-y-axis
    #yAxis>
    </igx-numeric-y-axis>

    </igx-data-chart>

    Returns string

  • set title(v: string): 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.

    Returns number

  • set titleAngle(v: number): 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: number): 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.

    Returns number

  • set titleExtent(v: number): 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: HorizontalAlignment): void
  • Parameters

    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: number): 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: AxisLabelsLocation): void
  • Parameters

    Returns void

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

    Returns AxisTitlePosition

  • set titlePosition(v: AxisTitlePosition): 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: number): 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: boolean): 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.

    Returns string

  • set titleTextColor(v: string): 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.

    Returns string

  • set titleTextStyle(v: string): 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.

    Returns number

  • set titleTopMargin(v: number): 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: VerticalAlignment): void
  • Parameters

    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: Visibility): void
  • Parameters

    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: boolean): 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: boolean): void
  • Parameters

    • v: boolean

    Returns void

Methods

  • Parameters

    • item: any
    • memberPathName: string

    Returns any

  • Gets the label for a data item.

    Parameters

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

    Returns string

  • 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

  • Parameters

    • minimum: number
    • maximum: number

    Returns void

  • Unscales a value from screen space into axis space.

    Parameters

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

      Unscales a value from screen space into axis space.

      let dataValue: number = this.yAxis.unscaleValue(pixel);
      

    Returns number