IgxSeriesViewerComponent

Represents a control for viewing series objects.

Constructors

new IgxSeriesViewerComponent(): IgxSeriesViewerComponent

Returns IgxSeriesViewerComponent

Properties

ngAcceptInputType_actualContentHitTestMode

ngAcceptInputType_actualContentHitTestMode: string | ChartHitTestMode

ngAcceptInputType_actualInteractionPixelScalingRatio

ngAcceptInputType_actualInteractionPixelScalingRatio: string | number

ngAcceptInputType_actualPixelScalingRatio

ngAcceptInputType_actualPixelScalingRatio: string | number

ngAcceptInputType_actualWindowPositionHorizontal

ngAcceptInputType_actualWindowPositionHorizontal: string | number

ngAcceptInputType_actualWindowPositionVertical

ngAcceptInputType_actualWindowPositionVertical: string | number

ngAcceptInputType_actualWindowRect

ngAcceptInputType_actualWindowRect: any

ngAcceptInputType_actualWindowRectMinHeight

ngAcceptInputType_actualWindowRectMinHeight: string | number

ngAcceptInputType_actualWindowRectMinWidth

ngAcceptInputType_actualWindowRectMinWidth: string | number

ngAcceptInputType_animateSeriesWhenAxisRangeChanges

ngAcceptInputType_animateSeriesWhenAxisRangeChanges: string | boolean

ngAcceptInputType_autoMarginHeight

ngAcceptInputType_autoMarginHeight: string | number

ngAcceptInputType_autoMarginWidth

ngAcceptInputType_autoMarginWidth: string | number

ngAcceptInputType_bottomMargin

ngAcceptInputType_bottomMargin: string | number

ngAcceptInputType_brushes

ngAcceptInputType_brushes: string | string[]

ngAcceptInputType_contentHitTestMode

ngAcceptInputType_contentHitTestMode: string | ChartHitTestMode

ngAcceptInputType_contentViewport

ngAcceptInputType_contentViewport: any

ngAcceptInputType_crosshairPoint

ngAcceptInputType_crosshairPoint: any

ngAcceptInputType_crosshairVisibility

ngAcceptInputType_crosshairVisibility: any

ngAcceptInputType_defaultInteraction

ngAcceptInputType_defaultInteraction: any

ngAcceptInputType_dragModifier

ngAcceptInputType_dragModifier: any

ngAcceptInputType_effectiveViewport

ngAcceptInputType_effectiveViewport: any

ngAcceptInputType_fireMouseLeaveOnManipulationStart

ngAcceptInputType_fireMouseLeaveOnManipulationStart: string | boolean

ngAcceptInputType_focusDismissDelayMilliseconds

ngAcceptInputType_focusDismissDelayMilliseconds: string | number

ngAcceptInputType_focusedSeriesItems

ngAcceptInputType_focusedSeriesItems: string | IgxChartSelectedItemCollection

ngAcceptInputType_focusMode

ngAcceptInputType_focusMode: string | SeriesSelectionMode

ngAcceptInputType_focusTransitionDuration

ngAcceptInputType_focusTransitionDuration: string | number

ngAcceptInputType_fullSeries

ngAcceptInputType_fullSeries: string | IgxSeriesCollection

ngAcceptInputType_highlightedValuesDisplayMode

ngAcceptInputType_highlightedValuesDisplayMode: any

ngAcceptInputType_highlightingBehavior

ngAcceptInputType_highlightingBehavior: string | SeriesHighlightingBehavior

ngAcceptInputType_highlightingDismissDelayMilliseconds

ngAcceptInputType_highlightingDismissDelayMilliseconds: string | number

ngAcceptInputType_highlightingFadeOpacity

ngAcceptInputType_highlightingFadeOpacity: string | number

ngAcceptInputType_highlightingMode

ngAcceptInputType_highlightingMode: string | SeriesHighlightingMode

ngAcceptInputType_highlightingTransitionDuration

ngAcceptInputType_highlightingTransitionDuration: string | number

ngAcceptInputType_horizontalViewScrollbarCornerRadius

ngAcceptInputType_horizontalViewScrollbarCornerRadius: string | number

ngAcceptInputType_horizontalViewScrollbarHeight

ngAcceptInputType_horizontalViewScrollbarHeight: string | number

ngAcceptInputType_horizontalViewScrollbarInset

ngAcceptInputType_horizontalViewScrollbarInset: string | number

ngAcceptInputType_horizontalViewScrollbarMaxOpacity

ngAcceptInputType_horizontalViewScrollbarMaxOpacity: string | number

ngAcceptInputType_horizontalViewScrollbarMode

ngAcceptInputType_horizontalViewScrollbarMode: string | SeriesViewerScrollbarMode

ngAcceptInputType_horizontalViewScrollbarPosition

ngAcceptInputType_horizontalViewScrollbarPosition: string | SeriesViewerHorizontalScrollbarPosition

ngAcceptInputType_horizontalViewScrollbarShouldAddAutoTrackInsets

ngAcceptInputType_horizontalViewScrollbarShouldAddAutoTrackInsets: string | boolean

ngAcceptInputType_horizontalViewScrollbarStrokeThickness

ngAcceptInputType_horizontalViewScrollbarStrokeThickness: string | number

ngAcceptInputType_horizontalViewScrollbarTrackEndInset

ngAcceptInputType_horizontalViewScrollbarTrackEndInset: string | number

ngAcceptInputType_horizontalViewScrollbarTrackStartInset

ngAcceptInputType_horizontalViewScrollbarTrackStartInset: string | number

ngAcceptInputType_interactionOverride

ngAcceptInputType_interactionOverride: any

ngAcceptInputType_interactionPixelScalingRatio

ngAcceptInputType_interactionPixelScalingRatio: string | number

ngAcceptInputType_isAntiAliasingEnabledDuringInteraction

ngAcceptInputType_isAntiAliasingEnabledDuringInteraction: string | boolean

ngAcceptInputType_isDetached

ngAcceptInputType_isDetached: string | boolean

ngAcceptInputType_isInCreateAnnotationMode

ngAcceptInputType_isInCreateAnnotationMode: string | boolean

ngAcceptInputType_isInDeleteAnnotationMode

ngAcceptInputType_isInDeleteAnnotationMode: string | boolean

ngAcceptInputType_isMap

ngAcceptInputType_isMap: string | boolean

ngAcceptInputType_isPagePanningAllowed

ngAcceptInputType_isPagePanningAllowed: string | boolean

ngAcceptInputType_isSurfaceInteractionDisabled

ngAcceptInputType_isSurfaceInteractionDisabled: string | boolean

ngAcceptInputType_isUserAnnotationsEnabled

ngAcceptInputType_isUserAnnotationsEnabled: string | boolean

ngAcceptInputType_isWindowSyncedToVisibleRange

ngAcceptInputType_isWindowSyncedToVisibleRange: string | boolean

ngAcceptInputType_leftMargin

ngAcceptInputType_leftMargin: string | number

ngAcceptInputType_legendHighlightingMode

