Class IgxOrdinalTimeXAxisComponent

Hierarchy

Implements

  • OnInit

Constructors

Accessors

Methods

Constructors

constructor

Accessors

actualInterval

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

    let effectiveInterval: number = xAxis.actualInterval;

    Returns number

  • Gets the effective value for the current Interval.

    let effectiveInterval: number = xAxis.actualInterval;

    Parameters

    • v: number

    Returns void

actualMajorStroke

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

    The actualMajorStroke property is used for ActualMajorStroke of the axis.

    Returns string

  • Gets or sets the ActualMajorStroke property.

    The actualMajorStroke property is used for ActualMajorStroke of the axis.

    Parameters

    • v: string

    Returns void

actualMinorInterval

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

    let effectiveMinorInterval: number = xAxis.actualMinorInterval;

    Returns number

  • Gets the effective value for the current MinorInterval.

    let effectiveMinorInterval: number = xAxis.actualMinorInterval;

    Parameters

    • v: number

    Returns void

actualMinorStroke

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

    The actualMinorStroke property is used for ActualMinorStroke of the axis.

    Returns string

  • Gets or sets the ActualMinorStroke property.

    The actualMinorStroke property is used for ActualMinorStroke of the axis.

    Parameters

    • v: string

    Returns void

actualStroke

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

    Returns string

  • Gets or sets the effective stroke used for the axis.

    Parameters

    • v: string

    Returns void

annotations

  • get annotations(): AxisAnnotationCollection
  • set annotations(v: AxisAnnotationCollection): void
  • Gets the current annotations for the axis.

    Returns AxisAnnotationCollection

  • Gets the current annotations for the axis.

    Parameters

    • v: AxisAnnotationCollection

    Returns void

axisInternal

  • get axisInternal(): Axis

coercionMethods

  • get coercionMethods(): any
  • set coercionMethods(v: any): void
  • 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

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

    Parameters

    • v: any

    Returns void

crossingAxis

  • Gets or sets the CrossingAxis property.

    The crossingAxis property is used for CrossingAxis 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 IgxAxisComponent

  • Gets or sets the CrossingAxis property.

    The crossingAxis property is used for CrossingAxis 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>

    Parameters

    Returns void

crossingValue

  • get crossingValue(): any
  • set crossingValue(v: any): void
  • 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

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

    Parameters

    • v: any

    Returns void

dataSource

  • get dataSource(): any
  • set dataSource(value: any): void

dateTimeMemberPath

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

    Returns string

  • Gets or sets the DateTime mapping property for the axis.

    Parameters

    • v: string

    Returns void

enhancedIntervalMinimumCharacters

  • get enhancedIntervalMinimumCharacters(): number
  • set enhancedIntervalMinimumCharacters(v: number): void
  • Gets or sets the mininum desired characters to be displayed for horizontal axes when using advanced label heuristics. -1 will attempt to adjust the interval to precisely fit the horizontal labels.

    The enhancedIntervalMinimumCharacters property is used to set the mininum desired characters to be displayed for horizontal axes when using advanced label heuristics.

    <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

  • Gets or sets the mininum desired characters to be displayed for horizontal axes when using advanced label heuristics. -1 will attempt to adjust the interval to precisely fit the horizontal labels.

    The enhancedIntervalMinimumCharacters property is used to set the mininum desired characters to be displayed for horizontal axes when using advanced label heuristics.

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

    Parameters

    • v: number

    Returns void

expectFunctions

  • get expectFunctions(): boolean
  • set expectFunctions(v: boolean): void
  • 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

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

    Parameters

    • v: boolean

    Returns void

formatLabel

  • get formatLabel(): function
  • set formatLabel(v: function): void
  • 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 function

      • (item: any): string
      • Parameters

        • item: any

        Returns 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

    • v: function
        • (item: any): string
        • Parameters

          • item: any

          Returns string

    Returns void

