Class IgxDataChartComponent

Represents a chart area containing axes, series, an optional legend and other hosted content.

Hierarchy

Implements

  • OnInit
  • AfterContentInit
  • OnDestroy

Constructors

Properties

Accessors

Methods

Constructors

constructor

  • new IgxDataChartComponent(_renderer: Renderer2, _elRef: ViewContainerRef, _ngZone: NgZone, _componentFactoryResolver: ComponentFactoryResolver, _injector: Injector): IgxDataChartComponent
  • Parameters

    • _renderer: Renderer2
    • _elRef: ViewContainerRef
    • _ngZone: NgZone
    • _componentFactoryResolver: ComponentFactoryResolver
    • _injector: Injector

    Returns IgxDataChartComponent

Properties

_dynamicContent

_dynamicContent: ViewContainerRef

actualAxes

actualAxes: IgxAxisComponent[] = []

The axes actually present in the chart. Do not directly modify this array. This array's contents can be modified by causing Angular to reproject the child content. Or adding and removing axes from the manual axes collection on the axes property.

actualSeries

actualSeries: IgxSeriesComponent[] = []

The series actually present in the chart. Do not directly modify this array. This array's contents can be modified by causing Angular to reproject the child content. Or adding and removing series from the manual series collection on the series property.

contentAxes

contentAxes: QueryList<IgxAxisComponent>

contentSeries

contentSeries: QueryList<IgxSeriesComponent>

Accessors

actualContentHitTestMode

  • Resolved method of hit testing used when the pointer is over elements in the chart.

    let actualContentHitTestMode: ChartHitTestMode  =this.chart.actualContentHitTestMode;

    Returns ChartHitTestMode

  • Resolved method of hit testing used when the pointer is over elements in the chart.

    let actualContentHitTestMode: ChartHitTestMode  =this.chart.actualContentHitTestMode;

    Parameters

    Returns void

actualInteractionPixelScalingRatio

  • get actualInteractionPixelScalingRatio(): number
  • set actualInteractionPixelScalingRatio(v: number): void
  • Resolved method of pixel scaling to use during end user interaction with the chart.

    let actualInteractionPixelScalingRatio: number = this.chart.actualInteractionPixelScalingRatio;

    Returns number

  • Resolved method of pixel scaling to use during end user interaction with the chart.

    let actualInteractionPixelScalingRatio: number = this.chart.actualInteractionPixelScalingRatio;

    Parameters

    • v: number

    Returns void

actualPixelScalingRatio

  • get actualPixelScalingRatio(): number
  • set actualPixelScalingRatio(v: number): void
  • Gets the resolved pixel scaling ratio.

    A higher scaling ratio will produce crisper visuals at the expense of memory. Lower values will cause the control to appear blurry

    let actualPixelScalingRatio: number = this.chart.actualPixelScalingRatio;

    Returns number

  • Gets the resolved pixel scaling ratio.

    A higher scaling ratio will produce crisper visuals at the expense of memory. Lower values will cause the control to appear blurry

    let actualPixelScalingRatio: number = this.chart.actualPixelScalingRatio;

    Parameters

    • v: number

    Returns void

actualWindowPositionHorizontal

  • get actualWindowPositionHorizontal(): number
  • set actualWindowPositionHorizontal(v: number): void
  • A number between 0 and 1 determining the position of the horizontal scroll. This property is effectively a shortcut to the Left of the ActualWindowRect property.

    let actualWindowPositionHorizontal: number = this.chart.actualWindowPositionHorizontal;

    Returns number

  • A number between 0 and 1 determining the position of the horizontal scroll. This property is effectively a shortcut to the Left of the ActualWindowRect property.

    let actualWindowPositionHorizontal: number = this.chart.actualWindowPositionHorizontal;

    Parameters

    • v: number

    Returns void

actualWindowPositionVertical

  • get actualWindowPositionVertical(): number
  • set actualWindowPositionVertical(v: number): void
  • A number between 0 and 1 determining the position of the vertical scroll. This property is effectively a shortcut to the Top of the ActualWindowRect property.

    let actualWindowPositionVertical: number = this.chart.actualWindowPositionVertical;
    ``

    Returns number

  • A number between 0 and 1 determining the position of the vertical scroll. This property is effectively a shortcut to the Top of the ActualWindowRect property.

    let actualWindowPositionVertical: number = this.chart.actualWindowPositionVertical;
    ``

    Parameters

    • v: number

    Returns void

actualWindowRect

  • get actualWindowRect(): IgRect
  • set actualWindowRect(v: IgRect): void
  • Gets the actual value of the window rectangle, which represents the current zoom level.

    let actualWindowRect: IgxRect = this.chart.actualWindowRect;
    ``

    Returns IgRect

  • Gets the actual value of the window rectangle, which represents the current zoom level.

    let actualWindowRect: IgxRect = this.chart.actualWindowRect;
    ``

    Parameters

    Returns void

actualWindowRectChanged

  • get actualWindowRectChanged(): EventEmitter<object>

actualWindowScaleHorizontal

  • get actualWindowScaleHorizontal(): number
  • set actualWindowScaleHorizontal(v: number): void
  • A number between 0 and 1 determining the scale of the horizontal zoom. This property is effectively a shortcut to the Width of the ActualWindowRect property.

    Returns number

  • A number between 0 and 1 determining the scale of the horizontal zoom. This property is effectively a shortcut to the Width of the ActualWindowRect property.

    Parameters

    • v: number

    Returns void

actualWindowScaleVertical

  • get actualWindowScaleVertical(): number
  • set actualWindowScaleVertical(v: number): void
  • A number between 0 and 1 determining the scale of the vertical zoom. This property is effectively a shortcut to the Height of the ActualWindowRect property.

    Returns number

  • A number between 0 and 1 determining the scale of the vertical zoom. This property is effectively a shortcut to the Height of the ActualWindowRect property.

    Parameters

    • v: number

    Returns void

alignsGridLinesToPixels

  • get alignsGridLinesToPixels(): boolean
  • set alignsGridLinesToPixels(v: boolean): void
  • Gets or sets a value indicating whether grid and tick lines are aligned to device pixels.

    Returns boolean

  • Gets or sets a value indicating whether grid and tick lines are aligned to device pixels.

    Parameters

    • v: boolean

    Returns void

animateSeriesWhenAxisRangeChanges

  • get animateSeriesWhenAxisRangeChanges(): boolean
  • set animateSeriesWhenAxisRangeChanges(v: boolean): void
  • Gets or sets whether the series animations should be allowed when a range change has been detected on an axis.

    animateSeriesWhenAxisRangeChanges is a Boolean property to override the default behavior in which series do not animate if an axis range changes.

    <igx-data-chart
        [dataSource]="data"
        animateSeriesWhenAxisRangeChanges=true>
        <igx-category-x-axis
            label="label"
            #xAxis>
        </igx-category-x-axis>
        <igx-numeric-y-axis
            #yAxis>
        </igx-numeric-y-axis>
        <igx-column-series
            [xAxis]="xAxis"
            [yAxis]="yAxis"
            valueMemberPath="value"
            transitionInMode="accordionFromBottom"
            isTransitionInEnabled=true
            transitionInSpeedType="indexScaled"
            transitionDuration=1000>
        </igx-column-series>
    </igx-data-chart>
    this.chart.animateSeriesWhenAxisRangeChanges = true;

    Returns boolean

  • Gets or sets whether the series animations should be allowed when a range change has been detected on an axis.

    animateSeriesWhenAxisRangeChanges is a Boolean property to override the default behavior in which series do not animate if an axis range changes.

    <igx-data-chart
        [dataSource]="data"
        animateSeriesWhenAxisRangeChanges=true>
        <igx-category-x-axis
            label="label"
            #xAxis>
        </igx-category-x-axis>
        <igx-numeric-y-axis
            #yAxis>
        </igx-numeric-y-axis>
        <igx-column-series
            [xAxis]="xAxis"
            [yAxis]="yAxis"
            valueMemberPath="value"
            transitionInMode="accordionFromBottom"
            isTransitionInEnabled=true
            transitionInSpeedType="indexScaled"
            transitionDuration=1000>
        </igx-column-series>
    </igx-data-chart>
    this.chart.animateSeriesWhenAxisRangeChanges = true;

    Parameters

    • v: boolean

    Returns void

autoMarginHeight

  • get autoMarginHeight(): number
  • set autoMarginHeight(v: number): void
  • Sets or gets the automatic height to add when automatically adding margins to the chart.

    <igx-data-chart
        [dataSource]="data"
        autoMarginHeight=50>
        <igx-category-x-axis
            label="label"
            #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>
     this.chart.autoMarginHeight = 50;

    Returns number

  • Sets or gets the automatic height to add when automatically adding margins to the chart.

    <igx-data-chart
        [dataSource]="data"
        autoMarginHeight=50>
        <igx-category-x-axis
            label="label"
            #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>
     this.chart.autoMarginHeight = 50;

    Parameters

    • v: number

    Returns void