ngAcceptInputType_legendHighlightingMode: string | LegendHighlightingMode

ngAcceptInputType_legendItemBadgeMode

ngAcceptInputType_legendItemBadgeMode: any

ngAcceptInputType_legendItemBadgeShape

ngAcceptInputType_legendItemBadgeShape: any

ngAcceptInputType_markerAutomaticBehavior

ngAcceptInputType_markerAutomaticBehavior: string | MarkerAutomaticBehavior

ngAcceptInputType_markerBrushes

ngAcceptInputType_markerBrushes: string | string[]

ngAcceptInputType_markerOutlines

ngAcceptInputType_markerOutlines: string | string[]

ngAcceptInputType_outlines

ngAcceptInputType_outlines: string | string[]

ngAcceptInputType_panModifier

ngAcceptInputType_panModifier: any

ngAcceptInputType_pixelScalingRatio

ngAcceptInputType_pixelScalingRatio: string | number

ngAcceptInputType_preferHigherResolutionTiles

ngAcceptInputType_preferHigherResolutionTiles: string | boolean

ngAcceptInputType_previewPathOpacity

ngAcceptInputType_previewPathOpacity: string | number

ngAcceptInputType_previewRect

ngAcceptInputType_previewRect: any

ngAcceptInputType_resizeIdleMilliseconds

ngAcceptInputType_resizeIdleMilliseconds: string | number

ngAcceptInputType_rightButtonDefaultInteraction

ngAcceptInputType_rightButtonDefaultInteraction: any

ngAcceptInputType_rightMargin

ngAcceptInputType_rightMargin: string | number

ngAcceptInputType_scrollbarsAnimationDuration

ngAcceptInputType_scrollbarsAnimationDuration: string | number

ngAcceptInputType_selectedSeriesItems

ngAcceptInputType_selectedSeriesItems: string | IgxChartSelectedItemCollection

ngAcceptInputType_selectionBehavior

ngAcceptInputType_selectionBehavior: string | SeriesSelectionBehavior

ngAcceptInputType_selectionDismissDelayMilliseconds

ngAcceptInputType_selectionDismissDelayMilliseconds: string | number

ngAcceptInputType_selectionMode

ngAcceptInputType_selectionMode: string | SeriesSelectionMode

ngAcceptInputType_selectionModifier

ngAcceptInputType_selectionModifier: any

ngAcceptInputType_selectionTransitionDuration

ngAcceptInputType_selectionTransitionDuration: string | number

ngAcceptInputType_seriesValueLayerUseLegend

ngAcceptInputType_seriesValueLayerUseLegend: string | boolean

ngAcceptInputType_shouldMatchZOrderToSeriesOrder

ngAcceptInputType_shouldMatchZOrderToSeriesOrder: string | boolean

ngAcceptInputType_shouldPanOnMaximumZoom

ngAcceptInputType_shouldPanOnMaximumZoom: string | boolean

ngAcceptInputType_shouldSimulateHoverMoveCrosshairPoint

ngAcceptInputType_shouldSimulateHoverMoveCrosshairPoint: string | boolean

ngAcceptInputType_subtitleBottomMargin

ngAcceptInputType_subtitleBottomMargin: string | number

ngAcceptInputType_subtitleHorizontalAlignment

ngAcceptInputType_subtitleHorizontalAlignment: any

ngAcceptInputType_subtitleLeftMargin

ngAcceptInputType_subtitleLeftMargin: string | number

ngAcceptInputType_subtitleRightMargin

ngAcceptInputType_subtitleRightMargin: string | number

ngAcceptInputType_subtitleTopMargin

ngAcceptInputType_subtitleTopMargin: string | number

ngAcceptInputType_titleBottomMargin

ngAcceptInputType_titleBottomMargin: string | number

ngAcceptInputType_titleHorizontalAlignment

ngAcceptInputType_titleHorizontalAlignment: any

ngAcceptInputType_titleLeftMargin

ngAcceptInputType_titleLeftMargin: string | number

ngAcceptInputType_titleRightMargin

ngAcceptInputType_titleRightMargin: string | number

ngAcceptInputType_titleTopMargin

ngAcceptInputType_titleTopMargin: string | number

ngAcceptInputType_topMargin

ngAcceptInputType_topMargin: string | number

ngAcceptInputType_useTiledZooming

ngAcceptInputType_useTiledZooming: string | boolean

ngAcceptInputType_verticalViewScrollbarCornerRadius

ngAcceptInputType_verticalViewScrollbarCornerRadius: string | number

ngAcceptInputType_verticalViewScrollbarInset

ngAcceptInputType_verticalViewScrollbarInset: string | number

ngAcceptInputType_verticalViewScrollbarMaxOpacity

ngAcceptInputType_verticalViewScrollbarMaxOpacity: string | number

ngAcceptInputType_verticalViewScrollbarMode

ngAcceptInputType_verticalViewScrollbarMode: string | SeriesViewerScrollbarMode

ngAcceptInputType_verticalViewScrollbarPosition

ngAcceptInputType_verticalViewScrollbarPosition: string | SeriesViewerVerticalScrollbarPosition

ngAcceptInputType_verticalViewScrollbarShouldAddAutoTrackInsets

ngAcceptInputType_verticalViewScrollbarShouldAddAutoTrackInsets: string | boolean

ngAcceptInputType_verticalViewScrollbarStrokeThickness

ngAcceptInputType_verticalViewScrollbarStrokeThickness: string | number

ngAcceptInputType_verticalViewScrollbarTrackEndInset

ngAcceptInputType_verticalViewScrollbarTrackEndInset: string | number

ngAcceptInputType_verticalViewScrollbarTrackStartInset

ngAcceptInputType_verticalViewScrollbarTrackStartInset: string | number

ngAcceptInputType_verticalViewScrollbarWidth

ngAcceptInputType_verticalViewScrollbarWidth: string | number

ngAcceptInputType_viewportRect

ngAcceptInputType_viewportRect: any

ngAcceptInputType_windowPositionHorizontal

ngAcceptInputType_windowPositionHorizontal: string | number

ngAcceptInputType_windowPositionVertical

ngAcceptInputType_windowPositionVertical: string | number

ngAcceptInputType_windowRect

ngAcceptInputType_windowRect: any

ngAcceptInputType_windowRectMinHeight

ngAcceptInputType_windowRectMinHeight: string | number

ngAcceptInputType_windowRectMinWidth

ngAcceptInputType_windowRectMinWidth: string | number

ngAcceptInputType_windowResponse

ngAcceptInputType_windowResponse: string | WindowResponse

ngAcceptInputType_windowSizeMinHeight

ngAcceptInputType_windowSizeMinHeight: string | number

ngAcceptInputType_windowSizeMinWidth

ngAcceptInputType_windowSizeMinWidth: string | number

ngAcceptInputType_zoomCoercionMode

ngAcceptInputType_zoomCoercionMode: string | ZoomCoercionMode

ngAcceptInputType_zoomTileCacheSize