gap

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

    <igx-data-chart
        [dataSource]="data">
        <igx-category-x-axis
            label="label"
            gap="0.75"
            #xAxis>
        </igx-category-x-axis>
        <igx-numeric-y-axis
            #yAxis>
        </igx-numeric-y-axis>
        <igx-column-series
            [xAxis]="xAxis"
            [yAxis]="yAxis"
            valueMemberPath="value">
        </igx-column-series>
    </igx-data-chart>

    Returns 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:

    <igx-data-chart
        [dataSource]="data">
        <igx-category-x-axis
            label="label"
            gap="0.75"
            #xAxis>
        </igx-category-x-axis>
        <igx-numeric-y-axis
            #yAxis>
        </igx-numeric-y-axis>
        <igx-column-series
            [xAxis]="xAxis"
            [yAxis]="yAxis"
            valueMemberPath="value">
        </igx-column-series>
    </igx-data-chart>

    Parameters

    • v: number

    Returns void

interval

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

    <igx-data-chart [dataSource]="data">
      <igx-category-x-axis #xAxis
        label="label"
        interval="3">
      </igx-category-x-axis>
      <igx-numeric-y-axis #yAxis>
      </igx-numeric-y-axis>
    
      <igx-column-series
        [xAxis]="xAxis"
        [yAxis]="yAxis"
        valueMemberPath="value">
      </igx-column-series>
    </igx-data-chart>
    let series = new IgxColumnSeriesComponent();
    series.xAxis = this.xAxis;
    xAxis.interval="3";
    series.yAxis = this.yAxis;
    
    series.valueMemberPath="value";
    this.chart.series.add(series);

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

    <igx-data-chart [dataSource]="data">
      <igx-category-x-axis #xAxis
        label="label"
        interval="3">
      </igx-category-x-axis>
      <igx-numeric-y-axis #yAxis>
      </igx-numeric-y-axis>
    
      <igx-column-series
        [xAxis]="xAxis"
        [yAxis]="yAxis"
        valueMemberPath="value">
      </igx-column-series>
    </igx-data-chart>
    let series = new IgxColumnSeriesComponent();
    series.xAxis = this.xAxis;
    xAxis.interval="3";
    series.yAxis = this.yAxis;
    
    series.valueMemberPath="value";
    this.chart.series.add(series);

    Parameters

    • v: number

    Returns void

isAngular

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

    Returns boolean

isCategory

  • get isCategory(): boolean

isCategoryDateTime

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

    Returns boolean

isContinuous

  • get isContinuous(): boolean

isDateTime

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

    Returns boolean

isDisabled

  • get isDisabled(): boolean
  • set isDisabled(v: boolean): void
  • 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

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

    Parameters

    • v: boolean

    Returns void

isInverted

  • get isInverted(): boolean
  • set isInverted(v: boolean): void
  • 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

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

    Parameters

    • v: boolean

    Returns void

isNumeric

  • 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

isRadial

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

    Returns boolean

isSorting

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

    Returns boolean

isVertical

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

    Returns boolean

itemsCount

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

    Returns number

  • Gets the number of items in the current category axis items source.

    Parameters

    • v: number

    Returns void

label

  • get label(): any
  • set label(v: any): void
  • Gets or sets the axis label format string.

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

    Returns any

  • Gets or sets the axis label format string.

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

    Parameters

    • v: any

    Returns void

labelAngle

  • get labelAngle(): number
  • set labelAngle(v: number): void
  • Gets or sets the angle of the {0}.

    The Angle property is used to set the angle of the axis.

    Returns number

  • Gets or sets the angle of the {0}.

    The Angle property is used to set the angle of the axis.

    Parameters

    • v: number

    Returns void

labelBottomMargin

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

    The labelBottomMargin is used for the bottom margin of the labels.

    Returns number

  • Margin applied below the {0}.

    The labelBottomMargin is used for the bottom margin of the labels.

    Parameters

    • v: number

    Returns void

labelExtent

  • get labelExtent(): number
  • set labelExtent(v: number): void
  • Distance between the axis and the edge of the control.

    The Extent property is used for the extent.

    Returns number

  • Distance between the axis and the edge of the control.

    The Extent property is used for the extent.

    Parameters

    • v: number

    Returns void