autoMarginWidth

  • get autoMarginWidth(): number
  • set autoMarginWidth(v: number): void
  • Sets or gets the automatic width to add when automatically adding margins to the chart.

    The autoMarginWidth propertry is used find the automatic width to add when automatically adding margins to the chart.

    <igx-data-chart
        [dataSource]="data"
        autoMarginWidth=50>
        <igx-category-x-axis
            label="label"
            #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>
    this.chart.autoMarginWidth = 50;

    Returns number

  • Sets or gets the automatic width to add when automatically adding margins to the chart.

    The autoMarginWidth propertry is used find the automatic width to add when automatically adding margins to the chart.

    <igx-data-chart
        [dataSource]="data"
        autoMarginWidth=50>
        <igx-category-x-axis
            label="label"
            #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>
    this.chart.autoMarginWidth = 50;

    Parameters

    • v: number

    Returns void

axes

  • get axes(): AxisCollection
  • A collection or manually added axes for the chart.

    Returns AxisCollection

bottomMargin

  • get bottomMargin(): number
  • set bottomMargin(v: number): void
  • Sets or gets the bottom margin to use around the chart content.

    The bottomMargin property is used to gets/set the bottom margin around the chart content in the canvas.

    this.chart.bottomMargin = 50;
    <igx-data-chart
        [dataSource]="data"
        bottomMargin=50>
        <igx-category-x-axis
            label="label"
            #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

  • Sets or gets the bottom margin to use around the chart content.

    The bottomMargin property is used to gets/set the bottom margin around the chart content in the canvas.

    this.chart.bottomMargin = 50;
    <igx-data-chart
        [dataSource]="data"
        bottomMargin=50>
        <igx-category-x-axis
            label="label"
            #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

brushes

  • get brushes(): string[]
  • set brushes(v: string[]): void
  • Gets or sets the palette of brushes to use for coloring the chart series.

    brushes can be set declaratively to a list of color strings.

    <igx-data-chart [dataSource]="data"
        brushes="red,green,blue">
      <igx-category-x-axis #xAxis
        label="label">
      </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-column-series
        [xAxis]="xAxis"
        [yAxis]="yAxis"
        valueMemberPath="value">
      </igx-column-series>
    </igx-data-chart>

    Returns string[]

  • Gets or sets the palette of brushes to use for coloring the chart series.

    brushes can be set declaratively to a list of color strings.

    <igx-data-chart [dataSource]="data"
        brushes="red,green,blue">
      <igx-category-x-axis #xAxis
        label="label">
      </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-column-series
        [xAxis]="xAxis"
        [yAxis]="yAxis"
        valueMemberPath="value">
      </igx-column-series>
    </igx-data-chart>

    Parameters

    • v: string[]

    Returns void

chartTitle

  • get chartTitle(): string
  • set chartTitle(v: string): void
  • Text to display above the plot area.

    The chartTitle property is used to set the title to display for the component.

    <igx-data-chart
        [dataSource]="data"
        title="Items Sold">
        <igx-category-x-axis
            label="label"
            #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>
    this.chart.title="Items Sold";

    Returns string

  • Text to display above the plot area.

    The chartTitle property is used to set the title to display for the component.

    <igx-data-chart
        [dataSource]="data"
        title="Items Sold">
        <igx-category-x-axis
            label="label"
            #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>
    this.chart.title="Items Sold";

    Parameters

    • v: string

    Returns void

contentHitTestMode

  • Determines the method of hit testing used when mousing over elements in the chart.

    this.chart.contentHitTestMode = ChartHitTestMode.Computational;

    Returns ChartHitTestMode

  • Determines the method of hit testing used when mousing over elements in the chart.

    this.chart.contentHitTestMode = ChartHitTestMode.Computational;

    Parameters

    Returns void

contentViewport

  • get contentViewport(): IgRect
  • Represents the subset area within the viewport into which content should be mapped. This is the projection of the current EffectiveViewport into the viewport at current zoom level.

    let contentViewport: IgxRect = this.chart.contentViewport;

    Returns IgRect

crosshairPoint

  • Gets or sets the cross hair point (in world coordinates) Either or both of the crosshair point's X and Y may be set to double.NaN, in which case the relevant crosshair line is hidden.

    The crosshairPoint property is used to gets/sets the cross hair point (in world coordinates).

    <igx-data-chart
        [dataSource]="data"
        crosshairVisibility="visible"
        crosshairPoint={x:.8,y:.2}>
        <igx-category-x-axis
            label="label"
            #xAxis>
        </igx-category-x-axis>
        <igx-numeric-y-axis
            #yAxis>
        </igx-numeric-y-axis>
        <igx-line-series
            [xAxis]="xAxis"
            [yAxis]="yAxis"
            valueMemberPath="value">
        </igx-line-series>
    </igx-data-chart>
    this.chart.crosshairPoint = {x:.8,y:.2};

    Returns IgPoint

  • Gets or sets the cross hair point (in world coordinates) Either or both of the crosshair point's X and Y may be set to double.NaN, in which case the relevant crosshair line is hidden.

    The crosshairPoint property is used to gets/sets the cross hair point (in world coordinates).

    <igx-data-chart
        [dataSource]="data"
        crosshairVisibility="visible"
        crosshairPoint={x:.8,y:.2}>
        <igx-category-x-axis
            label="label"
            #xAxis>
        </igx-category-x-axis>
        <igx-numeric-y-axis
            #yAxis>
        </igx-numeric-y-axis>
        <igx-line-series
            [xAxis]="xAxis"
            [yAxis]="yAxis"
            valueMemberPath="value">
        </igx-line-series>
    </igx-data-chart>
    this.chart.crosshairPoint = {x:.8,y:.2};

    Parameters

    Returns void

crosshairVisibility

  • Gets or sets the current SeriesViewer's crosshair visibility override.

    The crosshairVisibility property is used to gets or sets the current Chart's crosshair visibility override. Note: setting this property does not affect the mobile browser version of the chart.

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

    Returns Visibility

  • Gets or sets the current SeriesViewer's crosshair visibility override.

    The crosshairVisibility property is used to gets or sets the current Chart's crosshair visibility override. Note: setting this property does not affect the mobile browser version of the chart.

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

    Parameters

    Returns void

dataSource

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

  • Parameters

    • value: any

    Returns void

defaultAxisMajorStroke

  • get defaultAxisMajorStroke(): string
  • set defaultAxisMajorStroke(v: string): void
  • Gets or sets the DefaultAxisMajorStroke property. The DefaultAxisMajorStroke property defines the brush which is used by the axes when no Axis.MajorStroke is set.

    Returns string

  • Gets or sets the DefaultAxisMajorStroke property. The DefaultAxisMajorStroke property defines the brush which is used by the axes when no Axis.MajorStroke is set.

    Parameters

    • v: string

    Returns void

defaultAxisMinorStroke

  • get defaultAxisMinorStroke(): string
  • set defaultAxisMinorStroke(v: string): void
  • Gets or sets the DefaultAxisMinorStroke property. The DefaultAxisMinorStroke property defines the brush which is used by the axes when no Axis.MinorStroke is set.

    Returns string

  • Gets or sets the DefaultAxisMinorStroke property. The DefaultAxisMinorStroke property defines the brush which is used by the axes when no Axis.MinorStroke is set.

    Parameters

    • v: string

    Returns void

defaultAxisStroke

  • get defaultAxisStroke(): string
  • set defaultAxisStroke(v: string): void
  • Gets or sets the DefaultAxisStroke property. The DefaultAxisStroke property defines the brush which is used by the axes when no Axis.Stroke is set.

    Returns string

  • Gets or sets the DefaultAxisStroke property. The DefaultAxisStroke property defines the brush which is used by the axes when no Axis.Stroke is set.

    Parameters

    • v: string

    Returns void

defaultInteraction

  • Gets or sets the DefaultInteraction property. The default interaction state defines the SeriesViewer's response to mouse events.

    The default interaction state defines the chart's response to mouse events.

    <igx-data-chart
        [dataSource]="data"
        isHorizontalZoomEnabled=true
        defaultInteraction="dragPan">
        <igx-category-x-axis
            label="label"
            #xAxis>
        </igx-category-x-axis>
        <igx-numeric-y-axis
            #yAxis>
        </igx-numeric-y-axis>
        <igx-line-series
            [xAxis]="xAxis"
            [yAxis]="yAxis"
            valueMemberPath="value">
        </igx-line-series>
    </igx-data-chart>
    this.chart.defaultInteraction = InteractionState.DragPan;

    Returns InteractionState

  • Gets or sets the DefaultInteraction property. The default interaction state defines the SeriesViewer's response to mouse events.

    The default interaction state defines the chart's response to mouse events.

    <igx-data-chart
        [dataSource]="data"
        isHorizontalZoomEnabled=true
        defaultInteraction="dragPan">
        <igx-category-x-axis
            label="label"
            #xAxis>
        </igx-category-x-axis>
        <igx-numeric-y-axis
            #yAxis>
        </igx-numeric-y-axis>
        <igx-line-series
            [xAxis]="xAxis"
            [yAxis]="yAxis"
            valueMemberPath="value">
        </igx-line-series>
    </igx-data-chart>
    this.chart.defaultInteraction = InteractionState.DragPan;

    Parameters

    Returns void

