Class IgxPointSeriesComponent

Hierarchy

Implements

  • OnInit

Constructors

Accessors

Methods

Constructors

constructor

Accessors

actualAreaFillOpacity

  • get actualAreaFillOpacity(): number
  • set actualAreaFillOpacity(v: number): void
  • Gets the actual opacity applied to the area fill visual.

    let actualFillOpacity: number = series.actualAreaFillOpacity;

    Returns number

  • Gets the actual opacity applied to the area fill visual.

    let actualFillOpacity: number = series.actualAreaFillOpacity;

    Parameters

    • v: number

    Returns void

actualBrush

  • get actualBrush(): string
  • set actualBrush(v: string): void
  • Gets the effective brush for the current series object.

    let actualBrush: string = series.actualBrush;

    Returns string

  • Gets the effective brush for the current series object.

    let actualBrush: string = series.actualBrush;

    Parameters

    • v: string

    Returns void

actualHitTestMode

  • Resolved method of hit testing to use when pointing to items in the chart.

    let hitTestMode: SeriesHitTestMode = this.series.actualHitTestMode;

    Returns SeriesHitTestMode

  • Resolved method of hit testing to use when pointing to items in the chart.

    let hitTestMode: SeriesHitTestMode = this.series.actualHitTestMode;

    Parameters

    Returns void

actualMarkerBrush

  • get actualMarkerBrush(): string
  • set actualMarkerBrush(v: string): void
  • 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;
    

    Returns string

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

    Parameters

    • v: string

    Returns void

actualMarkerOutline

  • get actualMarkerOutline(): string
  • set actualMarkerOutline(v: string): void
  • 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;
    

    Returns string

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

    Parameters

    • v: string

    Returns void

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;

    Returns IgDataTemplate

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

    Parameters

    Returns void

actualOutline

  • get actualOutline(): string
  • set actualOutline(v: string): void
  • Gets the effective outline for the current series object.

    let actualOutline: string = series.ActualOutline;

    Returns string

  • Gets the effective outline for the current series object.

    let actualOutline: string = series.ActualOutline;

    Parameters

    • v: string

    Returns void

actualTrendLineBrush

  • get actualTrendLineBrush(): string
  • set actualTrendLineBrush(v: string): void
  • Gets the effective TrendLineBrush for this series.

    The actualTrendLineBrush property is used to gets the effective trendLineBrush for this series.

    Returns string

  • Gets the effective TrendLineBrush for this series.

    The actualTrendLineBrush property is used to gets the effective trendLineBrush for this series.

    Parameters

    • v: string

    Returns void

areaFillOpacity

  • get areaFillOpacity(): number
  • set areaFillOpacity(v: number): void
  • 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>

    Returns number

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

    Parameters

    • v: number

    Returns void

assigningCategoryMarkerStyle

  • get assigningCategoryMarkerStyle(): EventEmitter<object>

assigningCategoryStyle

  • get assigningCategoryStyle(): EventEmitter<object>

brush

  • get brush(): string
  • set brush(v: string): void
  • 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";

    Returns string

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

    Parameters

    • v: string

    Returns void

coercionMethods

  • get coercionMethods(): any
  • set coercionMethods(v: any): void
  • 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;}
     }

    Returns any

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

    Parameters

    • v: any

    Returns void

consolidatedItemHitTestBehavior

  • Determines the item returned in hit-testing when the pointer is over an object which represents several consolidated items.

    The consolidatedItemHitTestBehavior property is used to determines returned item in hit-testing when the pointer is over an object which represents several consolidated items.

    Returns ConsolidatedItemHitTestBehavior

  • Determines the item returned in hit-testing when the pointer is over an object which represents several consolidated items.

    The consolidatedItemHitTestBehavior property is used to determines returned item in hit-testing when the pointer is over an object which represents several consolidated items.

    Parameters

    Returns void

dataSource

  • get dataSource(): any
  • set dataSource(value: any): void

discreteLegendItemTemplate

  • 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

    Returns IgDataTemplate

  • 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

    Parameters

    Returns void