ngAcceptInputType_zoomTileCacheSize: string | number

ɵcmp

ɵcmp: ɵɵComponentDeclaration<IgxSeriesViewerComponent, "ng-component", never, object, object, never, never, true, never>

ɵfac

ɵfac: ɵɵFactoryDeclaration<IgxSeriesViewerComponent, never>

Accessors

actualContentHitTestMode

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

let actualContentHitTestMode: ChartHitTestMode  =this.chart.actualContentHitTestMode;

get actualContentHitTestMode(): ChartHitTestMode

Returns ChartHitTestMode

set actualContentHitTestMode(v: ChartHitTestMode): void

Parameters

v: ChartHitTestMode

Returns void

actualInteractionPixelScalingRatio

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

let actualInteractionPixelScalingRatio: number = this.chart.actualInteractionPixelScalingRatio;

get actualInteractionPixelScalingRatio(): number

Returns number

set actualInteractionPixelScalingRatio(v: number): void

Parameters

v: number

Returns void

actualPixelScalingRatio

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;

get actualPixelScalingRatio(): number

Returns number

set actualPixelScalingRatio(v: number): void

Parameters

v: number

Returns void

actualWindowPositionHorizontal

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;

get actualWindowPositionHorizontal(): number

Returns number

set actualWindowPositionHorizontal(v: number): void

Parameters

v: number

Returns void

actualWindowPositionVertical

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

get actualWindowPositionVertical(): number

Returns number

set actualWindowPositionVertical(v: number): void

Parameters

v: number

Returns void

actualWindowRect

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

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

get actualWindowRect(): IgRect

Returns IgRect

set actualWindowRect(v: IgRect): void

Parameters

v: IgRect

Returns void

actualWindowRectChanged

Raised when the actual window rectangle of the SeriesViewer changes.

get actualWindowRectChanged(): EventEmitter<object>

Returns EventEmitter<object>

actualWindowRectMinHeight

Gets the actual minimum height that the window rect is allowed to reach before being clamped.

get actualWindowRectMinHeight(): number

Returns number

set actualWindowRectMinHeight(v: number): void

Parameters

v: number

Returns void

actualWindowRectMinWidth

Gets the actual minimum width that the window rect is allowed to reach before being clamped.

get actualWindowRectMinWidth(): number

Returns number

set actualWindowRectMinWidth(v: number): void

Parameters

v: number

Returns void

animateSeriesWhenAxisRangeChanges

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;

get animateSeriesWhenAxisRangeChanges(): boolean

Returns boolean

set animateSeriesWhenAxisRangeChanges(v: boolean): void

Parameters

v: boolean

Returns void

autoMarginHeight

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;

get autoMarginHeight(): number

Returns number

set autoMarginHeight(v: number): void

Parameters

v: number

Returns void

autoMarginWidth

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;

get autoMarginWidth(): number

Returns number

set autoMarginWidth(v: number): void

Parameters

v: number

Returns void

axisLabelMouseClick

get axisLabelMouseClick(): EventEmitter<object>

Returns EventEmitter<object>

axisLabelMouseDown

get axisLabelMouseDown(): EventEmitter<object>

Returns EventEmitter<object>

axisLabelMouseEnter

get axisLabelMouseEnter(): EventEmitter<object>

Returns EventEmitter<object>

axisLabelMouseLeave

get axisLabelMouseLeave(): EventEmitter<object>

Returns EventEmitter<object>

axisLabelMouseOver

get axisLabelMouseOver(): EventEmitter<object>

Returns EventEmitter<object>

axisLabelMouseUp

get axisLabelMouseUp(): EventEmitter<object>

Returns EventEmitter<object>

axisPanelMouseClick

get axisPanelMouseClick(): EventEmitter<object>

Returns EventEmitter<object>

axisPanelMouseDown

get axisPanelMouseDown(): EventEmitter<object>

Returns EventEmitter<object>

axisPanelMouseEnter

get axisPanelMouseEnter(): EventEmitter<object>

Returns EventEmitter<object>

axisPanelMouseLeave

get axisPanelMouseLeave(): EventEmitter<object>

Returns EventEmitter<object>

axisPanelMouseOver

get axisPanelMouseOver(): EventEmitter<object>

Returns EventEmitter<object>

axisPanelMouseUp

get axisPanelMouseUp(): EventEmitter<object>

Returns EventEmitter<object>

bottomMargin

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>

get bottomMargin(): number

Returns number

set bottomMargin(v: number): void

Parameters

v: number

Returns void

brushes

Gets or sets the palette of brushes used for fill of plotted series. These brushes are automatically assigned to series based on the index of series.

get brushes(): string[]

Returns string[]

set brushes(v: string[]): void

Parameters

v: string[]

Returns void

chartTitle

Text to display above the plot area.

The Title 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";

get chartTitle(): string

Returns string

set chartTitle(v: string): void

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;

get contentHitTestMode(): ChartHitTestMode

Returns ChartHitTestMode

set contentHitTestMode(v: ChartHitTestMode): void

Parameters

v: ChartHitTestMode

Returns void

contentViewport

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;

get contentViewport(): IgRect

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

get crosshairPoint(): IgPoint

Returns IgPoint

set crosshairPoint(v: IgPoint): void

Parameters

v: IgPoint

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;

get crosshairVisibility(): Visibility

Returns Visibility

set crosshairVisibility(v: Visibility): void

Parameters

v: Visibility

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;

get defaultInteraction(): InteractionState

Returns InteractionState

set defaultInteraction(v: InteractionState): void

Parameters

v: InteractionState

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;

get dragModifier(): ModifierKeys

Returns ModifierKeys

set dragModifier(v: ModifierKeys): void

Parameters

v: ModifierKeys

Returns void

effectiveViewport

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

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

get effectiveViewport(): IgRect

Returns IgRect

set effectiveViewport(v: IgRect): void

Parameters

v: IgRect

Returns void

fireMouseLeaveOnManipulationStart

Gets or sets how the mouse leave event fires when a manipulation is started.

get fireMouseLeaveOnManipulationStart(): boolean

Returns boolean

set fireMouseLeaveOnManipulationStart(v: boolean): void

Parameters

v: boolean

Returns void

focusBrush

Gets or sets the Focus brush to use for the series.

get focusBrush(): string

Returns string

set focusBrush(v: string): void

Parameters

v: string

Returns void

focusDismissDelayMilliseconds

Gets or sets the amount of time to delay before dismissing a selection effect.

get focusDismissDelayMilliseconds(): number

Returns number

set focusDismissDelayMilliseconds(v: number): void

Parameters

v: number

Returns void

focusedSeriesItems

Gets the currently focused data items. Adding or removing data items from this collection will focus or blur the visuals associated with those items.

get focusedSeriesItems(): IgxChartSelectedItemCollection

Returns IgxChartSelectedItemCollection

set focusedSeriesItems(v: IgxChartSelectedItemCollection): void

Parameters

v: IgxChartSelectedItemCollection

Returns void

focusedSeriesItemsChanged

Raised when the SelectedItems collection has changed.