dragModifier

  • Gets or sets the current SeriesViewer's DragModifier property.

    dragModifier is useful to enable zooming when zooming is not the default interaction.

    <igx-data-chart
        [dataSource]="data"
        isHorizontalZoomEnabled=true
        defaultInteraction="dragPan"
        dragModifier="alt">
        <igx-category-x-axis
            label="label"
            #xAxis>
        </igx-category-x-axis>
        <igx-numeric-y-axis
            #yAxis>
        </igx-numeric-y-axis>
        <igx-line-series
            [xAxis]="xAxis"
            [yAxis]="yAxis"
            valueMemberPath="value">
        </igx-line-series>
    </igx-data-chart>
    this.chart.dragModifier = ModifierKeys.Alt;

    Returns ModifierKeys

  • Gets or sets the current SeriesViewer's DragModifier property.

    dragModifier is useful to enable zooming when zooming is not the default interaction.

    <igx-data-chart
        [dataSource]="data"
        isHorizontalZoomEnabled=true
        defaultInteraction="dragPan"
        dragModifier="alt">
        <igx-category-x-axis
            label="label"
            #xAxis>
        </igx-category-x-axis>
        <igx-numeric-y-axis
            #yAxis>
        </igx-numeric-y-axis>
        <igx-line-series
            [xAxis]="xAxis"
            [yAxis]="yAxis"
            valueMemberPath="value">
        </igx-line-series>
    </igx-data-chart>
    this.chart.dragModifier = ModifierKeys.Alt;

    Parameters

    Returns void

effectiveViewport

  • get effectiveViewport(): IgRect
  • set effectiveViewport(v: IgRect): void
  • Gets the EffectiveViewport rectangle, representing the effective viewport area after margins have been subtracted.

    ts let viewport: IgxRect = this.chart.effectiveViewport;

    Returns IgRect

  • Gets the EffectiveViewport rectangle, representing the effective viewport area after margins have been subtracted.

    ts let viewport: IgxRect = this.chart.effectiveViewport;

    Parameters

    Returns void

gridAreaRectChanged

  • get gridAreaRectChanged(): EventEmitter<object>
  • Occurs just after the current SeriesViewer's grid area rectangle is changed. The grid area may change as the result of the SeriesViewer being resized, or of an axis being added or changing size, possibly in another SeriesViewer.

    Returns EventEmitter<object>

gridMode

  • Gets or sets how grid lines are rendered in relation to series.

    Try setting the gridMode property to bring your grid lines in front of the data series.

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

    Returns GridMode

  • Gets or sets how grid lines are rendered in relation to series.

    Try setting the gridMode property to bring your grid lines in front of the data series.

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

    Parameters

    Returns void

height

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

  • Parameters

    • value: string

    Returns void

highlightingTransitionDuration

  • get highlightingTransitionDuration(): number
  • set highlightingTransitionDuration(v: number): void
  • Gets or sets the duration the highlighting/de-highlighting effects.

    The highlightingTransitionDuration property is used to set the time for highlighting transition in milliseconds .

    <igx-data-chart
        [dataSource]="data"
        HighlightingTransitionDuration=500 >
        <igx-category-x-axis
            label="label"
            #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>
    chart.HighlightingTransitionDuration=500;

    Returns number

  • Gets or sets the duration the highlighting/de-highlighting effects.

    The highlightingTransitionDuration property is used to set the time for highlighting transition in milliseconds .

    <igx-data-chart
        [dataSource]="data"
        HighlightingTransitionDuration=500 >
        <igx-category-x-axis
            label="label"
            #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>
    chart.HighlightingTransitionDuration=500;

    Parameters

    • v: number

    Returns void

interactionPixelScalingRatio

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

isAntiAliasingEnabledDuringInteraction

  • get isAntiAliasingEnabledDuringInteraction(): boolean
  • set isAntiAliasingEnabledDuringInteraction(v: boolean): void

isHorizontalZoomEnabled

  • get isHorizontalZoomEnabled(): boolean
  • set isHorizontalZoomEnabled(v: boolean): void
  • Gets or sets horizontal zoomability of the current control

    Set isHorizontalZoomEnabled to enable or disable horizontal zooming.

    <igx-data-chart [dataSource]="data"
        isHorizontalZoomEnabled="true">
      <igx-category-x-axis #xAxis
        label="label">
      </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 boolean

  • Gets or sets horizontal zoomability of the current control

    Set isHorizontalZoomEnabled to enable or disable horizontal zooming.

    <igx-data-chart [dataSource]="data"
        isHorizontalZoomEnabled="true">
      <igx-category-x-axis #xAxis
        label="label">
      </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: boolean

    Returns void

isMap

  • get isMap(): boolean
  • Indicates if this SeriesViewer is a map.

    Returns boolean

isPagePanningAllowed

  • get isPagePanningAllowed(): boolean
  • set isPagePanningAllowed(v: boolean): void
  • Gets or sets the whether the series viewer can allow the page to pan if a control pan is not possible in the requested direction.

    Returns boolean

  • Gets or sets the whether the series viewer can allow the page to pan if a control pan is not possible in the requested direction.

    Parameters

    • v: boolean

    Returns void

isSquare

  • get isSquare(): boolean
  • set isSquare(v: boolean): void
  • Gets or sets whether to use a square aspect ratio for the chart. This is locked to true for polar and radial charts.

    Set isSquare to true to constrain the chart to a square, using the minimum of its height and width.

    <igx-data-chart [dataSource]="data"
        isSquare="true"
        width="800px"
        height="400px">
      <igx-category-x-axis #xAxis
        label="label">
      </igx-category-x-axis>
      <igx-numeric-y-axis #yAxis
        majorStroke="green">
      </igx-numeric-y-axis>
    
      <igx-column-series
        [xAxis]="xAxis"
        [yAxis]="yAxis"
        valueMemberPath="value">
      </igx-column-series>
    </igx-data-chart>

    Returns boolean

  • Gets or sets whether to use a square aspect ratio for the chart. This is locked to true for polar and radial charts.

    Set isSquare to true to constrain the chart to a square, using the minimum of its height and width.

    <igx-data-chart [dataSource]="data"
        isSquare="true"
        width="800px"
        height="400px">
      <igx-category-x-axis #xAxis
        label="label">
      </igx-category-x-axis>
      <igx-numeric-y-axis #yAxis
        majorStroke="green">
      </igx-numeric-y-axis>
    
      <igx-column-series
        [xAxis]="xAxis"
        [yAxis]="yAxis"
        valueMemberPath="value">
      </igx-column-series>
    </igx-data-chart>

    Parameters

    • v: boolean

    Returns void

isSurfaceInteractionDisabled

  • get isSurfaceInteractionDisabled(): boolean
  • set isSurfaceInteractionDisabled(v: boolean): void
  • Gets or sets whether all surface interactions with the plot area should be disabled.

    The isSurfaceInteractionDisabled property is used to enable/disable interactions with the plot surface.

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

    Returns boolean

  • Gets or sets whether all surface interactions with the plot area should be disabled.

    The isSurfaceInteractionDisabled property is used to enable/disable interactions with the plot surface.

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

    Parameters

    • v: boolean

    Returns void

isVerticalZoomEnabled

  • get isVerticalZoomEnabled(): boolean
  • set isVerticalZoomEnabled(v: boolean): void
  • Gets or sets vertical zoomability of the current control

    Set isVerticalZoomEnabled to enable or disable vertical zooming.

    <igx-data-chart [dataSource]="data"
        isVerticalZoomEnabled="true">
      <igx-category-x-axis #xAxis
        label="label">
      </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 boolean

  • Gets or sets vertical zoomability of the current control

    Set isVerticalZoomEnabled to enable or disable vertical zooming.

    <igx-data-chart [dataSource]="data"
        isVerticalZoomEnabled="true">
      <igx-category-x-axis #xAxis
        label="label">
      </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: boolean

    Returns void

leftMargin

  • get leftMargin(): number
  • set leftMargin(v: number): void
  • Sets or gets the left margin to use around the chart content.

    The leftMargin property is used to set the left margin.

     <igx-data-chart
        [dataSource]="data"
        leftMargin=20
        rightMargin=20
        topMargin=30
        bottomMargin=20>
        <igx-category-x-axis
            label="label"
            #xAxis>
        </igx-category-x-axis>
        <igx-numeric-y-axis
            #yAxis>
        </igx-numeric-y-axis>
        <igx-line-series
            [xAxis]="xAxis"
            [yAxis]="yAxis"
            valueMemberPath="value">
        </igx-line-series>
    </igx-data-chart>
     this.chart.leftMargin = 20;

    Returns number

  • Sets or gets the left margin to use around the chart content.

    The leftMargin property is used to set the left margin.

     <igx-data-chart
        [dataSource]="data"
        leftMargin=20
        rightMargin=20
        topMargin=30
        bottomMargin=20>
        <igx-category-x-axis
            label="label"
            #xAxis>
        </igx-category-x-axis>
        <igx-numeric-y-axis
            #yAxis>
        </igx-numeric-y-axis>
        <igx-line-series
            [xAxis]="xAxis"
            [yAxis]="yAxis"
            valueMemberPath="value">
        </igx-line-series>
    </igx-data-chart>
     this.chart.leftMargin = 20;

    Parameters

    • v: number

    Returns void