expectFunctions

  • get expectFunctions(): boolean
  • set expectFunctions(v: boolean): void
  • 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>

    Returns boolean

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

    Parameters

    • v: boolean

    Returns void

finalValue

  • get finalValue(): number
  • set finalValue(v: number): void
  • The final value of this series.

    Returns number

  • The final value of this series.

    Parameters

    • v: number

    Returns void

hasMarkers

  • get hasMarkers(): boolean
  • 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;

    Returns boolean

hitTestMode

  • 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 encoded
    this.series.hitTestMode = SeriesHitTestMode.Computational;

    Returns SeriesHitTestMode

  • 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 encoded
    this.series.hitTestMode = SeriesHitTestMode.Computational;

    Parameters

    Returns void

isAnnotationLayer

  • get isAnnotationLayer(): boolean
  • Gets whether the series is an annotation layer.

    let isAnnotationLayer: boolean = this.series.isAnnotationLayer;

    Returns boolean

isAreaOrLine

  • get isAreaOrLine(): boolean
  • Gets whether the current series shows an area or line shape.

    let isAreaorLine: boolean = this.series.isAreaorLine;

    Returns boolean

isCategory

  • get isCategory(): boolean

isCustomCategoryMarkerStyleAllowed

  • get isCustomCategoryMarkerStyleAllowed(): boolean
  • set isCustomCategoryMarkerStyleAllowed(v: boolean): void

isCustomCategoryStyleAllowed

  • get isCustomCategoryStyleAllowed(): boolean
  • set isCustomCategoryStyleAllowed(v: boolean): void

isDefaultCrosshairBehaviorDisabled

  • get isDefaultCrosshairBehaviorDisabled(): boolean
  • 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;

    Returns boolean

isDefaultToolTipSelected

  • get isDefaultToolTipSelected(): boolean
  • set isDefaultToolTipSelected(v: boolean): void
  • 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;

    Returns boolean

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

    Parameters

    • v: boolean

    Returns void

isDefaultTooltipBehaviorDisabled

  • get isDefaultTooltipBehaviorDisabled(): boolean
  • Gets whether the default tooltip behavior should be disabled if this series is present.

     let isDefaultTooltipBehaviorDisabled: boolean = this.series.isDefaultTooltipBehaviorDisabled;

    Returns boolean

isDropShadowEnabled

  • get isDropShadowEnabled(): boolean
  • set isDropShadowEnabled(v: boolean): void
  • 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;

    Returns boolean

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

    Parameters

    • v: boolean

    Returns void

isFinancial

  • get isFinancial(): boolean
  • Gets whether the current series is a financial type series.

    let isFinancial: boolean = this.series.isFinancial;

    Returns boolean

isFragment

  • get isFragment(): boolean
  • Gets whether the current series is a stack fragment.

    let isFragment: boolean = this.series.isFragment;

    Returns boolean

isGeographic

  • get isGeographic(): boolean
  • Gets whether the current seires is a geogrpahic series.

    let isGeographic: boolean = this.series.isGeographic;

    Returns boolean

isHighlightingEnabled

  • get isHighlightingEnabled(): boolean
  • set isHighlightingEnabled(v: boolean): void
  • 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;

    Returns boolean

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

    Parameters

    • v: boolean

    Returns void

isIndexed

  • get isIndexed(): boolean
  • Gets if the series uses an index, which can be used to auto-assign it a color.

    let isIndexed: boolean = this.series.isIndexed;

    Returns boolean

isMarkerlessDisplayPreferred

  • get isMarkerlessDisplayPreferred(): boolean

isNegativeColorSupported

  • get isNegativeColorSupported(): boolean
  • Overridden by derived series classes to indicate when negative colors are supported or not.

    Returns boolean

isPolar

  • get isPolar(): boolean
  • Gets whether the current series is a polar type series.

    let isPolar: boolean = this.series.isPolar;

    Returns boolean

isRadial

  • get isRadial(): boolean
  • Gets whether the current series is a radial type series.

    let isRadial: boolean = this.series.isRadial;

    Returns boolean

isRange

  • get isRange(): boolean
  • Gets whether the current series is a range type series.

    let isRange: boolean = this.series.isRange;

    Returns boolean