get focusedSeriesItemsChanged(): EventEmitter<object>

Returns EventEmitter<object>

focusMode

Gets or sets the focus mode to use for the series in the component, when supported.

get focusMode(): SeriesSelectionMode

Returns SeriesSelectionMode

set focusMode(v: SeriesSelectionMode): void

Parameters

v: SeriesSelectionMode

Returns void

focusTransitionDuration

Gets or sets the duration the Focus/de-Focus effects.

get focusTransitionDuration(): number

Returns number

set focusTransitionDuration(v: number): void

Parameters

v: number

Returns void

fullSeries

get fullSeries(): IgxSeriesCollection

Returns IgxSeriesCollection

set fullSeries(v: IgxSeriesCollection): void

Parameters

v: IgxSeriesCollection

Returns void

gridAreaRectChanged

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.

get gridAreaRectChanged(): EventEmitter<object>

Returns EventEmitter<object>

highlightedValuesDisplayMode

Gets or sets whether and how to display highlighted values for the series by default. Note, this is distinct from the highlighting feature that indicates what is closest or under the mouse.

get highlightedValuesDisplayMode(): SeriesHighlightedValuesDisplayMode

Returns SeriesHighlightedValuesDisplayMode

set highlightedValuesDisplayMode(v: SeriesHighlightedValuesDisplayMode): void

Parameters

v: SeriesHighlightedValuesDisplayMode

Returns void

highlightingBehavior

Gets or sets the highlighting Behavior to use for the series in the component, when supported. This takes precedence over the series level IsHighlightingEnabled.

get highlightingBehavior(): SeriesHighlightingBehavior

Returns SeriesHighlightingBehavior

set highlightingBehavior(v: SeriesHighlightingBehavior): void

Parameters

v: SeriesHighlightingBehavior

Returns void

highlightingDismissDelayMilliseconds

Gets or sets the amount of time to delay before dismissing a selection effect.

get highlightingDismissDelayMilliseconds(): number

Returns number

set highlightingDismissDelayMilliseconds(v: number): void

Parameters

v: number

Returns void

highlightingFadeOpacity

Gets or sets the target opacity to fade to for fade style highlighting.

get highlightingFadeOpacity(): number

Returns number

set highlightingFadeOpacity(v: number): void

Parameters

v: number

Returns void

highlightingMode

Gets or sets the highlighting mode to use for the series in the component, when supported. This takes precedence over the series level IsHighlightingEnabled.

get highlightingMode(): SeriesHighlightingMode

Returns SeriesHighlightingMode

set highlightingMode(v: SeriesHighlightingMode): void

Parameters

v: SeriesHighlightingMode

Returns void

highlightingTransitionDuration

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;

get highlightingTransitionDuration(): number

Returns number

set highlightingTransitionDuration(v: number): void

Parameters

v: number

Returns void

horizontalCrosshairBrush

Gets or sets the current SeriesViewer's crosshair horizontal brush override.

get horizontalCrosshairBrush(): string

Returns string

set horizontalCrosshairBrush(v: string): void

Parameters

v: string

Returns void

horizontalViewScrollbarCornerRadius

Gets or sets the corner radius to use for the horizontal scrollbar in the component, when enabled.

get horizontalViewScrollbarCornerRadius(): number

Returns number

set horizontalViewScrollbarCornerRadius(v: number): void

Parameters

v: number

Returns void

horizontalViewScrollbarFill

Gets or sets the fill to use for the horizontal scrollbar in the component, when enabled.

get horizontalViewScrollbarFill(): string

Returns string

set horizontalViewScrollbarFill(v: string): void

Parameters

v: string

Returns void

horizontalViewScrollbarHeight

Gets or sets the height to use for the horizontal scrollbar in the component, when enabled.

get horizontalViewScrollbarHeight(): number

Returns number

set horizontalViewScrollbarHeight(v: number): void

Parameters

v: number

Returns void

horizontalViewScrollbarInset

Gets or sets the inset distance to use for the horizontal scrollbar in the component, when enabled.

get horizontalViewScrollbarInset(): number

Returns number

set horizontalViewScrollbarInset(v: number): void

Parameters

v: number

Returns void

horizontalViewScrollbarMaxOpacity

Gets or sets the max opacity to use for the horizontal scrollbar in the component, when enabled.

get horizontalViewScrollbarMaxOpacity(): number

Returns number

set horizontalViewScrollbarMaxOpacity(v: number): void

Parameters

v: number

Returns void

horizontalViewScrollbarMode

Gets or sets the horizontal scrollbar mode to use for the series viewer.

get horizontalViewScrollbarMode(): SeriesViewerScrollbarMode

Returns SeriesViewerScrollbarMode

set horizontalViewScrollbarMode(v: SeriesViewerScrollbarMode): void

Parameters

v: SeriesViewerScrollbarMode

Returns void

horizontalViewScrollbarOutline

Gets or sets the outline to use for the horizontal scrollbar in the component, when enabled.

get horizontalViewScrollbarOutline(): string

Returns string

set horizontalViewScrollbarOutline(v: string): void

Parameters

v: string

Returns void

horizontalViewScrollbarPosition

Gets or sets the position to use for the horizontal scrollbar in the component, when enabled.

get horizontalViewScrollbarPosition(): SeriesViewerHorizontalScrollbarPosition

Returns SeriesViewerHorizontalScrollbarPosition

set horizontalViewScrollbarPosition(v: SeriesViewerHorizontalScrollbarPosition): void

Parameters

v: SeriesViewerHorizontalScrollbarPosition

Returns void

horizontalViewScrollbarShouldAddAutoTrackInsets

Gets or sets whether to use automatic track insets for the horizontal scrollbar in the component, when enabled.

get horizontalViewScrollbarShouldAddAutoTrackInsets(): boolean

Returns boolean

set horizontalViewScrollbarShouldAddAutoTrackInsets(v: boolean): void

Parameters

v: boolean

Returns void

horizontalViewScrollbarStrokeThickness

Gets or sets the stroke thickness to use for the horizontal scrollbar in the component, when enabled.

get horizontalViewScrollbarStrokeThickness(): number

Returns number

set horizontalViewScrollbarStrokeThickness(v: number): void

Parameters

v: number

Returns void

horizontalViewScrollbarTrackEndInset

Gets or sets the track end inset to use for the horizontal scrollbar in the component, when enabled.

get horizontalViewScrollbarTrackEndInset(): number

Returns number

set horizontalViewScrollbarTrackEndInset(v: number): void

Parameters

v: number

Returns void

horizontalViewScrollbarTrackStartInset

Gets or sets the track start inset to use for the horizontal scrollbar in the component, when enabled.

get horizontalViewScrollbarTrackStartInset(): number

Returns number

set horizontalViewScrollbarTrackStartInset(v: number): void

Parameters

v: number

Returns void

imageCaptured

Event raised when an image of the component is saved

get imageCaptured(): EventEmitter<object>

Returns EventEmitter<object>

interactionOverride

