Gets 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 effective brush for the current series object.
let actualBrush: string = series.actualBrush;Resolved method of hit testing to use when pointing to items in the chart.
let hitTestMode: SeriesHitTestMode = this.series.actualHitTestMode;Resolved method of hit testing to use when pointing to items in the chart.
let hitTestMode: SeriesHitTestMode = this.series.actualHitTestMode;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 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 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 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 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 effective outline for the current series object.
let actualOutline: string = series.ActualOutline;Gets the effective outline for the current series object.
let actualOutline: string = series.ActualOutline;Gets the effective TrendLineBrush for this series.
Gets the effective TrendLineBrush for this series.
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>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>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 IgxSeriesComponent.
<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 brush to use for the series.
The brush along with the outline and Negative Brush can be used to affect the visuals of the IgxSeriesComponent.
<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 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 the DiscreteLegendItemTemplate property. The legend item control content is created according to the DiscreteLegendItemTemplate on-demand by the series object itself.
The legend item control content is created according to the DiscreteLegendItemTemplate on-demand by the series object itself
Gets or sets the DiscreteLegendItemTemplate property. The legend item control content is created according to the DiscreteLegendItemTemplate on-demand by the series object itself.
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>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>The final value of this series.
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;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;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 whether the series is an annotation layer.
let isAnnotationLayer: boolean = this.series.isAnnotationLayer;Gets whether the current series shows an area or line shape.
let isAreaorLine: boolean = this.series.isAreaorLine;Gets whether the current series is a category type series.
let isCategory: boolean = this.series.isCategory;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 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 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 current series is a stack fragment.
let isFragment: boolean = this.series.isFragment;Gets whether the current seires is a geogrpahic 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 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;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 is a polar type series.
let isPolar: boolean = this.series.isPolar;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;Checks if this series is a scatter series
Gets whether the current series is a shape type series.
Gets whether the current series is a stacked type series.
let isStacked: boolean = this.series.isStacked;Gets if the series should appear in any legends.
let isUsableInLegend: boolean = this.series.isUsableInLegend;Gets whether the series is a value overlay.
Gets whether the current series is oriented vertically.
let isVertical: boolean = this.series.isVertical;Gets or sets the LegendItemBadgeTemplate property. The legend item badge is created according to the LegendItemBadgeTemplate on-demand by the series object itself.
The legendItemBadgeTemplate is used to describe the visual structure of the badge icon for each legend item.
Gets or sets the LegendItemBadgeTemplate property. The legend item badge is created according to the LegendItemBadgeTemplate on-demand by the series object itself.
The legendItemBadgeTemplate is used to describe the visual structure of the badge icon for each legend item.
Gets or sets the LegendItemTemplate property. The legend item control content is created according to the LegendItemTemplate on-demand by the series object itself.
The legendItemTemplate is used to describe the visual structure of each legend item in the IgxLegendComponent.
Gets or sets the LegendItemTemplate property. The legend item control content is created according to the LegendItemTemplate on-demand by the series object itself.
The legendItemTemplate is used to describe the visual structure of each legend item in the IgxLegendComponent.
Gets or sets the legend item visibility for the current series object.
The LegendItemVisibilty can be used to exclude only certain IgxSeriesComponent from the IgxLegendComponent.
Gets or sets the legend item visibility for the current series object.
The LegendItemVisibilty can be used to exclude only certain IgxSeriesComponent from the IgxLegendComponent.
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 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";The desired behavior for markers in this series which are placed too close together for the current view, resulting in a collision.
The desired behavior for markers in this series which are placed too close together for the current view, resulting in a collision.
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 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 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 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 the marker type for the current series object. If the MarkerTemplate property is set, the setting of the MarkerType property will be ignored.
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 marker type for the current series object. If the MarkerTemplate property is set, the setting of the MarkerType property will be ignored.
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 maximum number of markerItems displayed by the current series. If more than the specified number of markerItems are visible, the series will automatically choose a representative set.
Gets or sets the maximum number of markerItems displayed by the current series. If more than the specified number of markerItems are visible, the series will automatically choose a representative set.
Gets or sets the whether the chart reacts to mouse move events.
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 IgxSeriesComponent.
<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 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 IgxSeriesComponent.
<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";The percent change from the beginning to the end of this 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 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 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 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 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 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 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 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>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>Gets or sets the width of the current series object's line thickness.
Depending on the IgxSeriesComponent type, this can be the main brush used, or just the outline. For example, when using a IgxLineSeriesComponent it will affect the thickness of the lines drawn, whereas when using a IgxColumnSeriesComponent 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 width of the current series object's line thickness.
Depending on the IgxSeriesComponent type, this can be the main brush used, or just the outline. For example, when using a IgxLineSeriesComponent it will affect the thickness of the lines drawn, whereas when using a IgxColumnSeriesComponent 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 IgxSeriesComponent 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 Title property. The legend item control is created according to the Title on-demand by the series object itself.
The IgxSeriesComponent 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 IgxSeriesComponent. 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 duration of the current series's morph.
The transitionDuration can be used to play animation when data is added or removed from a IgxSeriesComponent. 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 IgxSeriesComponent. 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 IgxSeriesComponent. 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 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 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;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;Gets or sets the brush to use to draw the trend line.
Gets or sets the brush to use to draw the trend line.
Gets or sets the moving average period for the current scatter series object. The typical, and initial, value for trend line period is 7.
Gets or sets the moving average period for the current scatter series object. The typical, and initial, value for trend line period is 7.
Gets or sets the thickness of the current scatter series object's trend line.
Gets or sets the thickness of the current scatter series object's trend line.
Gets or sets the trend type for the current scatter series.
Gets or sets the trend type for the current scatter series.
Gets or sets the Z-Index of the trend line. Values greater than 1000 will result in the trend line being rendered in front of the series data.
Gets or sets the Z-Index of the trend line. Values greater than 1000 will result in the trend line being rendered in front of the series data.
Determines how unknown values will be plotted on the chart. Null and Double.NaN are two examples of unknown values.
Determines how unknown values will be plotted on the chart. Null and Double.NaN are two examples of unknown values.
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 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 effective x-axis for the current object.
Gets or sets the effective x-axis for the current object.
Gets or sets the value mapping property for the current series object.
Gets or sets the value mapping property for the current series object.
Gets or sets the effective y-axis for the current object.
Gets or sets the effective y-axis for the current object.
Gets or sets the value mapping property for the current series object.
Gets or sets the value mapping property for the current series object.
Determine if object can be used as XAxis
Determine if object can be used as YAxis
Gets the effective viewport, adjusted to account for margins and other factors.
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.
let index: number = this.series.getExactItemIndex({x:.5,y:.5});Gets the item that is the best match for the specified world coordinates.
Gets the index of the item that resides at the provided world coordinates.
For a category plotted series, returns the current width of the items within the categories. This only returns a value if the items have some form of width (e.g. columns, bars, etc.) otherwise 0 is returned.
let span: number = this.series.getItemSpan();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});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});Removes all alternate views of this series.
Removes an alternate view of this series.
Call to null out the axes of the series;
Renders the series.
this.series.renderSeries(true);Replays the assigned transition in animation, if any.
this.series.replayTransitionIn();Gets the brush for tooltip labels.
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.
Simulates a pointer hover over the series surface.
When tooltips are enabled, simulateHover can be used to automatically display the tooltip over a particular series item.
this.series.simulateHover({x:250,y:250});Called when this series' Style is updated.
Gets the actual opacity applied to the area fill visual.
let actualFillOpacity: number = series.actualAreaFillOpacity;