isScatter

  • get isScatter(): boolean
  • Gets whether the current series is a scatter type series.

    let isScatter: boolean = this.series.isScatter;

    Returns boolean

isShape

  • get isShape(): boolean
  • Gets whether the current series is a shape type series.

    Returns boolean

isStacked

  • get isStacked(): boolean
  • Gets whether the current series is a stacked type series.

    let isStacked: boolean = this.series.isStacked;

    Returns boolean

isTransitionInEnabled

  • get isTransitionInEnabled(): boolean
  • set isTransitionInEnabled(v: boolean): void
  • 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);

    Returns boolean

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

    Parameters

    • v: boolean

    Returns void

isUsableInLegend

  • get isUsableInLegend(): boolean
  • Gets if the series should appear in any legends.

    let isUsableInLegend: boolean = this.series.isUsableInLegend;

    Returns boolean

isValueOverlay

  • get isValueOverlay(): boolean
  • Gets whether the series is a value overlay.

    Returns boolean

isVertical

  • get isVertical(): boolean
  • Gets whether the current series is oriented vertically.

    let isVertical: boolean = this.series.isVertical;

    Returns boolean

legendItemBadgeTemplate

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

    Returns IgDataTemplate

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

    Parameters

    Returns void

legendItemTemplate

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

    Returns IgDataTemplate

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

    Parameters

    Returns void

legendItemVisibility

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

    Returns Visibility

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

    Parameters

    Returns void

markerBrush

  • get markerBrush(): string
  • set markerBrush(v: string): void
  • 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";

    Returns string

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

    Parameters

    • v: string

    Returns void

markerCollisionAvoidance

  • The desired behavior for markers in this series which are placed too close together for the current view, resulting in a collision.

    The markerCollisionAvoidance property controls the technique the chart uses to avoid overlapping markers.

    <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"
            markerCollisionAvoidance= "fade"
            >
        </igx-column-series>
    </igx-data-chart>

    Returns CategorySeriesMarkerCollisionAvoidance

  • The desired behavior for markers in this series which are placed too close together for the current view, resulting in a collision.

    The markerCollisionAvoidance property controls the technique the chart uses to avoid overlapping markers.

    <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"
            markerCollisionAvoidance= "fade"
            >
        </igx-column-series>
    </igx-data-chart>

    Parameters

    Returns void

markerOutline

  • get markerOutline(): string
  • set markerOutline(v: string): void
  • 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";

    Returns string

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

    Parameters

    • v: string

    Returns void

markerTemplate

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

    Returns IgDataTemplate

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

    Parameters

    Returns void

markerType

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

    Returns MarkerType

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

    Parameters

    Returns void

mouseOverEnabled

  • get mouseOverEnabled(): boolean
  • set mouseOverEnabled(v: boolean): void
  • Gets or sets the whether the chart reacts to mouse move events.

    Returns boolean

  • Gets or sets the whether the chart reacts to mouse move events.

    Parameters

    • v: boolean

    Returns void

name

  • get name(): string
  • set name(value: string): void
  • Returns string

  • Parameters

    • value: string

    Returns void

outline

  • get outline(): string
  • set outline(v: string): void
  • 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";

    Returns string

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

    Parameters

    • v: string

    Returns void

percentChange

  • get percentChange(): number
  • set percentChange(v: number): void
  • The percent change from the beginning to the end of this series.

    Returns number

  • The percent change from the beginning to the end of this series.

    Parameters

    • v: number

    Returns void

renderRequested

  • get renderRequested(): EventEmitter<object>
  • This event is raised every time a render has been requested from a series.

    Returns EventEmitter<object>

resolution

  • get resolution(): number
  • set resolution(v: number): void
  • 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;

    Returns number

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

    Parameters

    • v: number

    Returns void

seriesInternal

  • get seriesInternal(): any

shadowBlur

  • get shadowBlur(): number
  • set shadowBlur(v: number): void
  • 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;

    Returns number

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

    Parameters

    • v: number

    Returns void

shadowColor

  • get shadowColor(): string
  • set shadowColor(v: string): void
  • 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";

    Returns string

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

    Parameters

    • v: string

    Returns void