Gets or sets the InteractionOverride property. The interaction override overrides the default interaction and modifiers keys and defines the SeriesViewer's response to mouse events.

get interactionOverride(): InteractionState

Returns InteractionState

set interactionOverride(v: InteractionState): void

Parameters

v: InteractionState

Returns void

interactionPixelScalingRatio

Method of pixel scaling to use during end user interaction with the chart.

get interactionPixelScalingRatio(): number

Returns number

set interactionPixelScalingRatio(v: number): void

Parameters

v: number

Returns void

isAntiAliasingEnabledDuringInteraction

Gets or sets the IsAntiAliasingEnabledDuringInteraction property.

get isAntiAliasingEnabledDuringInteraction(): boolean

Returns boolean

set isAntiAliasingEnabledDuringInteraction(v: boolean): void

Parameters

v: boolean

Returns void

isDetached

get isDetached(): boolean

Returns boolean

isInCreateAnnotationMode

get isInCreateAnnotationMode(): boolean

Returns boolean

isInDeleteAnnotationMode

get isInDeleteAnnotationMode(): boolean

Returns boolean

isMap

Indicates if this SeriesViewer is a map.

get isMap(): boolean

Returns boolean

isPagePanningAllowed

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.

get isPagePanningAllowed(): boolean

Returns boolean

set isPagePanningAllowed(v: boolean): void

Parameters

v: boolean

Returns void

isSurfaceInteractionDisabled

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;

get isSurfaceInteractionDisabled(): boolean

Returns boolean

set isSurfaceInteractionDisabled(v: boolean): void

Parameters

v: boolean

Returns void

isUserAnnotationsEnabled

Gets or sets whether initiating user annotations from the toolbar is enabled.

get isUserAnnotationsEnabled(): boolean

Returns boolean

set isUserAnnotationsEnabled(v: boolean): void

Parameters

v: boolean

Returns void

isWindowSyncedToVisibleRange

Gets or sets whether to sync the vertical aspect of the window with the contained series content. This is only supported for a subset of the available series.

get isWindowSyncedToVisibleRange(): boolean

Returns boolean

set isWindowSyncedToVisibleRange(v: boolean): void

Parameters

v: boolean

Returns void

leftMargin

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;

get leftMargin(): number

Returns number

set leftMargin(v: number): void

Parameters

v: number

Returns void

legendHighlightingMode

Gets or sets the highlighting mode to use for the legend linked to the component, when supported.

get legendHighlightingMode(): LegendHighlightingMode

Returns LegendHighlightingMode

set legendHighlightingMode(v: LegendHighlightingMode): void

Parameters

v: LegendHighlightingMode

Returns void

legendItemBadgeMode

Gets or sets the mode of legend badges representing all series in this chart. This property will be ignored when the LegendItemTemplate or LegendItemBadgeTemplate property is set on a series

get legendItemBadgeMode(): LegendItemBadgeMode

Returns LegendItemBadgeMode

set legendItemBadgeMode(v: LegendItemBadgeMode): void

Parameters

v: LegendItemBadgeMode

Returns void

legendItemBadgeShape

Gets or sets type of legend badges representing all series displayed in a legend linked to this component This property will be ignored when the LegendItemTemplate or LegendItemBadgeTemplate property is set on a series

get legendItemBadgeShape(): LegendItemBadgeShape

Returns LegendItemBadgeShape

set legendItemBadgeShape(v: LegendItemBadgeShape): void

Parameters

v: LegendItemBadgeShape

Returns void

markerAutomaticBehavior

Gets or sets the marker mode used for assigning a marker type to series when the marker type is automatic.

get markerAutomaticBehavior(): MarkerAutomaticBehavior

Returns MarkerAutomaticBehavior

set markerAutomaticBehavior(v: MarkerAutomaticBehavior): void

Parameters

v: MarkerAutomaticBehavior

Returns void

markerBrushes

Gets or sets the palette of brushes used for fill of marker series. These brushes are automatically assigned to markers based on the index of series.

get markerBrushes(): string[]

Returns string[]

set markerBrushes(v: string[]): void

Parameters

v: string[]

Returns void

markerOutlines

Gets or sets the palette of brushes used for outlines of plotted markers. These outlines are automatically assigned to markers based on the index of series.

get markerOutlines(): string[]

Returns string[]

set markerOutlines(v: string[]): void

Parameters

v: string[]

Returns void

outlines

Gets or sets the palette of brushes used for outlines of plotted series. These outlines are automatically assigned to series based on the index of series.

get outlines(): string[]

Returns string[]

set outlines(v: string[]): void

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;

get panModifier(): ModifierKeys

Returns ModifierKeys

set panModifier(v: ModifierKeys): void

Parameters

v: ModifierKeys

Returns void

pixelScalingRatio

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.

get pixelScalingRatio(): number

Returns number

set pixelScalingRatio(v: number): void

Parameters

v: number

Returns void

plotAreaBackground

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

get plotAreaBackground(): string

Returns string

set plotAreaBackground(v: string): void

Parameters

v: string

Returns void

plotAreaClicked

Occurs when the left mouse button is clicked while the mouse pointer is over the plot area.

get plotAreaClicked(): EventEmitter<object>

Returns EventEmitter<object>

plotAreaMouseEnter

Occurs when the pointer enters the plot area.

get plotAreaMouseEnter(): EventEmitter<object>

Returns EventEmitter<object>

plotAreaMouseLeave

Occurs when the pointer exits the plot area.

get plotAreaMouseLeave(): EventEmitter<object>

Returns EventEmitter<object>

plotAreaMouseLeftButtonDown

Occurs when the left mouse button is pressed while the mouse pointer is over the plot area.

get plotAreaMouseLeftButtonDown(): EventEmitter<object>

Returns EventEmitter<object>

plotAreaMouseLeftButtonUp

Occurs when the left mouse button is pressed while the mouse pointer is over the plot area.

get plotAreaMouseLeftButtonUp(): EventEmitter<object>

Returns EventEmitter<object>

plotAreaMouseOver

Occurs when the pointer if over the plot area.

get plotAreaMouseOver(): EventEmitter<object>

Returns EventEmitter<object>

preferHigherResolutionTiles

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.

get preferHigherResolutionTiles(): boolean

Returns boolean

set preferHigherResolutionTiles(v: boolean): void

Parameters

v: boolean

Returns void

previewPathFill

Gets or sets the brush used as the fill for the current SeriesViewer object's preview path. Null is treated as auto.

get previewPathFill(): string

Returns string

set previewPathFill(v: string): void

Parameters

v: string

Returns void

previewPathOpacity

Gets or sets the opacity used as for the fill for the current SeriesViewer object's preview path. Null is treated as auto.

get previewPathOpacity(): number

Returns number

set previewPathOpacity(v: number): void

Parameters

v: number

Returns void

previewPathStroke

Gets or sets the brush used as the border for the current SeriesViewer object's preview path. Null is treated as auto.

get previewPathStroke(): string

Returns string

set previewPathStroke(v: string): void

Parameters

v: string

Returns void

