The series actually present in the chart. Do not directly modify this array. This array's contents can be modified by causing Angular to reproject the child content. Or adding and removing series from the manual series collection on the series property.
Static ngStatic ngStatic ngStatic ngStatic ngStatic ngStatic ngStatic ngStatic ngStatic ngStatic ngStatic ngStatic ngStatic ngStatic ngStatic ngStatic ngStatic ngStatic ngStatic ngStatic ngStatic ngStatic ngStatic ngStatic ngStatic ngStatic ngStatic ngStatic ngStatic ngStatic ngStatic ngStatic ngStatic ngStatic ngStatic ngStatic ngStatic ngStatic ngStatic ngStatic ngStatic ngStatic ngStatic ngStatic ngStatic ngStatic ngStatic ngStatic ngStatic ngStatic ngStatic ngStatic ngStatic ngStatic ngStatic ngStatic ngStatic ngStatic ngStatic ngStatic ngStatic ngStatic ngStatic ngStatic ngStatic ngStatic ngStatic ngStatic ngStatic ngStatic ngStatic ngStatic ngStatic ngStatic ngStatic ngStatic ngStatic ngStatic ngStatic ngStatic ngStatic ngStatic ngStatic ngStatic ngStatic ngStatic ngStatic ngStatic ngStatic ngStatic ngStatic ngStatic ngStatic ngStatic ngStatic ngStatic ngStatic ngStatic ngStatic ngStatic ɵcmpStatic ɵfacResolved 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;
``
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.
A number between 0 and 1 determining the scale of the horizontal/vertical zoom. This property is effectively a shortcut to the Width/Height of the ActualWindowRect property.
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;
An imagery to display behind all series, inside the viewport of the IgxGeographicMapComponent control.
Gets or sets if the map should horizontally wrap.
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;
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;
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 the highlighting Behavior to use for the series in the component, when supported. This takes precedence over the series level IsHightlightingEnabled.
Gets or sets the highlighting mode to use for the series in the component, when supported. This takes precedence over the series level IsHightlightingEnabled.
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;
Gets or sets the current SeriesViewer's crosshair horizontal brush override.
Gets or sets the corner radius to use for the horizontal scrollbar in the component, when enabled.
Gets or sets the fill to use for the horizontal scrollbar in the component, when enabled.
Gets or sets the height to use for the horizontal scrollbar in the component, when enabled.
Gets or sets the inset distance to use for the horizontal scrollbar in the component, when enabled.
Gets or sets the max opacity to use for the horizontal scrollbar in the component, when enabled.
Gets or sets the horizontal scrollbar mode to use for the series viewer.
Gets or sets the outline to use for the horizontal scrollbar in the component, when enabled.
Gets or sets the position to use for the horizontal scrollbar in the component, when enabled.
Gets or sets whether to use automatic track insets for the horizontal scrollbar in the component, when enabled.
Gets or sets the stroke thickness to use for the horizontal scrollbar in the component, when enabled.
Gets or sets the track end inset to use for the horizontal scrollbar in the component, when enabled.
Gets or sets the track start inset to use for the horizontal scrollbar in the component, when enabled.
This event is fired whenever the image tiles transition from a loading state (e.g. some are fading in) to a loaded state.
Method of pixel scaling to use during end user interaction with the chart.
Gets or sets the IsAntiAliasingEnabledDuringInteraction property.
Gets or sets if the map should horizontally wrap.
Indicates if this SeriesViewer is a map.
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.
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;
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.
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;
Gets or sets the legend used for the current chart.
Gets or sets the highlighting mode to use for the legend linked to the component, when supported.
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
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
Gets or sets the marker mode used for assigning a marker type to series when the marker type is automatic.
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.
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.
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.
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;
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.
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";
Occurs when the left mouse button is clicked while the mouse pointer is over the plot area.
Occurs when the pointer enters the plot area.
Occurs when the pointer exits the plot area.
Occurs when the left mouse button is pressed while the mouse pointer is over the plot area.
Occurs when the left mouse button is pressed while the mouse pointer is over the plot area.
Occurs when the pointer if over the plot area.
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.
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};
Raised when the SeriesViewer's processing for an update has completed.
Gets or sets the behavior to use during resize.
Gets or sets the RightButtonDefaultInteraction property. The default interaction state defines the SeriesViewer's response to right button mouse events.
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;
Gets or sets the duration of the scrollbar effects.
A collection or manually added series for the chart.
Occurs when the cursors are moved over a series in this SeriesViewer.
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;
}
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;
}
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;
}
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 )
{
}
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) => {
}
Gets or sets a whether the chart should pan its content when zooing in passed max zoom level.
Gets or sets whether calling SimulateHover should shift the crosshair point.
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}){
}
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";
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;
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";
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;
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;
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";
Font settings for the subtitle.
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;
Gets or sets whether skip resetting the zoom when the world rect changes.
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;
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";
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;
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;
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" ;
Font settings for the title.
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;
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;
Gets or sets whether the series viewer should use cached tiles during zooms rather than the default live content.
Gets or sets whether to use the uncoerced world rect to constrain the zoom bounds.
Gets or sets the current SeriesViewer's crosshair vertical brush override.
Gets or sets the corner radius to use for the vertical scrollbar in the component, when enabled.
Gets or sets the fill to use for the vertical scrollbar in the component, when enabled.
Gets or sets the inset distance to use for the vertical scrollbar in the component, when enabled.
Gets or sets the max opacity to use for the vertical scrollbar in the component, when enabled.
Gets or sets the vertical scrollbar mode to use for the series viewer.
Gets or sets the outline to use for the vertical scrollbar in the component, when enabled.
Gets or sets the position to use for the vertical scrollbar in the component, when enabled.
Gets or sets whether to use automatic track insets for the vertical scrollbar in the component, when enabled.
Gets or sets the stroke thickness to use for the vertical scrollbar in the component, when enabled.
Gets or sets the track end inset to use for the vertical scrollbar in the component, when enabled.
Gets or sets the track start inset to use for the vertical scrollbar in the component, when enabled.
Gets or sets the width to use for the vertical scrollbar in the component, when enabled.
Raised when an ongoing manipulation of the series viewer is ended.
Raised when an ongoing manipulation of the series viewer is started.
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;
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;
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};
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) => {
}
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)
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";
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";
A number between 0 and 1 determining the scale of the horizontal/vertical zoom. This property is effectively a shortcut to the Width/Height of the WindowRect property.
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
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
The X-axis for this IgxGeographicMap.Component Under normal circumstances, this property should not be set in application code. By default, it will be set to a numeric axis with a spherical mercator scaler.
The Y-axis for this IgxGeographicMap.Component Under normal circumstances, this property should not be set in application code. By default, it will be set to a numeric axis with a spherical mercator scaler.
Gets or sets zoom is contrained to within the axes. Setting this to false is a preview feature at the present time.
Gets whether or not the control is ready for zooming
Gets or sets the maximum number of zoom tiles that the series viewer should cache while in tiled zooming mode.
Gets or sets zoomability of the current control
Attaches the given series to the chart.
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();
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.
this.chart.notifyClearItems(this.data);
Static _create
Represents the Infragistics IgxGeographicMapComponent control.