legend

  • get legend(): any
  • set legend(v: any): void
  • Gets or sets the legend used for the current chart.

    Returns any

  • Gets or sets the legend used for the current chart.

    Parameters

    • v: any

    Returns void

markerBrushes

  • get markerBrushes(): string[]
  • set markerBrushes(v: string[]): void
  • Gets or sets the MarkerBrushes property. The brushes property defines the palette from which automatically assigned series brushes are selected.

    markerBrushes can be set declaratively to a list of color strings.

    <igx-data-chart [dataSource]="data"
        markerBrushes="red,green,blue">
      <igx-category-x-axis #xAxis
        label="label">
      </igx-category-x-axis>
      <igx-numeric-y-axis #yAxis>
      </igx-numeric-y-axis>
    
      <igx-column-series
        [xAxis]="xAxis"
        [yAxis]="yAxis"
        valueMemberPath="value"
        markerType="circle">
      </igx-column-series>
      <igx-column-series
        [xAxis]="xAxis"
        [yAxis]="yAxis"
        valueMemberPath="value"
        markerType="circle">
      </igx-column-series>
      <igx-column-series
        [xAxis]="xAxis"
        [yAxis]="yAxis"
        valueMemberPath="value"
        markerType="circle">
      </igx-column-series>
    </igx-data-chart>

    Returns string[]

  • Gets or sets the MarkerBrushes property. The brushes property defines the palette from which automatically assigned series brushes are selected.

    markerBrushes can be set declaratively to a list of color strings.

    <igx-data-chart [dataSource]="data"
        markerBrushes="red,green,blue">
      <igx-category-x-axis #xAxis
        label="label">
      </igx-category-x-axis>
      <igx-numeric-y-axis #yAxis>
      </igx-numeric-y-axis>
    
      <igx-column-series
        [xAxis]="xAxis"
        [yAxis]="yAxis"
        valueMemberPath="value"
        markerType="circle">
      </igx-column-series>
      <igx-column-series
        [xAxis]="xAxis"
        [yAxis]="yAxis"
        valueMemberPath="value"
        markerType="circle">
      </igx-column-series>
      <igx-column-series
        [xAxis]="xAxis"
        [yAxis]="yAxis"
        valueMemberPath="value"
        markerType="circle">
      </igx-column-series>
    </igx-data-chart>

    Parameters

    • v: string[]

    Returns void

markerOutlines

  • get markerOutlines(): string[]
  • set markerOutlines(v: string[]): void
  • Gets or sets the MarkerOutlines property. The brushes property defines the palette from which automatically assigned series brushes are selected.

    markerOutlines can be set declaratively to a list of color strings.

    <igx-data-chart [dataSource]="data"
        markerOutlines="red,green,blue">
      <igx-category-x-axis #xAxis
        label="label">
      </igx-category-x-axis>
      <igx-numeric-y-axis #yAxis>
      </igx-numeric-y-axis>
    
      <igx-column-series
        [xAxis]="xAxis"
        [yAxis]="yAxis"
        valueMemberPath="value"
        markerType="circle">
      </igx-column-series>
      <igx-column-series
        [xAxis]="xAxis"
        [yAxis]="yAxis"
        valueMemberPath="value"
        markerType="circle">
      </igx-column-series>
      <igx-column-series
        [xAxis]="xAxis"
        [yAxis]="yAxis"
        valueMemberPath="value"
        markerType="circle">
      </igx-column-series>
    </igx-data-chart>

    Returns string[]

  • Gets or sets the MarkerOutlines property. The brushes property defines the palette from which automatically assigned series brushes are selected.

    markerOutlines can be set declaratively to a list of color strings.

    <igx-data-chart [dataSource]="data"
        markerOutlines="red,green,blue">
      <igx-category-x-axis #xAxis
        label="label">
      </igx-category-x-axis>
      <igx-numeric-y-axis #yAxis>
      </igx-numeric-y-axis>
    
      <igx-column-series
        [xAxis]="xAxis"
        [yAxis]="yAxis"
        valueMemberPath="value"
        markerType="circle">
      </igx-column-series>
      <igx-column-series
        [xAxis]="xAxis"
        [yAxis]="yAxis"
        valueMemberPath="value"
        markerType="circle">
      </igx-column-series>
      <igx-column-series
        [xAxis]="xAxis"
        [yAxis]="yAxis"
        valueMemberPath="value"
        markerType="circle">
      </igx-column-series>
    </igx-data-chart>

    Parameters

    • v: string[]

    Returns void

outlines

  • get outlines(): string[]
  • set outlines(v: string[]): void
  • Gets or sets the palette of brushes to use for outlines on the chart series.

    outlines can be set declaratively to a list of color strings.

    <igx-data-chart [dataSource]="data"
        outlines="red,green,blue">
      <igx-category-x-axis #xAxis
        label="label">
      </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-column-series
        [xAxis]="xAxis"
        [yAxis]="yAxis"
        valueMemberPath="value">
      </igx-column-series>
    </igx-data-chart>

    Returns string[]

  • Gets or sets the palette of brushes to use for outlines on the chart series.

    outlines can be set declaratively to a list of color strings.

    <igx-data-chart [dataSource]="data"
        outlines="red,green,blue">
      <igx-category-x-axis #xAxis
        label="label">
      </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-column-series
        [xAxis]="xAxis"
        [yAxis]="yAxis"
        valueMemberPath="value">
      </igx-column-series>
    </igx-data-chart>

    Parameters

    • v: string[]

    Returns void

panModifier

  • Gets or sets the current SeriesViewer's PanModifier property.

    panModifier is useful to enable panning when panning is not the default interaction.

    <igx-data-chart
        [dataSource]="data"
        isHorizontalZoomEnabled=true
        defaultInteraction="dragZoom"
        panModifier="alt">
        <igx-category-x-axis
            label="label"
            #xAxis>
        </igx-category-x-axis>
        <igx-numeric-y-axis
            #yAxis>
        </igx-numeric-y-axis>
        <igx-line-series
            [xAxis]="xAxis"
            [yAxis]="yAxis"
            valueMemberPath="value">
        </igx-line-series>
    </igx-data-chart>
    this.chart.panModifier = ModifierKeys.Alt;

    Returns ModifierKeys

  • Gets or sets the current SeriesViewer's PanModifier property.

    panModifier is useful to enable panning when panning is not the default interaction.

    <igx-data-chart
        [dataSource]="data"
        isHorizontalZoomEnabled=true
        defaultInteraction="dragZoom"
        panModifier="alt">
        <igx-category-x-axis
            label="label"
            #xAxis>
        </igx-category-x-axis>
        <igx-numeric-y-axis
            #yAxis>
        </igx-numeric-y-axis>
        <igx-line-series
            [xAxis]="xAxis"
            [yAxis]="yAxis"
            valueMemberPath="value">
        </igx-line-series>
    </igx-data-chart>
    this.chart.panModifier = ModifierKeys.Alt;

    Parameters

    Returns void

pixelScalingRatio

  • get pixelScalingRatio(): number
  • set pixelScalingRatio(v: number): void
  • Gets or sets the scaling value used to affect the pixel density of the control. A higher scaling ratio will produce crisper visuals at the expense of memory. Lower values will cause the control to appear blurry.

    Returns number

  • Gets or sets the scaling value used to affect the pixel density of the control. A higher scaling ratio will produce crisper visuals at the expense of memory. Lower values will cause the control to appear blurry.

    Parameters

    • v: number

    Returns void

plotAreaBackground

  • get plotAreaBackground(): string
  • set plotAreaBackground(v: string): void
  • Gets or sets the brush used as the background for the current SeriesViewer object's plot area.

    plotAreaBackground property set the background brush to the current Chart object's plot area.

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

    Returns string

  • Gets or sets the brush used as the background for the current SeriesViewer object's plot area.

    plotAreaBackground property set the background brush to the current Chart object's plot area.

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

    Parameters

    • v: string

    Returns void

plotAreaMarginBottom

  • get plotAreaMarginBottom(): number
  • set plotAreaMarginBottom(v: number): void
  • Margin applied below the plot area.

    Returns number

  • Margin applied below the plot area.

    Parameters

    • v: number

    Returns void

plotAreaMarginLeft

  • get plotAreaMarginLeft(): number
  • set plotAreaMarginLeft(v: number): void
  • Margin applied to the left of the plot area.

    Returns number

  • Margin applied to the left of the plot area.

    Parameters

    • v: number

    Returns void