labelFormats

  • get labelFormats(): TimeAxisLabelFormatCollection
  • set labelFormats(v: TimeAxisLabelFormatCollection): void
  • 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);
    <igx-data-chart
        [dataSource]="data">
        <igx-ordinal-time-x-axis
            [labelFormats]="labelFormats"
            dateTimeMemberPath="time"
            #xAxis>
        </igx-ordinal-time-x-axis>
    </igx-data-chart>

    Returns TimeAxisLabelFormatCollection

  • 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);
    <igx-data-chart
        [dataSource]="data">
        <igx-ordinal-time-x-axis
            [labelFormats]="labelFormats"
            dateTimeMemberPath="time"
            #xAxis>
        </igx-ordinal-time-x-axis>
    </igx-data-chart>

    Parameters

    • v: TimeAxisLabelFormatCollection

    Returns void

labelHorizontalAlignment

labelLeftMargin

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

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

    Returns number

  • Margin applied to the left of the {0}.

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

    Parameters

    • v: number

    Returns void

labelLocation

labelRightMargin

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

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

    Returns number

  • Margin applied to the right of the {0}.

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

    Parameters

    • v: number

    Returns void

labelShowFirstLabel

  • get labelShowFirstLabel(): boolean
  • set labelShowFirstLabel(v: boolean): void
  • 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

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

    Parameters

    • v: boolean

    Returns void

labelTextColor

  • get labelTextColor(): string
  • set labelTextColor(v: string): void
  • The color of the {0}.

    The labelTextColor property Overrides the color of the text used for the axis labels.

    Returns string

  • The color of the {0}.

    The labelTextColor property Overrides the color of the text used for the axis labels.

    Parameters

    • v: string

    Returns void

labelTextStyle

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

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

    Parameters

    • v: string

    Returns void

labelTopMargin

  • get labelTopMargin(): number
  • set labelTopMargin(v: number): void
  • Margin applied above the {0}.

    The labelTopMargin property is used for the top margin of the labels.

    Returns number

  • Margin applied above the {0}.

    The labelTopMargin property is used for the top margin of the labels.

    Parameters

    • v: number

    Returns void

labelVerticalAlignment

labelVisibility

  • Gets or sets the visibility of the {0}.

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

    Returns Visibility

  • Gets or sets the visibility of the {0}.

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

    Parameters

    Returns void

majorStroke

  • get majorStroke(): string
  • set majorStroke(v: string): void
  • 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

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

    Parameters

    • v: string

    Returns void

majorStrokeThickness

  • get majorStrokeThickness(): number
  • set majorStrokeThickness(v: number): void
  • 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

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

    Parameters

    • v: number

    Returns void

maximumValue

  • get maximumValue(): Date
  • set maximumValue(v: Date): void
  • 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

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

    Parameters

    • v: Date

    Returns void

minimumValue

  • get minimumValue(): Date
  • set minimumValue(v: Date): void
  • 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

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

    Parameters

    • v: Date

    Returns void

minorInterval

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

    <igx-data-chart [dataSource]="data">
      <igx-category-x-axis #xAxis
        label="label"
        minorInterval="0.1"
        minorStroke="green"
        minorStrokeThickness="1">
      </igx-category-x-axis>
      <igx-numeric-y-axis #yAxis>
      </igx-numeric-y-axis>
      <igx-column-series
        [xAxis]="xAxis"
        [yAxis]="yAxis"
        valueMemberPath="value">
      </igx-column-series>
    </igx-data-chart>
    let series = new IgxColumnSeriesComponent();
    series.xAxis = this.xAxis;
    xAxis.minorInterval="0.1";
    series.yAxis = this.yAxis;
    series.valueMemberPath="value";
    this.chart.series.add(series);

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

    <igx-data-chart [dataSource]="data">
      <igx-category-x-axis #xAxis
        label="label"
        minorInterval="0.1"
        minorStroke="green"
        minorStrokeThickness="1">
      </igx-category-x-axis>
      <igx-numeric-y-axis #yAxis>
      </igx-numeric-y-axis>
      <igx-column-series
        [xAxis]="xAxis"
        [yAxis]="yAxis"
        valueMemberPath="value">
      </igx-column-series>
    </igx-data-chart>
    let series = new IgxColumnSeriesComponent();
    series.xAxis = this.xAxis;
    xAxis.minorInterval="0.1";
    series.yAxis = this.yAxis;
    series.valueMemberPath="value";
    this.chart.series.add(series);

    Parameters

    • v: number

    Returns void

minorStroke

  • get minorStroke(): string
  • set minorStroke(v: string): void
  • 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

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

    Parameters

    • v: string

    Returns void

