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

let actualContentHitTestMode: ChartHitTestMode  =this.chart.actualContentHitTestMode;

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

let actualInteractionPixelScalingRatio: number = this.chart.actualInteractionPixelScalingRatio;

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;

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;

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

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

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

Raised when the actual window rectangle of the SeriesViewer changes.

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

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

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;

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;

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;

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>

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.

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

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

this.chart.contentHitTestMode = ChartHitTestMode.Computational;

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;

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

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;

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;

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;

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

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

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

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

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

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

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

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

Raised when the SelectedItems collection has changed.

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.

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.

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

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

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