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
ngStatic
ngStatic
ngStatic
ngStatic
ɵcmpStatic
ɵfacGets the actual opacity applied to the area fill visual.
let actualFillOpacity: number = series.actualAreaFillOpacity;
Gets the effective brush for the current series object.
let actualBrush: string = series.actualBrush;
Gets the text that is displayed for the Close label in the tooltip.
Gets the text that is displayed for the High label in the tooltip.
Gets actual highlighting fade opacity
Gets actual highlighting mode
Resolved method of hit testing to use when pointing to items in the chart.
let hitTestMode: SeriesHitTestMode = this.series.actualHitTestMode;
Gets the effective legend badge fill for the current series.
Gets the effective legend badge outline for the current series.
Gets the actual legend item badge template used by the series.
Gets the text that is displayed for the Low label in the tooltip.
Gets the effective marker brush for the current series object.
ActualMarkerBrush
property gets the effective marker brush for the current series object. For example, you can use it like this:
let effectiveMarkerBrush: string = this.series.actualMarkerBrush;
Gets the actual opacity applied to the fill of the markers.
Gets the effective marker outline for the current series object.
`ActualMarkerOutline` property gets the effective marker outline for the current series object. You can use it like this:
let effectiveMarkerOutline: string = this.series.actualMarkerOutline;
Gets the effective marker template for the current series object.
ActualMarkerTemplate
property gets the effective marker template for the current series object. You can use it like this:
let effectiveMarkerTemplate: IgxDataTemplate = this.series.actualMarkerTemplate;
Gets the text that is displayed for the Open label in the tooltip.
Gets the effective outline for the current series object.
let actualOutline: string = series.ActualOutline;
Gets the text that is displayed for the Value label in the tooltip.
Gets the effective Thickness for the current series object.
Gets the text that is displayed for the Value label in the tooltip.
Gets the text that is displayed for the Volume label in the tooltip.
Gets or sets the opacity applied to the area fill visual. This property only applies to series that have area visual.
<igx-data-chart #chart
[dataSource]="data">
<igx-category-x-axis
label="label"
#xAxis>
</igx-category-x-axis>
<igx-numeric-y-axis
#yAxis>
</igx-numeric-y-axis>
<igx-area-series
[xAxis]="xAxis"
[yAxis]="yAxis"
valueMemberPath="value"
areaFillOpacity=.5>
</igx-area-series>
</igx-data-chart>
Event raised when Assigning Category Marker Style
Event raised when Assigning Category Style
Gets or sets whether series should be automatically generated. Reqiures the use of GroupBy as the ItemsSource.
Gets or sets the brush to use for the series.
The Brush
along with the Outline
and Negative Brush
can be used to affect the visuals of the Series
.
<igx-data-chart #chart
[dataSource]="data">
<igx-category-x-axis
label="label"
#xAxis>
</igx-category-x-axis>
<igx-numeric-y-axis
#yAxis>
</igx-numeric-y-axis>
<igx-area-series
[xAxis]="xAxis"
[yAxis]="yAxis"
valueMemberPath="value"
brush="red">
</igx-area-series>
</igx-data-chart>
this.series.brush = "red";
Gets or sets the coercion methods to use when loading data from data sources. Should be specified before setting any member paths, if being used. Setting it later will not cause data to be reimported into the chart.
<igx-data-chart
[dataSource]="data"
>
<igx-category-x-axis
label="label"
#xAxis>
</igx-category-x-axis>
<igx-numeric-y-axis
#yAxis>
</igx-numeric-y-axis>
<igx-line-series
[xAxis]="xAxis"
[yAxis]="yAxis"
valueMemberPath="value">
</igx-line-series>
<igx-line-series
[xAxis]="xAxis"
[yAxis]="yAxis"
[coercionMethods]= cMethods
valueMemberPath="value!ValueCoercion">
</igx-line-series>
</igx-data-chart>
<-- position: content member-->
cMethods: any = {
ValueCoercion: function(value:number): number {return value+2;}
}
Gets or sets a collection of Double values that indicate the pattern of dashes and gaps that is used to outline the current series object.
Gets unique key used to identify the series in data legend
Gets or sets the DiscreteLegendItemTemplate property. The legend item control content is created according to the DiscreteLegendItemTemplate on-demand by the series object itself.
Gets or sets whether the series should expect that properties in its items source may be functions that need to be evaluated to yield their value. This defaults to false, as there will be a subtle performance impact to using this feature. This value must be set before assigning an item's source to take effect.
expectFunctions
is used to decide whether the series should expect that its data source members need to be called as functions to get their values.
<igx-data-chart
[dataSource]="data">
<igx-category-x-axis
label="label"
#xAxis>
</igx-category-x-axis>
<igx-numeric-y-axis
#yAxis>
</igx-numeric-y-axis>
<igx-line-series
[xAxis]="xAxis"
[yAxis]="yAxis"
expectFunctions=true
valueMemberPath="MyFunction">
</igx-line-series>
</igx-data-chart>
this.series.expectFunctions=true;
The final value of this series.
Returns whether the current series supports visual markers.
HasMarkers
property is overriden, it returns whether the current series supports visual markers. You can use it like this:
let gotMarkers: boolean = this.series.hasMarkers;
Gets whether the series has only marker as visuals
Gets whether the current series shows an area shape.
Gets or sets the target opacity to fade to for fade style highlighting.
Method of hit testing to use when pointing to items in this series.
The HitTestMode
can be set to either:
Auto
: automatically decide the appropriate hit test mode for the series.ColorEncoded
: use a color encoded off screen buffer for hit testing. Should always be O(1) time for determining a hit series. This increases frame render time and memory usage, however. Consider using this if hit testing time is degrading performance.Computational
: use a computational based approach to determine whether the series has been hit. This uses loose bounding boxes, in some cases, and can range in time complexity between O(1) and O(log n) to find a hit. This decreases frame render time compared to color encodedthis.series.hitTestMode = SeriesHitTestMode.Computational;
Gets or sets whether the ActualLegend is FinancialLegend or normal Legend.
Gets whether the series is an callout annotation layer.
Gets whether the series is an crosshair annotation layer.
Gets whether the series is final value annotation layer.
Gets whether the series is an annotation layer displayed only when hovering over the chart. Crosshair Layer, Category Highlight Layer, Category Tooltip Layer, Item Tooltip Layer
Gets whether the series is an annotation layer.
let isAnnotationLayer: boolean = this.series.isAnnotationLayer;
Gets whether the series is a value annotation layer.
Gets whether the current series shows an area shape.
Gets whether the current series shows an area or line shape.
let isAreaorLine: boolean = this.series.isAreaorLine;
Gets whether the current series shows a horizontal column shape.
Gets whether or not this series is Category series
Gets whether the current series shows a column shape.
Gets or sets whether the component level highlight mode is ignored.
Gets or sets whether this category series should allow custom style overrides of its individual marker visuals.
Gets or sets whether this category series should allow custom style overrides of its individual visuals.
Gets whether the default crosshair behavior should be disabled if this series is present.
IsDefaultCrosshairBehaviorDisabled
defaults to true for annotation layers. When not using annotaion layers, you can show crosshairs by setting the chart's CrosshairVisibility
to true.
let isDefaultCrosshairBehaviorDisabled: boolean = this.series.isDefaultCrosshairBehaviorDisabled;
Gets if the default tooltip has been selected for display.
To use the default tooltip set ShowDefaultTooltip
to true.
let isDefaultToolTipSelected: boolean = this.series.isDefaultToolTipSelected;
Gets whether the default tooltip behavior should be disabled if this series is present.
let isDefaultTooltipBehaviorDisabled: boolean = this.series.isDefaultTooltipBehaviorDisabled;
Gets or sets whether drop shadow should be enabled for this series.
IsDropShadowEnabled
is used to decide whether drop shadow should be enabled for this series.
<igx-data-chart
[dataSource]="data">
<igx-category-x-axis
label="label"
#xAxis>
</igx-category-x-axis>
<igx-numeric-y-axis
#yAxis>
</igx-numeric-y-axis>
<igx-line-series
[xAxis]="xAxis"
[yAxis]="yAxis"
valueMemberPath="value"
isDropShadowEnabled=true>
</igx-line-series>
</igx-data-chart>
this.series.isDropShadowEnabled = true;
Gets whether the current series is a financial type series.
let isFinancial: boolean = this.series.isFinancial;
Gets whether the series is financial indicator
Gets whether the series is financial overlay
Gets whether the series has financial OHLC/candlestick visuals
Gets whether the series is financial waterfall
Gets whether the current series is a stack fragment.
let isFragment: boolean = this.series.isFragment;
Gets whether the current series is a geographic series.
let isGeographic: boolean = this.series.isGeographic;
Gets or sets whether highlighting should be enabled for this series, if this type of series supports highlighting.
<igx-data-chart #chart
[dataSource]="data">
<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"
isHighlightEnabled="true">
</igx-column-series>
</igx-data-chart>
this.series.isHighlightingEnabled = true;
Gets if the series uses an index, which can be used to auto-assign it a color.
let isIndexed: boolean = this.series.isIndexed;
Gets whether the current series shows a line contour shape.
Gets whether the current series shows only line shapes.
Overridden by derived series classes to indicate when markerless display is preferred or not.
Overridden by derived series classes to indicate when negative colors are supported or not.
Gets whether the current series shows a pie shape.
Gets whether the current series shows pixels.
Gets whether the current series is a polar type series.
let isPolar: boolean = this.series.isPolar;
Gets whether the current series shows a polygon shape.
Gets whether the current series shows a polyline shape.
Gets whether the current series is a radial type series.
let isRadial: boolean = this.series.isRadial;
Gets whether the current series is a range type series.
let isRange: boolean = this.series.isRange;
Gets whether the current series is a scatter type series.
let isScatter: boolean = this.series.isScatter;
Gets whether the current series is a shape type series.
Gets whether the current series shows interactive shape controls.
Gets whether the current series shows a spline shape.
Checks if this series is a stacked series
Gets whether the current series shows step shapes.
Gets whether the current series shows a tile imagery.
Gets or sets whether the series should transition into the plot area when a new data source is assigned. Note: Transitions are not currently supported for stacked series.
Set IsTransitionInEnabled
to true if you want your chart series to animate into position when the chart is loading into view.
<igx-data-chart [dataSource]="data" >
<igx-category-x-axis
label="label"
#xAxis>
</igx-category-x-axis>
<igx-numeric-y-axis #yAxis>
</igx-numeric-y-axis>
<igx-column-series
[xAxis]="xAxis"
[yAxis]="yAxis"
valueMemberPath="value"
isTransitionInEnabled="true">
</igx-column-series>
</igx-data-chart>
let series = new IgxColumnSeriesComponent();
series.xAxis = this.xAxis;
series.yAxis = this.yAxis;
series.valueMemberPath="value";
series.isTransitionInEnabled="true";
this.chart.series.add(series);
Gets if the series should appear in any legends.
let isUsableInLegend: boolean = this.series.isUsableInLegend;
Gets whether the current series shows an area shape.
Gets whether the series is a value overlay.
Gets whether the current series is oriented vertically.
let isVertical: boolean = this.series.isVertical;
Gets whether the current series shows a waterfall column shape.
Gets or sets the legend used for the current series.
Gets or sets the mode of legend badge representing the current series in a legend. This property will be ignored when the LegendItemTemplate/LegendItemBadgeTemplate property is set on the series
Gets or sets the type of legend badge representing the current series in a legend. This property will be ignored when the LegendItemTemplate/LegendItemBadgeTemplate property is set on the series
Gets or sets the LegendItemBadgeTemplate property. The legend item badge is created according to the LegendItemBadgeTemplate on-demand by the series object itself.
Gets or sets the LegendItemTemplate property. The legend item control content is created according to the LegendItemTemplate on-demand by the series object itself.
Gets or sets the legend item visibility for the current series object.
The LegendItemVisibilty
can be used to exclude only certain Series
from the Legend
.
Gets or sets the style of the starting point of any lines or polylines representing this series. Not every series type has a line at which it would be appropriate to display a start cap, so this property does not affect every series type. LineSeries, for example, is affected by StartCap, but ColumnSeries is not.
Gets or sets the brush that specifies current series object's line join style.
Gets or sets the brush that specifies how the current series object's marker interiors are painted.
MarkerBrush
property gets or sets the brush that specifies how the current series object's marker interiors are painted. You can use it like this:
<igx-data-chart
[dataSource]="data">
<igx-category-x-axis
label="label"
#xAxis>
</igx-category-x-axis>
<igx-numeric-y-axis #yAxis>
</igx-numeric-y-axis>
<igx-column-series
#series
[xAxis]="xAxis"
[yAxis]="yAxis"
valueMemberPath="value"
markerBrush = "blue">
</igx-column-series>
</igx-data-chart>
this.series.markerBrush = "red";
Gets or sets whether the marker fill is based on the marker outline of the series rather than the marker brushes collection.
Gets or sets the opacity applied to the fill of the markers. This property only applies to series that have area visual.
Gets or sets the brush that specifies how the current series object's marker outlines are painted.
MarkerOutline
property gets or sets the brush that specifies how the current series object's marker outlines are painted. You can use it like this:
<igx-data-chart
[dataSource]="data">
<igx-category-x-axis
label="label"
#xAxis>
</igx-category-x-axis>
<igx-numeric-y-axis #yAxis>
</igx-numeric-y-axis>
<igx-column-series
#series
[xAxis]="xAxis"
[yAxis]="yAxis"
valueMemberPath="value"
markerOutline = "blue">
</igx-column-series>
</igx-data-chart>
this.series.markerOutline = "red";
Gets or sets whether the marker outline is based on the marker brush of the series rather than the marker outlines collection.
Gets or sets the MarkerTemplate for the current series object.
MarkerTemplate
property gets or sets the MarkerTemplate for the current series object. For example, you can use it like this:
<igx-data-chart
[dataSource]="data">
<igx-category-x-axis
label="label"
#xAxis>
</igx-category-x-axis>
<igx-numeric-y-axis #yAxis>
</igx-numeric-y-axis>
<igx-column-series
#series
[xAxis]="xAxis"
[yAxis]="yAxis"
valueMemberPath="value"
markerTemplate="circleMarkerTemplate">
</igx-column-series>
</igx-data-chart>
Gets or sets thickness of the marker outline
Gets or sets the marker type for the current series object. This property is ignored when the MarkerTemplate property is set
MarkerType
property gets or sets the marker type for the current series object. For example, you can set it like this:
<igx-data-chart
[dataSource]="data">
<igx-category-x-axis
label="label"
#xAxis>
</igx-category-x-axis>
<igx-numeric-y-axis
#yAxis>
</igx-numeric-y-axis>
<igx-column-series
#series
[xAxis]="xAxis"
[yAxis]="yAxis"
valueMemberPath="value"
markerType = "circle">
</igx-column-series>
</igx-data-chart>
this.series.markerType = "circle";
Gets or sets the whether the chart reacts to mouse move events.
Gets or sets the brush to use for the outline of the series. Some series types, such as LineSeries, do not display outlines. Therefore, this property does not affect some charts.
The Outline
along with the Brush
and NegativeBrush
can be used to affect the visuals of the Series
.
<igx-data-chart #chart
[dataSource]="data">
<igx-category-x-axis
label="label"
#xAxis>
</igx-category-x-axis>
<igx-numeric-y-axis
#yAxis>
</igx-numeric-y-axis>
<igx-area-series
[xAxis]="xAxis"
[yAxis]="yAxis"
valueMemberPath="value"
outline="red">
</igx-area-series>
</igx-data-chart>
this.series.brush = "red";
Gets or sets the outline mode to use for the series.
The percent change from the beginning to the end of this series.
This event is raised every time a render has been requested from a series.
Gets or sets the current series object's rendering resolution.
Setting the Resolution
on a Series to a higher value can help with performance, but it will lower the graphical fidelity of the line. As such, it can be increased up until the fidelity is unacceptable.
<igx-data-chart
[dataSource]="data">
<igx-category-x-axis
label="label"
#xAxis>
</igx-category-x-axis>
<igx-numeric-y-axis
#yAxis>
</igx-numeric-y-axis>
<igx-line-series
[xAxis]="xAxis"
[yAxis]="yAxis"
valueMemberPath="value"
resolution=1.5>
</igx-line-series>
</igx-data-chart>
this.series.resolution = 1.5;
Gets or sets whether the order of the fragment series should be reversed in the legend.
A collection or manually added series for the chart.
Event raised when a new fragment series is automatically generated.
Gets or sets the shadow blur. This property is ignored when Series.UseSingleShadow is set to true.
ShadowBlur
can be set in conjection with IsDropShadowEnabled
to further define the drop shadow effect.
<igx-data-chart
[dataSource]="data">
<igx-category-x-axis
label="label"
#xAxis>
</igx-category-x-axis>
<igx-numeric-y-axis
#yAxis>
</igx-numeric-y-axis>
<igx-column-series
[xAxis]="xAxis"
[yAxis]="yAxis"
valueMemberPath="value"
isDropShadowEnabled="true"
shadowBlur="7"
shadowColor="blue">
</igx-column-series>
</igx-data-chart>
this.series.shadowBlur = 7;
Gets or sets the drop shadow color.
ShadowColor
can be set in conjection with IsDropShadowEnabled
to further define the drop shadow effect.
<igx-data-chart
[dataSource]="data">
<igx-category-x-axis
label="label"
#xAxis>
</igx-category-x-axis>
<igx-numeric-y-axis
#yAxis>
</igx-numeric-y-axis>
<igx-column-series
[xAxis]="xAxis"
[yAxis]="yAxis"
valueMemberPath="value"
isDropShadowEnabled="true"
shadowBlur="7"
shadowColor="blue">
</igx-column-series>
</igx-data-chart>
this.series.shadowColor = "blue";
Gets or sets the drop shadow x-offset.
ShadowOffsetX
can be set in conjection with IsDropShadowEnabled
to further define the drop shadow effect.
<igx-data-chart
[dataSource]="data">
<igx-category-x-axis
label="label"
#xAxis>
</igx-category-x-axis>
<igx-numeric-y-axis
#yAxis>
</igx-numeric-y-axis>
<igx-column-series
[xAxis]="xAxis"
[yAxis]="yAxis"
valueMemberPath="value"
isDropShadowEnabled="true"
shadowOffsetX="10"
shadowOffsetY="10">
</igx-column-series>
</igx-data-chart>
this.series.shadowOffsetX = 10;
Gets or sets the drop shadow y-offset.
ShadowOffsetY
can be set in conjection with IsDropShadowEnabled
to further define the drop shadow effect.
<igx-data-chart
[dataSource]="data">
<igx-category-x-axis
label="label"
#xAxis>
</igx-category-x-axis>
<igx-numeric-y-axis
#yAxis>
</igx-numeric-y-axis>
<igx-column-series
[xAxis]="xAxis"
[yAxis]="yAxis"
valueMemberPath="value"
isDropShadowEnabled="true"
shadowOffsetX="10"
shadowOffsetY="10">
</igx-column-series>
</igx-data-chart>
this.series.shadowOffsetY = 10;
Gets or sets whether this series should suppress it's auto callouts
Gets or sets whether default tooltip will be shown.
The default tooltips display all the information relevant to the particular series item (series title, data values, axis values etc.) and are styled to match the series' style. When using default tooltips, you should also set the series Title
.
<igx-data-chart
[dataSource]="data">
<igx-category-x-axis
label="label"
#xAxis>
</igx-category-x-axis>
<igx-numeric-y-axis
#yAxis>
</igx-numeric-y-axis>
<igx-column-series
[xAxis]="xAxis"
[yAxis]="yAxis"
valueMemberPath="value"
showDefaultTooltip="true"
title="InStock Items">
</igx-column-series>
</igx-data-chart>
this.series.showDefaultTooltip ="true";
Gets or sets the width of the current series object's line thickness.
Depending on the Series
type, this can be the main brush used, or just the outline. For example, when using a LineSeries
it will affect the thickness of the lines drawn, whereas when using a ColumnSeries
it will affect the outer border thickness of the columns.
<igx-data-chart
[dataSource]="data">
<igx-category-x-axis
label="label"
#xAxis>
</igx-category-x-axis>
<igx-numeric-y-axis
#yAxis>
</igx-numeric-y-axis>
<igx-line-series
[xAxis]="xAxis"
[yAxis]="yAxis"
valueMemberPath="value"
thickness=5>
</igx-line-series>
</igx-data-chart>
this.series.thickness=5;
Gets or sets the Title property. The legend item control is created according to the Title on-demand by the series object itself.
The Series
Title
may be used in tooltips and legends.
<igx-data-chart
[dataSource]="data">
<igx-category-x-axis
label="label"
#xAxis>
</igx-category-x-axis>
<igx-numeric-y-axis
#yAxis>
</igx-numeric-y-axis>
<igx-column-series
[xAxis]="xAxis"
[yAxis]="yAxis"
valueMemberPath="value"
showDefaultTooltip="true"
title="InStock Items">
</igx-column-series>
</igx-data-chart>
this.series.title = "InStock Items";
Gets or sets the duration of the current series's morph.
The TransitionDuration
can be used to play animation when data is added or removed from a Series
. To play an initial animation see TransitionInDuration
.
<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=500
transitionInDuration=500>
</igx-column-series>
</igx-data-chart>
this.series.transitionDuration = 500;
Gets or sets the easing function used to morph the current series.
The TransitioninDuration
and TransitionEasingFunction
can be used to play animation when data is added or removed from a Series
. To play an initial animation see TransitionInDuration
.
this.series.transitionEasingFunction = EasingFunctions.cubicEase;
Gets or sets the easing function used to morph the current series.
The TransitioninDuration
and TransitionEasingFunction
can be used to play animation when data is added or removed from a Series
. To play an initial animation see TransitionInDuration
.
this.series.transitionEasingFunction = EasingFunctions.cubicEase;
Gets or sets the duration of the current series's transition in morph.
The TransitionInDuration
can be used with IsTransitionInEnabled
to cofigure the animation when a new datasource is loaded.
<igx-data-chart
[dataSource]="data">
<igx-category-x-axis
label="label"
#xAxis>
</igx-category-x-axis>
<igx-numeric-y-axis
#yAxis>
</igx-numeric-y-axis>
<igx-column-series
[xAxis]="xAxis"
[yAxis]="yAxis"
valueMemberPath="value"
transitionInMode="accordionFromBottom"
isTransitionInEnabled=true
transitionInSpeedType="indexScaled"
transitionDuration=500
transitionInDuration=500>
</igx-column-series>
</igx-data-chart>
this.series.transitionDuration = 500;
Gets or sets the EasingFunction used to morph the current series during the initial transition.
The TransitionInEasingFunction
can be used with IsTransitionInEnabled
to cofigure the animation when a new datasource is loaded.
this.series.transitionInEasingFunction = EasingFunctions.cubicEase;
Gets or sets the EasingFunction used to morph the current series during the initial transition.
The TransitionInEasingFunction
can be used with IsTransitionInEnabled
to cofigure the animation when a new datasource is loaded.
this.series.transitionInEasingFunction = EasingFunctions.cubicEase;
Gets or sets the method by which to animate the data into the chart when the chart data source is swapped. Note: Transitions are not currently supported for stacked series.
TransitionInMode
controls the direction of the transition-in animation.
<igx-data-chart
[dataSource]="data" >
<igx-category-x-axis
label="label"
#xAxis>
</igx-category-x-axis>
<igx-numeric-y-axis #yAxis>
</igx-numeric-y-axis>
<igx-column-series
[xAxis]="xAxis"
[yAxis]="yAxis"
valueMemberPath="value"
isTransitionInEnabled="true"
transitionInMode="accordionfromRight">
</igx-column-series>
</igx-data-chart>
let series = new IgxColumnSeriesComponent();
series.xAxis = this.xAxis;
series.yAxis = this.yAxis;
series.valueMemberPath="value";
series.transitionInMode="accordionfromRight";
this.chart.series.add(series);
this.columnSeries2.transitionInMode= "accordionfromRight";
Gets or sets the duration of the current series's transition in morph.
The TransitionInSpeedType
can be used with IsTransitionInEnabled
to cofigure the animation when a new datasource is loaded.
<igx-data-chart
[dataSource]="data">
<igx-category-x-axis
label="label"
#xAxis>
</igx-category-x-axis>
<igx-numeric-y-axis
#yAxis>
</igx-numeric-y-axis>
<igx-column-series
[xAxis]="xAxis"
[yAxis]="yAxis"
valueMemberPath="value"
transitionInMode="accordionFromBottom"
isTransitionInEnabled=true
transitionInSpeedType="indexScaled"
transitionInDuration=500>
</igx-column-series>
</igx-data-chart>
this.series.transitionInSpeedType = TransitionInSpeedType.IndexScaled;
Sets or Gets whether to increase marker fidelity for extreme data shapes that have lots of Y variation over short X intervals.
Set UseHighMarkerFidelity
when your data has high variation along the y-axis within a short span of this x-axis.
<igx-data-chart [dataSource]="data">
<igx-category-x-axis
label="label"
#xAxis>
</igx-category-x-axis>
<igx-numeric-y-axis #yAxis>
</igx-numeric-y-axis>
<igx-column-series
[xAxis]="xAxis"
[yAxis]="yAxis"
valueMemberPath="value"
markerType="circle"
useHighMarkerFidelity="true">
</igx-column-series>
</igx-data-chart>
let series = new IgxColumnSeriesComponent();
series.xAxis = this.xAxis;
series.yAxis = this.yAxis;
series.valueMemberPath= "value";
series.useHighMarkerFidelity= "true";
this.chart.series.add(series);
this.columnSeries2.useHighMarkerFidelity= "true";
Gets or sets whether drop shadow is applied to the whole series visual or to each of the individual shapes forming the series. When this property is set to true, no Series.ShadowBlur is applied.
<igx-data-chart
[dataSource]="data">
<igx-category-x-axis
label="label"
#xAxis>
</igx-category-x-axis>
<igx-numeric-y-axis
#yAxis>
</igx-numeric-y-axis>
<igx-line-series
[xAxis]="xAxis"
[yAxis]="yAxis"
valueMemberPath="value"
isDropShadowEnabled=true
markerType="circle"
useSingleShadow=true>
</igx-line-series>
</igx-data-chart>
this.series.useSingleShadow = true;
Gets or sets the bottom margin to use when getting a visible axis range for the series.
Gets or sets the left margin to use when getting a visible axis range for the series.
Gets or sets the right margin to use when getting a visible axis range for the series.
Gets or sets the top margin to use when getting a visible axis range for the series.
Gets or sets the visible range mode to use.
Gets or sets the effective x-axis for this series.
Gets or sets the effective y-axis for this series.
Gets the precise item index, if possible, based on the closeness to the previous or next whole integer. If the series cannot provide this information, GetExactItemIndex will return the same integer value as GetItemIndex.
If possible, will return the best available value bounding box within the series that has the best value match for the world position provided.
let box: IgxRect = this.series.getSeriesValueBoundingBox({x:.8,y:.8});
If possible, will return the best available value marker bounding box within the series that has the best value match for the world position provided.
let box: IgxRect = this.series.getSeriesValueMarkerBoundingBox({x:.8,y:.8});
Gets the data values of each axis associated with the specified value type. For example, if you specify mode as Maximum then it will return the maximum numerical value for each axis. For non-numerical axes it will return NaN.
Moves the cursor point to the provided world position. Some series may react to the current cursor position.
MoveCursorPoint
can be used on annotation layers to programitically show the annotation at the given point.
this.crosshair.moveCursorPoint({x:.5,y:.5});
Scrolls the series to display the item for the specified data item. The series is scrolled by the minimum amount required to place the specified data item within the central 80% of the visible axis.
Static
_create
Represents a stacked series, where the points in each series are connected with a line.