minorStrokeThickness

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

name

  • get name(): string
  • set name(value: string): void
  • Returns string

  • Parameters

    • value: string

    Returns void

overlap

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

    <igx-data-chart
        [dataSource]="data">
    
        <igx-category-x-axis
            label="label"
            overlap="0.75"
            #xAxis>
        </igx-category-x-axis>
        <igx-numeric-y-axis
            #yAxis>
        </igx-numeric-y-axis>
    
        <igx-column-series
            [xAxis]="xAxis"
            [yAxis]="yAxis"
            valueMemberPath="value">
        </igx-column-series>
        <igx-column-series
            [xAxis]="xAxis"
            [yAxis]="yAxis"
            valueMemberPath="value">
          </igx-column-series>
    </igx-data-chart>

    Returns 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:

    <igx-data-chart
        [dataSource]="data">
    
        <igx-category-x-axis
            label="label"
            overlap="0.75"
            #xAxis>
        </igx-category-x-axis>
        <igx-numeric-y-axis
            #yAxis>
        </igx-numeric-y-axis>
    
        <igx-column-series
            [xAxis]="xAxis"
            [yAxis]="yAxis"
            valueMemberPath="value">
        </igx-column-series>
        <igx-column-series
            [xAxis]="xAxis"
            [yAxis]="yAxis"
            valueMemberPath="value">
          </igx-column-series>
    </igx-data-chart>

    Parameters

    • v: number

    Returns void

rangeChanged

  • get rangeChanged(): EventEmitter<object>
  • Occurs when the axis range changes.

    Returns EventEmitter<object>

renderRequested

  • get renderRequested(): EventEmitter<object>
  • This event is raised every time a render has been requested from a series.

    Returns EventEmitter<object>

strip

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

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

    Parameters

    • v: string

    Returns void

stroke

  • get stroke(): string
  • set stroke(v: string): void
  • 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

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

    Parameters

    • v: string

    Returns void

strokeThickness

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

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

    Parameters

    • v: number

    Returns void

tickLength

  • get tickLength(): number
  • set tickLength(v: number): void
  • 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

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

    Parameters

    • v: number

    Returns void

tickStroke

  • get tickStroke(): string
  • set tickStroke(v: string): void
  • 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

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

    Parameters

    • v: string

    Returns void

tickStrokeThickness

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

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

    Parameters

    • v: number

    Returns void

title

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

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

    Parameters

    • v: string

    Returns void

titleAngle

  • get titleAngle(): number
  • set titleAngle(v: number): void
  • Gets or sets the angle of the {0}.

    The Angle property is used to set the angle of the axis.

    Returns number

  • Gets or sets the angle of the {0}.

    The Angle property is used to set the angle of the axis.

    Parameters

    • v: number

    Returns void

titleBottomMargin

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

    The labelBottomMargin is used for the bottom margin of the labels.

    Returns number

  • Margin applied below the {0}.

    The labelBottomMargin is used for the bottom margin of the labels.

    Parameters

    • v: number

    Returns void

titleExtent

  • get titleExtent(): number
  • set titleExtent(v: number): void
  • Distance between the axis and the edge of the control.

    The Extent property is used for the extent.

    Returns number

  • Distance between the axis and the edge of the control.

    The Extent property is used for the extent.

    Parameters

    • v: number

    Returns void

titleHorizontalAlignment

titleLeftMargin

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

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

    Returns number

  • Margin applied to the left of the {0}.

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

    Parameters

    • v: number

    Returns void

titleLocation

titlePosition

titleRightMargin

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

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

    Returns number

  • Margin applied to the right of the {0}.

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

    Parameters

    • v: number

    Returns void

titleShowFirstLabel

  • get titleShowFirstLabel(): boolean
  • set titleShowFirstLabel(v: boolean): void
  • 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

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

    Parameters

    • v: boolean

    Returns void

titleTextColor

  • get titleTextColor(): string
  • set titleTextColor(v: string): void
  • The color of the {0}.

    The labelTextColor property Overrides the color of the text used for the axis labels.

    Returns string

  • The color of the {0}.

    The labelTextColor property Overrides the color of the text used for the axis labels.

    Parameters

    • v: string

    Returns void