plotAreaMarginRight

  • get plotAreaMarginRight(): number
  • set plotAreaMarginRight(v: number): void
  • Margin applied to the right of the plot area.

    Returns number

  • Margin applied to the right of the plot area.

    Parameters

    • v: number

    Returns void

plotAreaMarginTop

  • get plotAreaMarginTop(): number
  • set plotAreaMarginTop(v: number): void
  • Margin applied above the plot area.

    Returns number

  • Margin applied above the plot area.

    Parameters

    • v: number

    Returns void

preferHigherResolutionTiles

  • get preferHigherResolutionTiles(): boolean
  • set preferHigherResolutionTiles(v: boolean): void
  • Gets or sets whether the series viewer should prefer selecting higher resolution tiles over lower resolution tiles when performing tile zooming. Setting this to true will lower performance but increase quality.

    Returns boolean

  • Gets or sets whether the series viewer should prefer selecting higher resolution tiles over lower resolution tiles when performing tile zooming. Setting this to true will lower performance but increase quality.

    Parameters

    • v: boolean

    Returns void

previewRect

  • get previewRect(): IgRect
  • set previewRect(v: IgRect): void
  • Gets or sets the preview rectangle. The preview rectangle may be set to Rect.Empty, in which case the visible preview strokePath is hidden.

    previewRect can be used to highlight an area of importance.

    this.chart.previewRect = {left:0,top:0,height:.5,width:.5};

    Returns IgRect

  • Gets or sets the preview rectangle. The preview rectangle may be set to Rect.Empty, in which case the visible preview strokePath is hidden.

    previewRect can be used to highlight an area of importance.

    this.chart.previewRect = {left:0,top:0,height:.5,width:.5};

    Parameters

    Returns void

rightButtonDefaultInteraction

rightMargin

  • get rightMargin(): number
  • set rightMargin(v: number): void
  • Sets or gets the right margin to use around the chart content.

    The rightMargin property is used to set the left margin around the chart content in the canvas.

     <igx-data-chart
        [dataSource]="data"
        leftMargin=20
        rightMargin=20
        topMargin=30
        bottomMargin=20>
        <igx-category-x-axis
            label="label"
            #xAxis>
        </igx-category-x-axis>
        <igx-numeric-y-axis
            #yAxis>
        </igx-numeric-y-axis>
        <igx-line-series
            [xAxis]="xAxis"
            [yAxis]="yAxis"
            valueMemberPath="value">
        </igx-line-series>
    </igx-data-chart>
    this.chart.rightMargin=20;

    Returns number

  • Sets or gets the right margin to use around the chart content.

    The rightMargin property is used to set the left margin around the chart content in the canvas.

     <igx-data-chart
        [dataSource]="data"
        leftMargin=20
        rightMargin=20
        topMargin=30
        bottomMargin=20>
        <igx-category-x-axis
            label="label"
            #xAxis>
        </igx-category-x-axis>
        <igx-numeric-y-axis
            #yAxis>
        </igx-numeric-y-axis>
        <igx-line-series
            [xAxis]="xAxis"
            [yAxis]="yAxis"
            valueMemberPath="value">
        </igx-line-series>
    </igx-data-chart>
    this.chart.rightMargin=20;

    Parameters

    • v: number

    Returns void

series

  • get series(): SeriesCollection
  • A collection or manually added series for the chart.

    Returns SeriesCollection

seriesCursorMouseMove

  • get seriesCursorMouseMove(): EventEmitter<object>
  • Occurs when the cursors are moved over a series in this SeriesViewer.

    Returns EventEmitter<object>

seriesMouseEnter

  • get seriesMouseEnter(): EventEmitter<object>
  • Occurs when the mouse pointer enters a Series.

    The SeriesMouseEnter event occurs when the left mouse pointer enters an element of this chart.

    <-- position: content member-->

    <igx-data-chart
        [dataSource]="data"
        (seriesMouseEnter)="onSeriesMouseEnter($event)">
        <igx-category-x-axis
            label="label"
            #xAxis>
        </igx-category-x-axis>
        <igx-numeric-y-axis
            #yAxis>
        </igx-numeric-y-axis>
        <igx-line-series
            [xAxis]="xAxis"
            [yAxis]="yAxis"
            valueMemberPath="value"
            thickness=5>
        </igx-line-series>
    </igx-data-chart>

    <-- position: content member-->

    public onSeriesMouseEnter(event: {sender: any, args: ChartMouseEventArgs})
    {
        var item = event.args.item;
    }

    Returns EventEmitter<object>

seriesMouseLeave

  • get seriesMouseLeave(): EventEmitter<object>
  • Occurs when the mouse pointer leaves a Series.

    The SeriesMouseLeave event occurs when the left mouse pointer leaves an element of this chart.

    <-- position: content member-->

    <igx-data-chart
        [dataSource]="data"
        (seriesMouseLeave)="onSeriesMouseLeave($event)">
        <igx-category-x-axis
            label="label"
            #xAxis>
        </igx-category-x-axis>
        <igx-numeric-y-axis
            #yAxis>
        </igx-numeric-y-axis>
        <igx-line-series
            [xAxis]="xAxis"
            [yAxis]="yAxis"
            valueMemberPath="value"
            thickness=5>
        </igx-line-series>
    </igx-data-chart>

    <-- position: content member-->

    public onSeriesMouseLeave(event: {sender: any, args: ChartMouseEventArgs})
    {
        var item = event.args.item;
    }

    Returns EventEmitter<object>

seriesMouseLeftButtonDown

  • get seriesMouseLeftButtonDown(): EventEmitter<object>
  • Occurs when the left mouse button is pressed while the mouse pointer is over a Series.

    The SeriesMouseLeftButtonDown event occurs when the left mouse button is pressed while the mouse pointer is over an element of this chart.

    <-- position: content member-->

    <igx-data-chart
        [dataSource]="data"
        (seriesMouseLeftButtonDown)="onSeriesMouseLeftButtonDown($event)">
        <igx-category-x-axis
            label="label"
            #xAxis>
        </igx-category-x-axis>
        <igx-numeric-y-axis
            #yAxis>
        </igx-numeric-y-axis>
        <igx-line-series
            [xAxis]="xAxis"
            [yAxis]="yAxis"
            valueMemberPath="value"
            thickness=5>
        </igx-line-series>
    </igx-data-chart>

    <-- position: content member-->

    public onSeriesMouseLeftButtonDown(event: {sender: any, args: DataChartMouseButtonEventArgs})
    {
        var item = event.args.item;
    }

    Returns EventEmitter<object>

seriesMouseLeftButtonUp

  • get seriesMouseLeftButtonUp(): EventEmitter<object>
  • Occurs when the left mouse button is released while the mouse pointer is over a Series.

    The SeriesMouseLeftButtonUp event occurs when the left mouse button is released while the mouse pointer is over an element of this chart.

    <-- position: content member-->

    <igx-data-chart
        [dataSource]="data"
        (seriesMouseLeftButtonUp)="onSeriesMouseLeftButtonUp($event)">
        <igx-category-x-axis
            label="label"
            #xAxis>
        </igx-category-x-axis>
        <igx-numeric-y-axis
            #yAxis>
        </igx-numeric-y-axis>
        <igx-line-series
            [xAxis]="xAxis"
            [yAxis]="yAxis"
            valueMemberPath="value"
            thickness=5>
        </igx-line-series>
    </igx-data-chart>

    <-- position: content member-->

    public onSeriesMouseLeftButtonUp(event: {sender: any, args: DataChartMouseButtonEventArgs})
    {
        var item = event.args.item;
    }

    Returns EventEmitter<object>

seriesMouseMove

  • get seriesMouseMove(): EventEmitter<object>
  • Occurs when the mouse pointer moves while over a Series.

    The SeriesMouseMove event occurs when the left mouse pointer moves while over an element of this chart.

    <-- position: content member-->

    <igx-data-chart
        [dataSource]="data"
        (seriesMouseMove)="onSeriesMouseMove($event)">
        <igx-category-x-axis
            label="label"
            #xAxis>
        </igx-category-x-axis>
        <igx-numeric-y-axis
            #yAxis>
        </igx-numeric-y-axis>
        <igx-line-series
            [xAxis]="xAxis"
            [yAxis]="yAxis"
            valueMemberPath="value"
            thickness=5>
        </igx-line-series>
    </igx-data-chart>

    <-- position: content member-->

    public onSeriesMouseMove(event: {sender: any, args: ChartMouseEventArgs})
    {
        var item = event.args.item;
    }

    Returns EventEmitter<object>

sizeChanged

  • get sizeChanged(): EventEmitter<object>
  • Occurs after the size of the series viewer changes.

    <-- position: content member-->

    <igx-data-chart
        [dataSource]="data"
        (sizeChanged)="onSizeChanged($event)">
        <igx-category-x-axis
            label="label"
            #xAxis>
        </igx-category-x-axis>
        <igx-numeric-y-axis
            #yAxis>
        </igx-numeric-y-axis>
        <igx-line-series
            [xAxis]="xAxis"
            [yAxis]="yAxis"
            valueMemberPath="value">
        </igx-line-series>
    </igx-data-chart>

    <-- position: content member-->

    public onSizeChanged(event: {sender: any, args: RectChangedEventArgs})
    {
        let newRect: IgxRect = event.args.newRect;
    }

    Returns EventEmitter<object>