previewRect

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

get previewRect(): IgRect

Returns IgRect

set previewRect(v: IgRect): void

Parameters

v: IgRect

Returns void

refreshCompleted

Raised when the SeriesViewer's processing for an update has completed.

get refreshCompleted(): EventEmitter<object>

Returns EventEmitter<object>

resizeIdle

get resizeIdle(): EventEmitter<object>

Returns EventEmitter<object>

resizeIdleMilliseconds

Gets or sets the milliseconds before the chart will fire the resize idle event after the last resize.

get resizeIdleMilliseconds(): number

Returns number

set resizeIdleMilliseconds(v: number): void

Parameters

v: number

Returns void

rightButtonDefaultInteraction

Gets or sets the RightButtonDefaultInteraction property. The default interaction state defines the SeriesViewer's response to right button mouse events.

get rightButtonDefaultInteraction(): InteractionState

Returns InteractionState

set rightButtonDefaultInteraction(v: InteractionState): void

Parameters

v: InteractionState

Returns void

rightMargin

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;

get rightMargin(): number

Returns number

set rightMargin(v: number): void

Parameters

v: number

Returns void

scrollbarsAnimationDuration

Gets or sets the duration of the scrollbar effects.

get scrollbarsAnimationDuration(): number

Returns number

set scrollbarsAnimationDuration(v: number): void

Parameters

v: number

Returns void

selectedSeriesItems

Gets the currently selected data items. Adding or removing data items from this collection will select or deselect the visuals associated with those items.

get selectedSeriesItems(): IgxChartSelectedItemCollection

Returns IgxChartSelectedItemCollection

set selectedSeriesItems(v: IgxChartSelectedItemCollection): void

Parameters

v: IgxChartSelectedItemCollection

Returns void

selectedSeriesItemsChanged

Raised when the SelectedItems collection has changed.

get selectedSeriesItemsChanged(): EventEmitter<object>

Returns EventEmitter<object>

selectionBehavior

Gets or sets the selection behavior to use for the series in the component, when supported.

get selectionBehavior(): SeriesSelectionBehavior

Returns SeriesSelectionBehavior

set selectionBehavior(v: SeriesSelectionBehavior): void

Parameters

v: SeriesSelectionBehavior

Returns void

selectionBrush

Gets or sets the selection brush to use for the series.

get selectionBrush(): string

Returns string

set selectionBrush(v: string): void

Parameters

v: string

Returns void

selectionDismissDelayMilliseconds

Gets or sets the amount of time to delay before dismissing a selection effect.

get selectionDismissDelayMilliseconds(): number

Returns number

set selectionDismissDelayMilliseconds(v: number): void

Parameters

v: number

Returns void

selectionMode

Gets or sets the selection mode to use for the series in the component, when supported.

get selectionMode(): SeriesSelectionMode

Returns SeriesSelectionMode

set selectionMode(v: SeriesSelectionMode): void

Parameters

v: SeriesSelectionMode

Returns void

selectionModifier

Gets or sets the current SeriesViewer's SelectionModifier property.

get selectionModifier(): ModifierKeys

Returns ModifierKeys

set selectionModifier(v: ModifierKeys): void

Parameters

v: ModifierKeys

Returns void

selectionTransitionDuration

Gets or sets the duration the selection/de-Selection effects.

get selectionTransitionDuration(): number

Returns number

set selectionTransitionDuration(v: number): void

Parameters

v: number

Returns void

seriesClick

Occurs when the left mouse button is released while the mouse pointer is over a Series.

get seriesClick(): EventEmitter<object>

Returns EventEmitter<object>

seriesCursorMouseMove

Occurs when the cursors are moved over a series in this SeriesViewer.

get seriesCursorMouseMove(): EventEmitter<object>

Returns EventEmitter<object>

seriesMouseEnter

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>

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

get seriesMouseEnter(): EventEmitter<object>

Returns EventEmitter<object>

seriesMouseLeave

Occurs when the mouse pointer leaves a Series.

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

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

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

get seriesMouseLeave(): EventEmitter<object>

Returns EventEmitter<object>

seriesMouseLeftButtonDown

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>

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

get seriesMouseLeftButtonDown(): EventEmitter<object>

Returns EventEmitter<object>

seriesMouseLeftButtonUp

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

public onSeriesMouseLeftButtonUp =(event: any, args: DataChartMouseButtonEventArgs )
{

}

get seriesMouseLeftButtonUp(): EventEmitter<object>

Returns EventEmitter<object>

seriesMouseMove

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

public onSeriesMouseMove =( event: any, args: ChartMouseEventArgs) => {
                 }

get seriesMouseMove(): EventEmitter<object>

Returns EventEmitter<object>

seriesValueLayerUseLegend

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

get seriesValueLayerUseLegend(): boolean

Returns boolean

set seriesValueLayerUseLegend(v: boolean): void

Parameters

v: boolean

Returns void

shouldMatchZOrderToSeriesOrder

Gets or sets whether to match the z order of the series to their positional order in the series collection, regardless of mutation.

get shouldMatchZOrderToSeriesOrder(): boolean

Returns boolean

set shouldMatchZOrderToSeriesOrder(v: boolean): void

Parameters

v: boolean

Returns void

shouldPanOnMaximumZoom

Gets or sets a whether the chart should pan its content when zooming in passed max zoom level.

get shouldPanOnMaximumZoom(): boolean

Returns boolean

set shouldPanOnMaximumZoom(v: boolean): void

Parameters

v: boolean

Returns void

shouldSimulateHoverMoveCrosshairPoint

Gets or sets whether calling SimulateHover should shift the crosshair point.

get shouldSimulateHoverMoveCrosshairPoint(): boolean

Returns boolean

set shouldSimulateHoverMoveCrosshairPoint(v: boolean): void

Parameters

v: boolean

Returns void

sizeChanged

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

public onSizeChanged =(event: any, args: RectChangedEventArgs}){

}

get sizeChanged(): EventEmitter<object>

Returns EventEmitter<object>

subtitle

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

get subtitle(): string

Returns string

set subtitle(v: string): void

Parameters

v: string

Returns void

subtitleBottomMargin

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;

get subtitleBottomMargin(): number

Returns number

set subtitleBottomMargin(v: number): void

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

get subtitleHorizontalAlignment(): HorizontalAlignment

Returns HorizontalAlignment

set subtitleHorizontalAlignment(v: HorizontalAlignment): void

Parameters

v: HorizontalAlignment

Returns void

subtitleLeftMargin

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;

get subtitleLeftMargin(): number

Returns number

set subtitleLeftMargin(v: number): void

Parameters

v: number

Returns void

subtitleRightMargin

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;

get subtitleRightMargin(): number

Returns number

set subtitleRightMargin(v: number): void

Parameters

v: number

Returns void

subtitleTextColor

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

get subtitleTextColor(): string

Returns string

set subtitleTextColor(v: string): void

Parameters

v: string

Returns void

subtitleTextStyle

Font settings for the subtitle.

get subtitleTextStyle(): string