shadowOffsetX

  • get shadowOffsetX(): number
  • set shadowOffsetX(v: number): void
  • 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;

    Returns number

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

    Parameters

    • v: number

    Returns void

shadowOffsetY

  • get shadowOffsetY(): number
  • set shadowOffsetY(v: number): void
  • 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;

    Returns number

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

    Parameters

    • v: number

    Returns void

showDefaultTooltip

  • get showDefaultTooltip(): boolean
  • set showDefaultTooltip(v: boolean): void
  • 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>

    Returns boolean

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

    Parameters

    • v: boolean

    Returns void

thickness

  • get thickness(): number
  • set thickness(v: number): void
  • 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;

    Returns number

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

    Parameters

    • v: number

    Returns void

title

  • get title(): any
  • set title(v: any): void
  • 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";

    Returns any

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

    Parameters

    • v: any

    Returns void

tooltipContainerTemplate

  • get tooltipContainerTemplate(): TemplateRef<any>
  • set tooltipContainerTemplate(value: TemplateRef<any>): void

tooltipTemplate

  • get tooltipTemplate(): TemplateRef<any>
  • set tooltipTemplate(value: TemplateRef<any>): void

transitionDuration

  • get transitionDuration(): number
  • set transitionDuration(v: number): void
  • 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;

    Returns number

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

    Parameters

    • v: number

    Returns void

transitionEasingFunction

  • get transitionEasingFunction(): function
  • set transitionEasingFunction(v: function): void
  • 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;

    Returns function

      • (time: number): number
      • Parameters

        • time: number

        Returns number

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

    Parameters

    • v: function
        • (time: number): number
        • Parameters

          • time: number

          Returns number

    Returns void

transitionInDuration

  • get transitionInDuration(): number
  • set transitionInDuration(v: number): void
  • 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;

    Returns number

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

    Parameters

    • v: number

    Returns void

transitionInEasingFunction

  • get transitionInEasingFunction(): function
  • set transitionInEasingFunction(v: function): void
  • 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;

    Returns function

      • (time: number): number
      • Parameters

        • time: number

        Returns number

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

    Parameters

    • v: function
        • (time: number): number
        • Parameters

          • time: number

          Returns number

    Returns void

transitionInMode

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

    Returns CategoryTransitionInMode

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

    Parameters

    Returns void

transitionInSpeedType

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

    Returns TransitionInSpeedType

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

    Parameters

    Returns void

trendLineBrush

  • get trendLineBrush(): string
  • set trendLineBrush(v: string): void
  • Gets or sets the brush to use to draw the trend line.

    The trendLineBrush property is used to brush the trend line.

    <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"
            trendLineBrush= "grey"    >
        </igx-column-series>
    </igx-data-chart>
    series.trendLineBrush="red";

    Returns string

  • Gets or sets the brush to use to draw the trend line.

    The trendLineBrush property is used to brush the trend line.

    <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"
            trendLineBrush= "grey"    >
        </igx-column-series>
    </igx-data-chart>
    series.trendLineBrush="red";

    Parameters

    • v: string

    Returns void

trendLinePeriod

  • get trendLinePeriod(): number
  • set trendLinePeriod(v: number): void
  • Gets or sets the trend line period for the current series. The typical, and initial, value for trend line period is 7.

    The trendLinePeriod property is used for trend line period of the current 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-column-series
            [xAxis]="xAxis"
            [yAxis]="yAxis"
            valueMemberPath="value"
            markerType="circle"
            trendLinePeriod: "7">
        </igx-column-series>
    </igx-data-chart>
    series.trendLinePeriod= 7;

    Returns number

  • Gets or sets the trend line period for the current series. The typical, and initial, value for trend line period is 7.

    The trendLinePeriod property is used for trend line period of the current 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-column-series
            [xAxis]="xAxis"
            [yAxis]="yAxis"
            valueMemberPath="value"
            markerType="circle"
            trendLinePeriod: "7">
        </igx-column-series>
    </igx-data-chart>
    series.trendLinePeriod= 7;

    Parameters

    • v: number

    Returns void