subtitle

  • get subtitle(): string
  • set subtitle(v: string): void
  • Gets or sets the Subtitle property. The Title property defines the Subtitle of the chart

    The subtitle property is used to display subtitle for the component.

    <igx-data-chart
        [dataSource]="data"
        title="Items Sold"
        subtitle="Date of Sale: 1/1/2018">
        <igx-category-x-axis
            label="label"
            #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>
    this.chart.subtitle="Date of Sale: 1/1/2018";

    Returns string

  • Gets or sets the Subtitle property. The Title property defines the Subtitle of the chart

    The subtitle property is used to display subtitle for the component.

    <igx-data-chart
        [dataSource]="data"
        title="Items Sold"
        subtitle="Date of Sale: 1/1/2018">
        <igx-category-x-axis
            label="label"
            #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>
    this.chart.subtitle="Date of Sale: 1/1/2018";

    Parameters

    • v: string

    Returns void

subtitleBottomMargin

  • get subtitleBottomMargin(): number
  • set subtitleBottomMargin(v: number): void
  • Margin applied below the subtitle.

    The subtitleBottomMargin property is used to set the bottom margin for the subtitle.

    <igx-data-chart
        [dataSource]="data"
        title="Items Sold"
        subtitle="date of sale: 1/1/2018"
        subtitleLeftMarging=10
        subtitleTopMargin=10
        subtitleRightMargin=10
        subtitleBottomMargin=20>
        <igx-category-x-axis
            label="label"
            #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>
    this.chart.subtitleBottomMargin = 20;

    Returns number

  • Margin applied below the subtitle.

    The subtitleBottomMargin property is used to set the bottom margin for the subtitle.

    <igx-data-chart
        [dataSource]="data"
        title="Items Sold"
        subtitle="date of sale: 1/1/2018"
        subtitleLeftMarging=10
        subtitleTopMargin=10
        subtitleRightMargin=10
        subtitleBottomMargin=20>
        <igx-category-x-axis
            label="label"
            #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>
    this.chart.subtitleBottomMargin = 20;

    Parameters

    • v: number

    Returns void

subtitleHorizontalAlignment

  • Gets or sets the SubtitleHorizontalAlignment property.

    The subtitleBottomMargin property is used to set the horizontal alignment for the subtitle.

    <igx-data-chart
        [dataSource]="data"
        title="Items Sold"
        subtitle="Date of Sale: 1/1/2018"
        titleHorizontalAlignment="left"
        subtitleHorizontalAlignment="left">
        <igx-category-x-axis
            label="label"
            #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>
    this.chart.subtitleHorizontalAlignment="left";

    Returns HorizontalAlignment

  • Gets or sets the SubtitleHorizontalAlignment property.

    The subtitleBottomMargin property is used to set the horizontal alignment for the subtitle.

    <igx-data-chart
        [dataSource]="data"
        title="Items Sold"
        subtitle="Date of Sale: 1/1/2018"
        titleHorizontalAlignment="left"
        subtitleHorizontalAlignment="left">
        <igx-category-x-axis
            label="label"
            #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>
    this.chart.subtitleHorizontalAlignment="left";

    Parameters

    Returns void

subtitleLeftMargin

  • get subtitleLeftMargin(): number
  • set subtitleLeftMargin(v: number): void
  • Margin applied to the left of the subtitle.

    The subtitleLeftMarging property is used to set the left margin for the subtitle.

    <igx-data-chart
        [dataSource]="data"
        title="Items Sold"
        subtitle="date of sale: 1/1/2018"
        subtitleLeftMarging=10
        subtitleTopMargin=10
        subtitleRightMargin=10
        subtitleBottomMargin=20>
        <igx-category-x-axis
            label="label"
            #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>
    this.chart.subtitleLeftMarging=10;

    Returns number

  • Margin applied to the left of the subtitle.

    The subtitleLeftMarging property is used to set the left margin for the subtitle.

    <igx-data-chart
        [dataSource]="data"
        title="Items Sold"
        subtitle="date of sale: 1/1/2018"
        subtitleLeftMarging=10
        subtitleTopMargin=10
        subtitleRightMargin=10
        subtitleBottomMargin=20>
        <igx-category-x-axis
            label="label"
            #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>
    this.chart.subtitleLeftMarging=10;

    Parameters

    • v: number

    Returns void

subtitleRightMargin

  • get subtitleRightMargin(): number
  • set subtitleRightMargin(v: number): void
  • Margin applied to the right of the subtitle.

    The subTitleRightMargin property is used to set the right margin for the subtitle.

    <igx-data-chart
        [dataSource]="data"
        title="Items Sold"
        subtitle="date of sale: 1/1/2018"
        subtitleLeftMarging=10
        subtitleTopMargin=10
        subTitleRightMargin=10
        subtitleBottomMargin=20>
        <igx-category-x-axis
            label="label"
            #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>
    this.chart.subtitleLeftMarging=10;

    Returns number

  • Margin applied to the right of the subtitle.

    The subTitleRightMargin property is used to set the right margin for the subtitle.

    <igx-data-chart
        [dataSource]="data"
        title="Items Sold"
        subtitle="date of sale: 1/1/2018"
        subtitleLeftMarging=10
        subtitleTopMargin=10
        subTitleRightMargin=10
        subtitleBottomMargin=20>
        <igx-category-x-axis
            label="label"
            #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>
    this.chart.subtitleLeftMarging=10;

    Parameters

    • v: number

    Returns void

subtitleTextColor

  • get subtitleTextColor(): string
  • set subtitleTextColor(v: string): void
  • Gets or sets the Color used for the Subtitle Text.

    The subtitleTextColor property is used to set the color for the subtitle.

    <igx-data-chart
        [dataSource]="data"
        title="Items Sold"
        subtitle="Date of Sale: 1/1/2018"
        subtitleTextColor="blue">
        <igx-category-x-axis
            label="label"
            #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>
    this.chart.subtitleTextColor="blue";

    Returns string

  • Gets or sets the Color used for the Subtitle Text.

    The subtitleTextColor property is used to set the color for the subtitle.

    <igx-data-chart
        [dataSource]="data"
        title="Items Sold"
        subtitle="Date of Sale: 1/1/2018"
        subtitleTextColor="blue">
        <igx-category-x-axis
            label="label"
            #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>
    this.chart.subtitleTextColor="blue";

    Parameters

    • v: string

    Returns void

subtitleTextStyle

  • get subtitleTextStyle(): string
  • set subtitleTextStyle(v: string): void

subtitleTopMargin

  • get subtitleTopMargin(): number
  • set subtitleTopMargin(v: number): void
  • Margin applied above the subtitle.

    The subtitleTopMargin property is used to set the top margin for the subtitle.

    <igx-data-chart
        [dataSource]="data"
        title="Items Sold"
        subtitle="date of sale: 1/1/2018"
        subtitleLeftMarging=10
        subtitleTopMargin=10
        subtitleRightMargin=10
        subtitleBottomMargin=20>
        <igx-category-x-axis
            label="label"
            #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>
    this.chart.subtitleTopMargin =10;

    Returns number

  • Margin applied above the subtitle.

    The subtitleTopMargin property is used to set the top margin for the subtitle.

    <igx-data-chart
        [dataSource]="data"
        title="Items Sold"
        subtitle="date of sale: 1/1/2018"
        subtitleLeftMarging=10
        subtitleTopMargin=10
        subtitleRightMargin=10
        subtitleBottomMargin=20>
        <igx-category-x-axis
            label="label"
            #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>
    this.chart.subtitleTopMargin =10;

    Parameters

    • v: number

    Returns void

syncChannel

  • get syncChannel(): string
  • set syncChannel(v: string): void
  • Gets or sets the channel with which to synchronize.

    Synchronization is the coordination of zooming, panning and crosshairs events between multiple charts. Multiple chart controls can be synchronized horizontally (along X-Axis), vertically (along Y-Axis), or both. If you want to synchronize a set of charts, assign them the same name to the syncChannel and then specify whether or not synchronize chart horizontally and/or vertically.

    Returns string

  • Gets or sets the channel with which to synchronize.

    Synchronization is the coordination of zooming, panning and crosshairs events between multiple charts. Multiple chart controls can be synchronized horizontally (along X-Axis), vertically (along Y-Axis), or both. If you want to synchronize a set of charts, assign them the same name to the syncChannel and then specify whether or not synchronize chart horizontally and/or vertically.

    Parameters

    • v: string

    Returns void