Returns string

set subtitleTextStyle(v: string): void

Parameters

v: string

Returns void

subtitleTopMargin

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;

get subtitleTopMargin(): number

Returns number

set subtitleTopMargin(v: number): void

Parameters

v: number

Returns void

titleBottomMargin

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;

get titleBottomMargin(): number

Returns number

set titleBottomMargin(v: number): void

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

get titleHorizontalAlignment(): HorizontalAlignment

Returns HorizontalAlignment

set titleHorizontalAlignment(v: HorizontalAlignment): void

Parameters

v: HorizontalAlignment

Returns void

titleLeftMargin

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;

get titleLeftMargin(): number

Returns number

set titleLeftMargin(v: number): void

Parameters

v: number

Returns void

titleRightMargin

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;

get titleRightMargin(): number

Returns number

set titleRightMargin(v: number): void

Parameters

v: number

Returns void

titleTextColor

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

get titleTextColor(): string

Returns string

set titleTextColor(v: string): void

Parameters

v: string

Returns void

titleTextStyle

Font settings for the title.

get titleTextStyle(): string

Returns string

set titleTextStyle(v: string): void

Parameters

v: string

Returns void

titleTopMargin

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;

get titleTopMargin(): number

Returns number

set titleTopMargin(v: number): void

Parameters

v: number

Returns void

topMargin

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;

get topMargin(): number

Returns number

set topMargin(v: number): void

Parameters

v: number

Returns void

userAnnotationInformationRequested

get userAnnotationInformationRequested(): EventEmitter<object>

Returns EventEmitter<object>

userAnnotationToolTipContentUpdating

get userAnnotationToolTipContentUpdating(): EventEmitter<object>

Returns EventEmitter<object>

useTiledZooming

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

get useTiledZooming(): boolean

Returns boolean

set useTiledZooming(v: boolean): void

Parameters

v: boolean

Returns void

verticalCrosshairBrush

Gets or sets the current SeriesViewer's crosshair vertical brush override.

get verticalCrosshairBrush(): string

Returns string

set verticalCrosshairBrush(v: string): void

Parameters

v: string

Returns void

verticalViewScrollbarCornerRadius

Gets or sets the corner radius to use for the vertical scrollbar in the component, when enabled.

get verticalViewScrollbarCornerRadius(): number

Returns number

set verticalViewScrollbarCornerRadius(v: number): void

Parameters

v: number

Returns void

verticalViewScrollbarFill

Gets or sets the fill to use for the vertical scrollbar in the component, when enabled.

get verticalViewScrollbarFill(): string

Returns string

set verticalViewScrollbarFill(v: string): void

Parameters

v: string

Returns void

verticalViewScrollbarInset

Gets or sets the inset distance to use for the vertical scrollbar in the component, when enabled.

get verticalViewScrollbarInset(): number

Returns number

set verticalViewScrollbarInset(v: number): void

Parameters

v: number

Returns void

verticalViewScrollbarMaxOpacity

Gets or sets the max opacity to use for the vertical scrollbar in the component, when enabled.

get verticalViewScrollbarMaxOpacity(): number

Returns number

set verticalViewScrollbarMaxOpacity(v: number): void

Parameters

v: number

Returns void

verticalViewScrollbarMode

Gets or sets the vertical scrollbar mode to use for the series viewer.

get verticalViewScrollbarMode(): SeriesViewerScrollbarMode

Returns SeriesViewerScrollbarMode

set verticalViewScrollbarMode(v: SeriesViewerScrollbarMode): void

Parameters

v: SeriesViewerScrollbarMode

Returns void

verticalViewScrollbarOutline

Gets or sets the outline to use for the vertical scrollbar in the component, when enabled.

get verticalViewScrollbarOutline(): string

Returns string

set verticalViewScrollbarOutline(v: string): void

Parameters

v: string

Returns void

verticalViewScrollbarPosition

Gets or sets the position to use for the vertical scrollbar in the component, when enabled.

get verticalViewScrollbarPosition(): SeriesViewerVerticalScrollbarPosition

Returns SeriesViewerVerticalScrollbarPosition

set verticalViewScrollbarPosition(v: SeriesViewerVerticalScrollbarPosition): void

Parameters

v: SeriesViewerVerticalScrollbarPosition

Returns void

verticalViewScrollbarShouldAddAutoTrackInsets

Gets or sets whether to use automatic track insets for the vertical scrollbar in the component, when enabled.

get verticalViewScrollbarShouldAddAutoTrackInsets(): boolean

Returns boolean

set verticalViewScrollbarShouldAddAutoTrackInsets(v: boolean): void

Parameters

v: boolean

Returns void

verticalViewScrollbarStrokeThickness

Gets or sets the stroke thickness to use for the vertical scrollbar in the component, when enabled.

get verticalViewScrollbarStrokeThickness(): number

Returns number

set verticalViewScrollbarStrokeThickness(v: number): void

Parameters

v: number

Returns void

verticalViewScrollbarTrackEndInset

Gets or sets the track end inset to use for the vertical scrollbar in the component, when enabled.

get verticalViewScrollbarTrackEndInset(): number

Returns number

set verticalViewScrollbarTrackEndInset(v: number): void

Parameters

v: number

Returns void

verticalViewScrollbarTrackStartInset

Gets or sets the track start inset to use for the vertical scrollbar in the component, when enabled.

get verticalViewScrollbarTrackStartInset(): number

Returns number

set verticalViewScrollbarTrackStartInset(v: number): void

Parameters

v: number

Returns void

verticalViewScrollbarWidth

Gets or sets the width to use for the vertical scrollbar in the component, when enabled.

get verticalViewScrollbarWidth(): number

Returns number

set verticalViewScrollbarWidth(v: number): void

Parameters

v: number

Returns void

viewerManipulationEnding

Raised when an ongoing manipulation of the series viewer is ended.

get viewerManipulationEnding(): EventEmitter<object>

Returns EventEmitter<object>

viewerManipulationStarting

Raised when an ongoing manipulation of the series viewer is started.

get viewerManipulationStarting(): EventEmitter<object>

Returns EventEmitter<object>

viewportRect

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

let viewPortRect: IgxRect = this.chart.viewportRect;

get viewportRect(): IgRect

Returns IgRect

windowPositionHorizontal

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;

get windowPositionHorizontal(): number

Returns number

set windowPositionHorizontal(v: number): void

Parameters

v: number

Returns void

windowPositionVertical

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;

get windowPositionVertical(): number

Returns number

set windowPositionVertical(v: number): void

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

get windowRect(): IgRect

Returns IgRect

set windowRect(v: IgRect): void

Parameters

v: IgRect

Returns void

windowRectChanged

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

public onWindowRectChanged =( s:any, e: RectChangedEventArgs) => {

       }

get windowRectChanged(): EventEmitter<object>

Returns EventEmitter<object>

windowRectMinHeight

Sets or gets the minimum height 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. This property accepts values between 0.0 (max zooming) and 1.0 (no zooming)

get windowRectMinHeight(): number