titleTextStyle

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

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

    Parameters

    • v: string

    Returns void

titleTopMargin

  • get titleTopMargin(): number
  • set titleTopMargin(v: number): void
  • Margin applied above the {0}.

    The labelTopMargin property is used for the top margin of the labels.

    Returns number

  • Margin applied above the {0}.

    The labelTopMargin property is used for the top margin of the labels.

    Parameters

    • v: number

    Returns void

titleVerticalAlignment

titleVisibility

  • Gets or sets the visibility of the {0}.

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

    Returns Visibility

  • Gets or sets the visibility of the {0}.

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

    Parameters

    Returns void

useClusteringMode

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

    <igx-data-chart
        [dataSource]="financialData">
        <igx-category-x-axis
        label="time"
        useClusteringMode="true"
        #xAxis>
        </igx-category-x-axis>
        <igx-numeric-y-axis
        #yAxis>
        </igx-numeric-y-axis>
    
        <igx-column-series
        [xAxis]="xAxis"
        [yAxis]="yAxis"
        valueMemberPath="value">
        </igx-column-series>
        <igx-financial-price-series
        [xAxis]="xAxis"
        [yAxis]="yAxis"
        openMemberPath="open"
        highMemberPath="high"
        lowMemberPath="low"
        closeMemberPath="close"
        volumeMemberPath="volume">
        </igx-financial-price-series>
    </igx-data-chart>

    Returns 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:

    <igx-data-chart
        [dataSource]="financialData">
        <igx-category-x-axis
        label="time"
        useClusteringMode="true"
        #xAxis>
        </igx-category-x-axis>
        <igx-numeric-y-axis
        #yAxis>
        </igx-numeric-y-axis>
    
        <igx-column-series
        [xAxis]="xAxis"
        [yAxis]="yAxis"
        valueMemberPath="value">
        </igx-column-series>
        <igx-financial-price-series
        [xAxis]="xAxis"
        [yAxis]="yAxis"
        openMemberPath="open"
        highMemberPath="high"
        lowMemberPath="low"
        closeMemberPath="close"
        volumeMemberPath="volume">
        </igx-financial-price-series>
    </igx-data-chart>

    Parameters

    • v: boolean

    Returns void

useEnhancedIntervalManagement

  • get useEnhancedIntervalManagement(): boolean
  • set useEnhancedIntervalManagement(v: boolean): void
  • 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

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

    Parameters

    • v: boolean

    Returns void

Methods

ensureLabelSettings

  • ensureLabelSettings(): void

ensureTitleSettings

  • ensureTitleSettings(): void

getCategoryBoundingBox

  • getCategoryBoundingBox(point: IgPoint, useInterpolation: boolean, singularWidth: number): IgRect

getCategoryBoundingBoxHelper

  • getCategoryBoundingBoxHelper(point: IgPoint, useInterpolation: boolean, singularWidth: number, isVertical: boolean): IgRect

getItemValue

  • getItemValue(item: any, memberPathName: string): any
  • Parameters

    • item: any
    • memberPathName: string

    Returns any

getValueLabel

  • getValueLabel(value: number): string
  • Parameters

    • value: number

    Returns string

ngOnInit

  • ngOnInit(): void

notifyClearItems

  • notifyClearItems(): void
  • Used to manually notify the axis that the data source has reset or cleared its items.

    Returns void

notifyInsertItem

  • notifyInsertItem(index: number, newItem: any): void

notifyRemoveItem

  • notifyRemoveItem(index: number, oldItem: any): void

notifySetItem

  • notifySetItem(index: number, oldItem: any, newItem: any): void

provideData

  • provideData(data: any[]): void

renderAxis

  • renderAxis(): void
  • Renders the axis with no animation.

    Returns void

resetCachedEnhancedInterval

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

scaleValue

  • scaleValue(unscaledValue: number): number
  • Scales a value from axis space into screen space.

    Parameters

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

    Returns number

scrollIntoView

  • scrollIntoView(item: any): void
  • Scrolls the specified item into view.

    Parameters

    • item: any
      • Data item to scroll into view

    Returns void

scrollRangeIntoView

  • scrollRangeIntoView(minimum: number, maximum: number): void

unscaleValue

  • unscaleValue(unscaledValue: number): number
  • 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

Static _createFromInternal