synchronizeHorizontally

  • get synchronizeHorizontally(): boolean
  • set synchronizeHorizontally(v: boolean): void
  • Gets or sets the bool used to display the window preview shadow.

    Synchronization is the coordination of zooming, panning and crosshairs events between multiple charts. Multiple chart controls can be synchronized horizontally (along X-Axis), vertically (along Y-Axis), or both. If you want to synchronize a set of charts, assign them the same name to the syncChannel and then specify whether or not synchronize chart horizontally and/or vertically.

    Returns boolean

  • Gets or sets the bool used to display the window preview shadow.

    Synchronization is the coordination of zooming, panning and crosshairs events between multiple charts. Multiple chart controls can be synchronized horizontally (along X-Axis), vertically (along Y-Axis), or both. If you want to synchronize a set of charts, assign them the same name to the syncChannel and then specify whether or not synchronize chart horizontally and/or vertically.

    Parameters

    • v: boolean

    Returns void

synchronizeVertically

  • get synchronizeVertically(): boolean
  • set synchronizeVertically(v: boolean): void
  • Gets or sets the bool used to display the window preview shadow.

    Synchronization is the coordination of zooming, panning and crosshairs events between multiple charts. Multiple chart controls can be synchronized horizontally (along X-Axis), vertically (along Y-Axis), or both. If you want to synchronize a set of charts, assign them the same name to the syncChannel and then specify whether or not synchronize chart horizontally and/or vertically.

    Returns boolean

  • Gets or sets the bool used to display the window preview shadow.

    Synchronization is the coordination of zooming, panning and crosshairs events between multiple charts. Multiple chart controls can be synchronized horizontally (along X-Axis), vertically (along Y-Axis), or both. If you want to synchronize a set of charts, assign them the same name to the syncChannel and then specify whether or not synchronize chart horizontally and/or vertically.

    Parameters

    • v: boolean

    Returns void

titleBottomMargin

  • get titleBottomMargin(): number
  • set titleBottomMargin(v: number): void
  • Margin applied below the title.

    The titleBottomMargin property is used to set the bottom margin for the title.

    <igx-data-chart
        [dataSource]="data"
        title="Items Sold"
        titleLeftMarging=10
        titleTopMargin=10
        titleRightMargin=10
        titleBottomMargin=20>
        <igx-category-x-axis
            label="label"
            #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>
    this.chart.titleBottomMargin=20;

    Returns number

  • Margin applied below the title.

    The titleBottomMargin property is used to set the bottom margin for the title.

    <igx-data-chart
        [dataSource]="data"
        title="Items Sold"
        titleLeftMarging=10
        titleTopMargin=10
        titleRightMargin=10
        titleBottomMargin=20>
        <igx-category-x-axis
            label="label"
            #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>
    this.chart.titleBottomMargin=20;

    Parameters

    • v: number

    Returns void

titleHorizontalAlignment

  • Gets or sets the TitleHorizontalAlignment property.

    The subtitleHorizontalAlignment property is used to set horizontal alignment for the subtitle.

    <igx-data-chart
        [dataSource]="data"
        title="Items Sold"
        subtitle="date of sale: 1/1/2018"
        titleHorizontalAlignment="left"
        subtitleHorizontalAlignment="left">
        <igx-category-x-axis
            label="label"
            #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>
    this.chart.titleHorizontalAlignment="left";

    Returns HorizontalAlignment

  • Gets or sets the TitleHorizontalAlignment property.

    The subtitleHorizontalAlignment property is used to set horizontal alignment for the subtitle.

    <igx-data-chart
        [dataSource]="data"
        title="Items Sold"
        subtitle="date of sale: 1/1/2018"
        titleHorizontalAlignment="left"
        subtitleHorizontalAlignment="left">
        <igx-category-x-axis
            label="label"
            #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>
    this.chart.titleHorizontalAlignment="left";

    Parameters

    Returns void

titleLeftMargin

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

    The titleLeftMarging property is used to set the left margin for the title.

    <igx-data-chart
        [dataSource]="data"
        title="Items Sold"
        titleLeftMarging=10
        titleTopMargin=10
        titleRightMargin=10
        titleBottomMargin=20>
        <igx-category-x-axis
            label="label"
            #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>
    this.chart.titleLeftMarging=10;

    Returns number

  • Margin applied to the left of the title.

    The titleLeftMarging property is used to set the left margin for the title.

    <igx-data-chart
        [dataSource]="data"
        title="Items Sold"
        titleLeftMarging=10
        titleTopMargin=10
        titleRightMargin=10
        titleBottomMargin=20>
        <igx-category-x-axis
            label="label"
            #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>
    this.chart.titleLeftMarging=10;

    Parameters

    • v: number

    Returns void

titleRightMargin

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

    The titleRightMargin property is used to set the right margin for the title.

    <igx-data-chart
        [dataSource]="data"
        title="Items Sold"
        titleLeftMarging=10
        titleTopMargin=10
        titleRightMargin=10
        titleBottomMargin=20>
        <igx-category-x-axis
            label="label"
            #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>
    this.chart.titleRightMargin=10;

    Returns number

  • Margin applied to the right of the title.

    The titleRightMargin property is used to set the right margin for the title.

    <igx-data-chart
        [dataSource]="data"
        title="Items Sold"
        titleLeftMarging=10
        titleTopMargin=10
        titleRightMargin=10
        titleBottomMargin=20>
        <igx-category-x-axis
            label="label"
            #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>
    this.chart.titleRightMargin=10;

    Parameters

    • v: number

    Returns void

titleTextColor

  • get titleTextColor(): string
  • set titleTextColor(v: string): void
  • Gets or sets the Color used for the Title Text.

    The titleTextColor property is used to set the title brush.

    <igx-data-chart
        [dataSource]="data"
        title="Items Sold"
        subtitle="date of sale: 1/1/2018"
        titleTextColor="blue">
        <igx-category-x-axis
            label="label"
            #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>
    this.chart.titleTextColor="blue" ;

    Returns string

  • Gets or sets the Color used for the Title Text.

    The titleTextColor property is used to set the title brush.

    <igx-data-chart
        [dataSource]="data"
        title="Items Sold"
        subtitle="date of sale: 1/1/2018"
        titleTextColor="blue">
        <igx-category-x-axis
            label="label"
            #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>
    this.chart.titleTextColor="blue" ;

    Parameters

    • v: string

    Returns void

titleTextStyle

  • get titleTextStyle(): string
  • set titleTextStyle(v: string): void

titleTopMargin

  • get titleTopMargin(): number
  • set titleTopMargin(v: number): void
  • Margin applied above the title.

    The titleTopMargin property is used to set the top margin for the title.

    <igx-data-chart
        [dataSource]="data"
        title="Items Sold"
        titleLeftMarging=10
        titleTopMargin=10
        titleRightMargin=10
        titleBottomMargin=20>
        <igx-category-x-axis
            label="label"
            #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>
    this.chart.titleTopMargin=10;

    Returns number

  • Margin applied above the title.

    The titleTopMargin property is used to set the top margin for the title.

    <igx-data-chart
        [dataSource]="data"
        title="Items Sold"
        titleLeftMarging=10
        titleTopMargin=10
        titleRightMargin=10
        titleBottomMargin=20>
        <igx-category-x-axis
            label="label"
            #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>
    this.chart.titleTopMargin=10;

    Parameters

    • v: number

    Returns void

topMargin

  • get topMargin(): number
  • set topMargin(v: number): void
  • Sets or gets the top margin to use around the chart content.

    The topMargin property is used to set the top margin.

     <igx-data-chart
        [dataSource]="data"
        leftMargin=20
        rightMargin=20
        topMargin=30
        bottomMargin=20>
        <igx-category-x-axis
            label="label"
            #xAxis>
        </igx-category-x-axis>
        <igx-numeric-y-axis
            #yAxis>
        </igx-numeric-y-axis>
        <igx-line-series
            [xAxis]="xAxis"
            [yAxis]="yAxis"
            valueMemberPath="value">
        </igx-line-series>
    </igx-data-chart>
    this.chart.topMargin=30;

    Returns number

  • Sets or gets the top margin to use around the chart content.

    The topMargin property is used to set the top margin.

     <igx-data-chart
        [dataSource]="data"
        leftMargin=20
        rightMargin=20
        topMargin=30
        bottomMargin=20>
        <igx-category-x-axis
            label="label"
            #xAxis>
        </igx-category-x-axis>
        <igx-numeric-y-axis
            #yAxis>
        </igx-numeric-y-axis>
        <igx-line-series
            [xAxis]="xAxis"
            [yAxis]="yAxis"
            valueMemberPath="value">
        </igx-line-series>
    </igx-data-chart>
    this.chart.topMargin=30;

    Parameters

    • v: number

    Returns void

useTiledZooming

  • get useTiledZooming(): boolean
  • set useTiledZooming(v: boolean): void
  • Gets or sets whether the series viewer should use cached tiles during zooms rather than the default live content.

    Returns boolean

  • Gets or sets whether the series viewer should use cached tiles during zooms rather than the default live content.

    Parameters

    • v: boolean

    Returns void

viewportRect

  • Gets the viewport rectangle associated with the SeriesViewer, the physical dimensions of the plot area.

    let viewPortRect: IgxRect = this.chart.viewportRect;

    Returns IgRect

width

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

  • Parameters

    • value: string

    Returns void