trendLineThickness

  • get trendLineThickness(): number
  • set trendLineThickness(v: number): void
  • Gets or sets the thickness of the current series object's trend line.

    The trendLineThickness property is used for thickness of the current series object's trend line.

    <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"
            trendLineThickness= 2  >
        </igx-column-series>
    </igx-data-chart>
    series.trendLineThickness= 2;

    Returns number

  • Gets or sets the thickness of the current series object's trend line.

    The trendLineThickness property is used for thickness of the current series object's trend line.

    <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"
            trendLineThickness= 2  >
        </igx-column-series>
    </igx-data-chart>
    series.trendLineThickness= 2;

    Parameters

    • v: number

    Returns void

trendLineType

  • Gets or sets the trend type for the current series object.

    The trendLineType property is used for the current series object's trend type.'

    <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"
            trendLineType="simpleAverage" >
        </igx-column-series>
    </igx-data-chart>
    series.trendLineType= "CubicFit";

    Returns TrendLineType

  • Gets or sets the trend type for the current series object.

    The trendLineType property is used for the current series object's trend type.'

    <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"
            trendLineType="simpleAverage" >
        </igx-column-series>
    </igx-data-chart>
    series.trendLineType= "CubicFit";

    Parameters

    Returns void

useHighMarkerFidelity

  • get useHighMarkerFidelity(): boolean
  • set useHighMarkerFidelity(v: boolean): void
  • 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);

    Returns boolean

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

    Parameters

    • v: boolean

    Returns void

useSingleShadow

  • get useSingleShadow(): boolean
  • set useSingleShadow(v: boolean): void
  • 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;

    Returns boolean

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

    Parameters

    • v: boolean

    Returns void

valueMemberPath

  • get valueMemberPath(): string
  • set valueMemberPath(v: string): void
  • Gets or sets the value mapping property for the current series object.

    The valueMemberPath property is used for the value mapping property of the current series object.

    <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" >
        </igx-column-series>
    </igx-data-chart>

    Returns string

  • Gets or sets the value mapping property for the current series object.

    The valueMemberPath property is used for the value mapping property of the current series object.

    <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" >
        </igx-column-series>
    </igx-data-chart>

    Parameters

    • v: string

    Returns void

xAxis

yAxis

Methods

bindAxes

canUseAsXAxis

  • canUseAsXAxis(axis: any): boolean
  • Determine if object can be used as XAxis

    Parameters

    • axis: any
      • The object to check

      You can use the canUseAsXAxis method to determine if object can be used as XAxis

       var x = this.financialSeries.CanUseAsXAxis(this.xAxis);
       N/A

    Returns boolean

canUseAsYAxis

  • canUseAsYAxis(axis: any): boolean
  • Determine if object can be used as YAxis

    Parameters

    • axis: any
      • The object to check

      You can use the canUseAsYAxis method to determine if object can be used as YAxis

       N/A

    Returns boolean

fromWorldPosition

  • Converts a point from world coordinates to coordinates within the viewport of the series.

    Parameters

    • world: IgPoint
      • The world position from which to convert.
      let pt: IgxPoint = this.series.fromWorldPosition({x:.5,y:.5});

    Returns IgPoint

getCategoryWidth

  • getCategoryWidth(): number

getEffectiveViewport

  • getEffectiveViewport(): IgRect

getExactItemIndex

  • getExactItemIndex(world: IgPoint): number
  • 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.

    Parameters

    • world: IgPoint
      • The world position for which to return the index.

    Returns number

getItem

  • Gets the item that is the best match for the specified world coordinates.

    Parameters

    • world: IgPoint
      • The world coordinates to use.

      The getItem method is used to gets the item that is the best match for the specified world coordinates.

      let item: number = this.series.getItem({x:.5,y:.5});

    Returns any

getItemIndex

  • getItemIndex(world: IgPoint): number

getItemSpan

  • getItemSpan(): number
  • 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();

    Returns number

getItemValue

  • getItemValue(item: any, memberPathName: string): any

getNextOrExactIndex

  • getNextOrExactIndex(world: IgPoint, skipUnknowns: boolean): number

getOffsetValue

  • getOffsetValue(): number