Returns number

set windowRectMinHeight(v: number): void

Parameters

v: number

Returns void

windowRectMinWidth

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. This property accepts values between 0.0 (max zooming) and 1.0 (no zooming)

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

get windowRectMinWidth(): number

Returns number

set windowRectMinWidth(v: number): void

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

get windowResponse(): WindowResponse

Returns WindowResponse

set windowResponse(v: WindowResponse): void

Parameters

v: WindowResponse

Returns void

windowSizeMinHeight

Sets or gets minimum pixel height that the window 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. This property is overridden by the WindowRectMinHeight property

get windowSizeMinHeight(): number

Returns number

set windowSizeMinHeight(v: number): void

Parameters

v: number

Returns void

windowSizeMinWidth

Sets or gets minimum pixel width that the window 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. This property is overridden by the WindowRectMinWidth property

get windowSizeMinWidth(): number

Returns number

set windowSizeMinWidth(v: number): void

Parameters

v: number

Returns void

zoomCoercionMode

Gets or sets zoom is constrained to within the axes. Setting this to false is a preview feature at the present time.

get zoomCoercionMode(): ZoomCoercionMode

Returns ZoomCoercionMode

set zoomCoercionMode(v: ZoomCoercionMode): void

Parameters

v: ZoomCoercionMode

Returns void

zoomTileCacheSize

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

get zoomTileCacheSize(): number

Returns number

set zoomTileCacheSize(v: number): void

Parameters

v: number

Returns void

Methods

addCommandAvailabilityListener

addCommandAvailabilityListener(listener: ICommandAvailabilityListener): void

Parameters

listener: ICommandAvailabilityListener

Returns void

addCommandStateChangedListener

addCommandStateChangedListener(listener: ICommandStateChangedListener): void

Parameters

listener: ICommandStateChangedListener

Returns void

attachSeries

Attaches the given series to the chart.

attachSeries(s: IgxSeriesComponent): void

Parameters

s: IgxSeriesComponent
- The series to attach to the chart.

Returns void

cancelAnnotationFlow

cancelAnnotationFlow(annotationFlowID: string): void

Parameters

annotationFlowID: string

Returns void

cancelCreatingAnnotation

cancelCreatingAnnotation(): void

Returns void

cancelDeletingAnnotation

cancelDeletingAnnotation(): void

Returns void

cancelManipulation

cancelManipulation(): void

Returns void

captureImage

captureImage(settings: IgxCaptureImageSettings): void

Parameters

settings: IgxCaptureImageSettings

Returns void

clearTileZoomCache

Clears the tile zoom tile cache so that new tiles will be generated. Only applies if the viewer is using a tile based zoom.

clearTileZoomCache(): void

Returns void

destroy

Release any resources held by the control.

destroy(): void

Returns void

endTiledZoomingIfRunning

Manually ends a tiled zoom if one is running.

endTiledZoomingIfRunning(): void

Returns void

findByName

findByName(name: string): any

Parameters

name: string

Returns any

finishAnnotationFlow

finishAnnotationFlow(info: IgxUserAnnotationInformation): void

Parameters

info: IgxUserAnnotationInformation

Returns void

finishCreatingAnnotation

finishCreatingAnnotation(): void

Returns void

finishDeletingAnnotation

finishDeletingAnnotation(): void

Returns void

flush

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();

flush(): void

Returns void

getActualWindowScaleHorizontal

Gets actual window scale for horizontal dimension of the control

let actualWindowScaleHorizontal: number = chart.getActualWindowScaleHorizontal();

getActualWindowScaleHorizontal(): number

Returns number

getActualWindowScaleVertical

Gets actual window scale for vertical dimension of the control

let actualWindowScaleVertical: number = chart.getActualWindowScaleVertical();

getActualWindowScaleVertical(): number

Returns number

getAnimationIdleVersionNumber

getAnimationIdleVersionNumber(): number

Returns number

getCurrentActualWindowRect

getCurrentActualWindowRect(): IgRect

Returns IgRect

getDesiredToolbarActions

getDesiredToolbarActions(): ToolActionInfo[]

Returns ToolActionInfo[]

hideToolTip

Hides the active main tooltip, if displayed.

this.chart.hideToolTip();

hideToolTip(): void

Returns void

isAnimationActive

isAnimationActive(): boolean

Returns boolean

loadAnnotationsFromJson

loadAnnotationsFromJson(jsonString: string): void

Parameters

jsonString: string

Returns void

ngOnInit

ngOnInit(): void

Returns void

notifyClearItems

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.

notifyClearItems(source_: any): void

Parameters

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

Returns void

notifyContainerResized

Notification from the containing object that the container has been resized.

notifyContainerResized(): void

Returns void

notifyInsertItem

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

Parameters

source_: any
index: number
newItem: any

Returns void

notifyRemoveItem

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

Parameters

source_: any
index: number
oldItem: any

Returns void

notifySeriesDataChanged

notifySeriesDataChanged(): void

Returns void

notifySetItem

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

Parameters

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

Returns void

queueForAnimationIdle

queueForAnimationIdle(action: object, version: number): void

Parameters

action: object
version: number

Returns void

removeCommandAvailabilityListener

removeCommandAvailabilityListener(listener: ICommandAvailabilityListener): void

Parameters

listener: ICommandAvailabilityListener

Returns void

removeCommandStateChangedListener

removeCommandStateChangedListener(listener: ICommandStateChangedListener): void

Parameters

listener: ICommandStateChangedListener

Returns void

renderToImage

renderToImage(width: number, height: number): any

Parameters

width: number
height: number

Returns any

resetAnnotations

resetAnnotations(): void

Returns void

resetZoom

Resets the zoom level to default.

resetZoom(): void

Returns void

saveAnnotationsToJson

saveAnnotationsToJson(): string

Returns string

simulateClick

simulateClick(point: IgPoint): void

Parameters

point: IgPoint

Returns void

simulateHover

simulateHover(point: IgPoint): void

Parameters

point: IgPoint

Returns void

simulateMouseLeave

simulateMouseLeave(): void

Returns void

simulatePlotPointerUp

simulatePlotPointerUp(point: IgPoint): void

Parameters

point: IgPoint

Returns void

simulatePressAndHold

simulatePressAndHold(point: IgPoint): void

Parameters

point: IgPoint

Returns void

startCreatingAnnotation

startCreatingAnnotation(): void

Returns void

startDeletingAnnotation

startDeletingAnnotation(): void

Returns void

startTiledZoomingIfNecessary

Manually starts a tiled zoom if one isn't already running.

startTiledZoomingIfNecessary(): void

Returns void

zoomIn

Performs zoom in action on the chart by specified percentage of current window rect

zoomIn(percentage: number): void

Parameters

percentage: number

Returns void

zoomOut

Performs zoom out action on the chart by specified percentage of current window rect

zoomOut(percentage: number): void

Parameters

percentage: number

Returns void

_createFromInternal

_createFromInternal(internal: any): IgxSeriesViewerComponent

Parameters

internal: any