windowPositionHorizontal

  • get windowPositionHorizontal(): number
  • set windowPositionHorizontal(v: number): void
  • A number between 0 and 1 determining the position of the horizontal scroll. This property is effectively a shortcut to the X position of the WindowRect property.

    this.chart.windowPositionHorizontal = .2;

    Returns number

  • A number between 0 and 1 determining the position of the horizontal scroll. This property is effectively a shortcut to the X position of the WindowRect property.

    this.chart.windowPositionHorizontal = .2;

    Parameters

    • v: number

    Returns void

windowPositionVertical

  • get windowPositionVertical(): number
  • set windowPositionVertical(v: number): void
  • A number between 0 and 1 determining the position of the vertical scroll. This property is effectively a shortcut to the Y position of the WindowRect property.

    this.chart.windowPositionVertical = .2;

    Returns number

  • A number between 0 and 1 determining the position of the vertical scroll. This property is effectively a shortcut to the Y position of the WindowRect property.

    this.chart.windowPositionVertical = .2;

    Parameters

    • v: number

    Returns void

windowRect

  • A rectangle representing the portion of the SeriesViewer currently in view. A rectangle at X=0, Y=0 with a Height and Width of 1 implies the entire plotting area is in view. A Height and Width of .5 would imply that the view is halfway zoomed in.

    You can set the windowRect to zoom in on an area of interest in the chart.

    this.chart.windowRect = {left:0, top:1, width: .5, height: .5};

    Returns IgRect

  • A rectangle representing the portion of the SeriesViewer currently in view. A rectangle at X=0, Y=0 with a Height and Width of 1 implies the entire plotting area is in view. A Height and Width of .5 would imply that the view is halfway zoomed in.

    You can set the windowRect to zoom in on an area of interest in the chart.

    this.chart.windowRect = {left:0, top:1, width: .5, height: .5};

    Parameters

    Returns void

windowRectChanged

  • get windowRectChanged(): EventEmitter<object>
  • Occurs just after the current SeriesViewer's window rectangle is changed.

    <-- position: content member-->

    <igx-data-chart
        [dataSource]="data"
        isHorizontalZoomEnabled=true
        (windowRectChanged)="onWindowRectChanged($event)">
        <igx-category-x-axis
            label="label"
            #xAxis>
        </igx-category-x-axis>
        <igx-numeric-y-axis
            #yAxis>
        </igx-numeric-y-axis>
        <igx-line-series
            [xAxis]="xAxis"
            [yAxis]="yAxis"
            valueMemberPath="value">
        </igx-line-series>
    </igx-data-chart>

    <-- position: content member-->

    public onWindowRectChanged(event: {sender: any, args: RectChangedEventArgs})
    {
        let newRect: IgxRect = event.args.newRect;
    }

    Returns EventEmitter<object>

windowRectMinWidth

  • get windowRectMinWidth(): number
  • set windowRectMinWidth(v: number): void
  • Sets or gets the minimum width that the window rect is allowed to reach before being clamped. Decrease this value if you want to allow for further zooming into the viewer. If this value is lowered too much it can cause graphical corruption due to floating point arithmetic inaccuracy.

    The windowRectMinWidth property is used to set or get the minimum width that the window rect is allowed to reach before being clamped.

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

    Returns number

  • Sets or gets the minimum width that the window rect is allowed to reach before being clamped. Decrease this value if you want to allow for further zooming into the viewer. If this value is lowered too much it can cause graphical corruption due to floating point arithmetic inaccuracy.

    The windowRectMinWidth property is used to set or get the minimum width that the window rect is allowed to reach before being clamped.

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

    Parameters

    • v: number

    Returns void

windowResponse

  • The response to user panning and zooming: whether to update the view immediately while the user action is happening, or to defer the update to after the user action is complete. The user action will be an action such as a mouse drag which causes panning and/or zooming to occur.

    The windowResponse property is used to set the response to user panning and zooming: whether to update the view immediately while the user action is happening, or to defer the update to after the user action is complete. The user action will be an action such as a mouse drag which causes panning and/or zooming to occur.

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

    Returns WindowResponse

  • The response to user panning and zooming: whether to update the view immediately while the user action is happening, or to defer the update to after the user action is complete. The user action will be an action such as a mouse drag which causes panning and/or zooming to occur.

    The windowResponse property is used to set the response to user panning and zooming: whether to update the view immediately while the user action is happening, or to defer the update to after the user action is complete. The user action will be an action such as a mouse drag which causes panning and/or zooming to occur.

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

    Parameters

    Returns void

windowScaleHorizontal

  • get windowScaleHorizontal(): number
  • set windowScaleHorizontal(v: number): void
  • A number between 0 and 1 determining the scale of the horizontal zoom. This property is effectively a shortcut to the Width of the WindowRect property.

    To programmatically change the horizontal zoom level, set windowScaleHorizontal to a value between 0 and 1.

    <igx-data-chart [dataSource]="data"
        windowScaleHorizontal="0.75">
      <igx-category-x-axis #xAxis
        label="label">
      </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

  • A number between 0 and 1 determining the scale of the horizontal zoom. This property is effectively a shortcut to the Width of the WindowRect property.

    To programmatically change the horizontal zoom level, set windowScaleHorizontal to a value between 0 and 1.

    <igx-data-chart [dataSource]="data"
        windowScaleHorizontal="0.75">
      <igx-category-x-axis #xAxis
        label="label">
      </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

windowScaleVertical

  • get windowScaleVertical(): number
  • set windowScaleVertical(v: number): void
  • A number between 0 and 1 determining the scale of the vertical zoom. This property is effectively a shortcut to the Height of the WindowRect property.

    To programmatically change the vertical zoom level, set windowScaleVertical to a value between 0 and 1.

    <igx-data-chart [dataSource]="data"
        windowScaleVertical="0.75">
      <igx-category-x-axis #xAxis
        label="label">
      </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

  • A number between 0 and 1 determining the scale of the vertical zoom. This property is effectively a shortcut to the Height of the WindowRect property.

    To programmatically change the vertical zoom level, set windowScaleVertical to a value between 0 and 1.

    <igx-data-chart [dataSource]="data"
        windowScaleVertical="0.75">
      <igx-category-x-axis #xAxis
        label="label">
      </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

zoomTileCacheSize

  • get zoomTileCacheSize(): number
  • set zoomTileCacheSize(v: number): void
  • Gets or sets the maximum number of zoom tiles that the series viewer should cache while in tiled zooming mode.

    Returns number

  • Gets or sets the maximum number of zoom tiles that the series viewer should cache while in tiled zooming mode.

    Parameters

    • v: number

    Returns void

Methods

attachSeries

bindData

  • bindData(): void
  • Returns void

clearTileZoomCache

  • clearTileZoomCache(): void
  • Clears the tile zoom tile cache so that new tiles will be generated. Only applies if the viewer is using a tile based zoom.

    Returns void

destroy

  • destroy(): void
  • Release any resources held by the control.

    Returns void

endTiledZoomingIfRunning

  • endTiledZoomingIfRunning(): void

exportSerializedVisualData

  • exportSerializedVisualData(): string
  • Export serialized visual data.

    Returns string

flush

  • flush(): void
  • Use to force the SeriesViewer to finish any deferred work before printing or evaluating its visual. This should only be called if the visual of the SeriesViewer needs to be synchronously saved or evaluated. Calling this method too often will hinder the performance of the SeriesViewer.

    this.chart.flush();

    Returns void

getActualWindowScaleHorizontal

  • getActualWindowScaleHorizontal(): number
  • Gets actual window scale for horizontal dimension of the control

    let actualWindowScaleHorizontal: number = chart.getActualWindowScaleHorizontal();

    Returns number

getActualWindowScaleVertical

  • getActualWindowScaleVertical(): number
  • Gets actual window scale for vertical dimension of the control

    let actualWindowScaleVertical: number = chart.getActualWindowScaleVertical();

    Returns number

hideToolTip

  • hideToolTip(): void
  • Hides the active main tooltip, if displayed.

    this.chart.hideToolTip();

    Returns void

ngAfterContentInit

  • ngAfterContentInit(): void
  • Returns void

ngOnDestroy

  • ngOnDestroy(): void
  • Returns void

ngOnInit

  • ngOnInit(): void

notifyClearItems

  • notifyClearItems(source_: any): void
  • Used to manually notify the SeriesViewer that the data source has reset or cleared its items. Invoking this method is only necessary if that datasource is not observable.

    Parameters

    • source_: any
      • The data source which was cleared or reset.
      this.chart.notifyClearItems(this.data);

    Returns void

notifyContainerResized

  • notifyContainerResized(): void

notifyInsertItem

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

notifyRemoveItem

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

notifySetItem

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

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

    Returns void

resetZoom

  • resetZoom(): void

startTiledZoomingIfNecessary

  • startTiledZoomingIfNecessary(): void

styleUpdated

  • styleUpdated(): void
  • Notifies the chart that the CSS styles in effect have been updated.

    Returns void

Static _createFromInternal