getPreviousOrExactIndex

  • getPreviousOrExactIndex(world: IgPoint, skipUnknowns: boolean): number

getSeriesHighValue

  • getSeriesHighValue(world: IgPoint, useInterpolation: boolean, skipUnknowns: boolean): number

getSeriesHighValuePosition

  • getSeriesHighValuePosition(world: IgPoint, useInterpolation: boolean, skipUnknowns: boolean): IgPoint

getSeriesLowValue

  • getSeriesLowValue(world: IgPoint, useInterpolation: boolean, skipUnknowns: boolean): number

getSeriesLowValuePosition

  • getSeriesLowValuePosition(world: IgPoint, useInterpolation: boolean, skipUnknowns: boolean): IgPoint

getSeriesValue

  • getSeriesValue(world: IgPoint, useInterpolation: boolean, skipUnknowns: boolean): number

getSeriesValueBoundingBox

  • If possible, will return the best available value bounding box within the series that has the best value match for the world position provided.

    Parameters

    • world: IgPoint
      • The world coordinate for which to get a value bounding box for
      let box: IgxRect = this.series.getSeriesValueBoundingBox({x:.8,y:.8});

    Returns IgRect

getSeriesValueFromSeriesPixel

  • getSeriesValueFromSeriesPixel(mouse: IgPoint, useInterpolation: boolean, skipUnknowns: boolean): number

getSeriesValueMarkerBoundingBox

getSeriesValuePosition

  • getSeriesValuePosition(world: IgPoint, useInterpolation: boolean, skipUnknowns: boolean): IgPoint

getSeriesValuePositionFromSeriesPixel

  • getSeriesValuePositionFromSeriesPixel(mouse: IgPoint, useInterpolation: boolean, skipUnknowns: boolean): IgPoint

moveCursorPoint

  • moveCursorPoint(point: IgPoint): void
  • Moves the cursor point to the provided world position. Some series may react to the current cursor position.

    Parameters

    • point: IgPoint
      • The cursor point, in world coordinates.

      moveCursorPoint can be used on annotation layers to programitically show the annotation at the given point.

      this.crosshair.moveCursorPoint({x:.5,y:.5});

    Returns void

ngOnInit

  • ngOnInit(): void

provideData

  • provideData(data: any[]): void

removeAllAlternateViews

  • removeAllAlternateViews(): void

removeAlternateView

  • removeAlternateView(viewIdentifier: string): void
  • Removes an alternate view of this series.

    Parameters

    • viewIdentifier: string
      • The string identifier for the view to remove.

    Returns void

removeAxes

  • removeAxes(): void
  • Call to null out the axes of the series;

    Returns void

renderSeries

  • renderSeries(animate: boolean): void
  • Renders the series.

    Parameters

    • animate: boolean
      • True if the change should be animated.
      this.series.renderSeries(true);

    Returns void

replayTransitionIn

  • replayTransitionIn(): void
  • Replays the assigned transition in animation, if any.

    this.series.replayTransitionIn();

    Returns void

resolveTooltipBrush

  • resolveTooltipBrush(): string

scrollIntoView

  • scrollIntoView(item: any): boolean
  • 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.

    Parameters

    • item: any
      • The data item (item) to scroll to.

      The scrollIntoView method is used to notifies the target axis or series that it should scroll the requested data item into view.

      this.series.scrollIntoView(dataItem);

    Returns boolean

setNegativeColors

  • setNegativeColors(negativeBrush: string, negativeOutline: string): void
  • Parameters

    • negativeBrush: string
    • negativeOutline: string

    Returns void

simulateHover

  • simulateHover(point: IgPoint): void
  • Simulates a pointer hover over the series surface.

    Parameters

    • point: IgPoint
      • The pointer position relative to the series viewport over which to hover.

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

    Returns void

styleUpdated

  • styleUpdated(): void
  • Called when this series' Style is updated.

    Returns void

toWorldPosition

  • Converts a point from coordinates within the series plot area to a world position within axis space.

    Parameters

    • seriesPoint: IgPoint
      • The pixel location within the plot area of the series.
      this.series.toWorldPosition({x:500,y:500});

    Returns IgPoint

Static _createFromInternal