Represents a chart with an ordinal X-axis and a numeric Y-axis.

Ignite UI for Angular Financial Chart - Documentation

The Ignite UI Financial Chart is a lightweight, highly performant chart. It can be easily configured to display category data using an extremely simple and intuitive API. It offers multiple ways for the user to visualize data, including several display modes for price and volume, and many financial indicators.

<igx-financial-chart [dataSource]="data"
width="850px" height="600px">
</igx-financial-chart>

Hierarchy

Hierarchy

Implements

  • AfterViewInit
  • OnDestroy

Constructors

Properties

Accessors

Methods

Constructors

  • Parameters

    • renderer: Renderer2
    • _elRef: ViewContainerRef
    • ngZone: NgZone
    • injector: Injector
    • componentFactoryResolver: ComponentFactoryResolver

    Returns IgxFinancialChartComponent

Properties

_dynamicContent: ViewContainerRef
_mainElement: ElementRef<any>
_templates: QueryList<IgxTemplateContentComponent>
_toolbarElement: ElementRef<any>
chartTemplate: TemplateRef<any>
chartTypePickerTemplate: TemplateRef<any>
container: Element
indicatorMenuTemplate: TemplateRef<any>
rangeSelectorTemplate: TemplateRef<any>
toolbarTemplate: TemplateRef<any>
ngAcceptInputType_actualBrushes: string | string[]
ngAcceptInputType_actualOutlines: string | string[]
ngAcceptInputType_alignsGridLinesToPixels: string | boolean
ngAcceptInputType_animateSeriesWhenAxisRangeChanges: string | boolean
ngAcceptInputType_areaFillOpacity: string | number
ngAcceptInputType_autoCalloutsVisible: string | boolean
ngAcceptInputType_bottomMargin: string | number
ngAcceptInputType_brushes: string | string[]
ngAcceptInputType_calloutStyleUpdatingEventEnabled: string | boolean
ngAcceptInputType_calloutsAllowedPositions: string | IgxCalloutPlacementPositionsCollection
ngAcceptInputType_calloutsVisible: string | boolean
ngAcceptInputType_chartType: string | FinancialChartType
ngAcceptInputType_computedPlotAreaMarginMode: string | ComputedPlotAreaMarginMode
ngAcceptInputType_crosshairsAnnotationEnabled: string | boolean
ngAcceptInputType_crosshairsAnnotationXAxisPrecision: string | number
ngAcceptInputType_crosshairsAnnotationYAxisPrecision: string | number
ngAcceptInputType_crosshairsDisplayMode: string | CrosshairsDisplayMode
ngAcceptInputType_crosshairsLineThickness: string | number
ngAcceptInputType_crosshairsSnapToData: string | boolean
ngAcceptInputType_customIndicatorNames: string | IgxCustomIndicatorNameCollection
ngAcceptInputType_dataToolTipBadgeMarginBottom: string | number
ngAcceptInputType_dataToolTipBadgeMarginLeft: string | number
ngAcceptInputType_dataToolTipBadgeMarginRight: string | number
ngAcceptInputType_dataToolTipBadgeMarginTop: string | number
ngAcceptInputType_dataToolTipBadgeShape: string | LegendItemBadgeShape
ngAcceptInputType_dataToolTipDefaultPositionOffsetX: string | number
ngAcceptInputType_dataToolTipDefaultPositionOffsetY: string | number
ngAcceptInputType_dataToolTipExcludedColumns: string | string[]
ngAcceptInputType_dataToolTipExcludedSeries: string | string[]
ngAcceptInputType_dataToolTipGroupedPositionModeX: string | DataTooltipGroupedPositionX
ngAcceptInputType_dataToolTipGroupedPositionModeY: string | DataTooltipGroupedPositionY
ngAcceptInputType_dataToolTipGroupingMode: string | DataToolTipLayerGroupingMode
ngAcceptInputType_dataToolTipHeaderFormatDate: string | DataLegendHeaderDateMode
ngAcceptInputType_dataToolTipHeaderFormatSpecifiers: string | any[]
ngAcceptInputType_dataToolTipHeaderFormatTime: string | DataLegendHeaderTimeMode
ngAcceptInputType_dataToolTipHeaderRowMarginBottom: string | number
ngAcceptInputType_dataToolTipHeaderRowMarginLeft: string | number
ngAcceptInputType_dataToolTipHeaderRowMarginRight: string | number
ngAcceptInputType_dataToolTipHeaderRowMarginTop: string | number
ngAcceptInputType_dataToolTipHeaderRowVisible: string | boolean
ngAcceptInputType_dataToolTipHeaderTextMarginBottom: string | number
ngAcceptInputType_dataToolTipHeaderTextMarginLeft: string | number
ngAcceptInputType_dataToolTipHeaderTextMarginRight: string | number
ngAcceptInputType_dataToolTipHeaderTextMarginTop: string | number
ngAcceptInputType_dataToolTipIncludedColumns: string | string[]
ngAcceptInputType_dataToolTipIncludedSeries: string | string[]
ngAcceptInputType_dataToolTipLabelDisplayMode: string | DataLegendLabelMode
ngAcceptInputType_dataToolTipLabelTextMarginBottom: string | number
ngAcceptInputType_dataToolTipLabelTextMarginLeft: string | number
ngAcceptInputType_dataToolTipLabelTextMarginRight: string | number
ngAcceptInputType_dataToolTipLabelTextMarginTop: string | number
ngAcceptInputType_dataToolTipPositionOffsetX: string | number
ngAcceptInputType_dataToolTipPositionOffsetY: string | number
ngAcceptInputType_dataToolTipShouldUpdateWhenSeriesDataChanges: string | boolean
ngAcceptInputType_dataToolTipSummaryRowMarginBottom: string | number
ngAcceptInputType_dataToolTipSummaryRowMarginLeft: string | number
ngAcceptInputType_dataToolTipSummaryRowMarginRight: string | number
ngAcceptInputType_dataToolTipSummaryRowMarginTop: string | number
ngAcceptInputType_dataToolTipSummaryTitleTextMarginBottom: string | number
ngAcceptInputType_dataToolTipSummaryTitleTextMarginLeft: string | number
ngAcceptInputType_dataToolTipSummaryTitleTextMarginRight: string | number
ngAcceptInputType_dataToolTipSummaryTitleTextMarginTop: string | number
ngAcceptInputType_dataToolTipSummaryType: string | DataLegendSummaryType
ngAcceptInputType_dataToolTipTitleTextMarginBottom: string | number
ngAcceptInputType_dataToolTipTitleTextMarginLeft: string | number
ngAcceptInputType_dataToolTipTitleTextMarginRight: string | number
ngAcceptInputType_dataToolTipTitleTextMarginTop: string | number
ngAcceptInputType_dataToolTipUnitsDisplayMode: string | DataLegendUnitsMode
ngAcceptInputType_dataToolTipUnitsTextMarginBottom: string | number
ngAcceptInputType_dataToolTipUnitsTextMarginLeft: string | number
ngAcceptInputType_dataToolTipUnitsTextMarginRight: string | number
ngAcceptInputType_dataToolTipUnitsTextMarginTop: string | number
ngAcceptInputType_dataToolTipValueFormatAbbreviation: string | DataAbbreviationMode
ngAcceptInputType_dataToolTipValueFormatMaxFractions: string | number
ngAcceptInputType_dataToolTipValueFormatMinFractions: string | number
ngAcceptInputType_dataToolTipValueFormatMode: string | DataLegendValueMode
ngAcceptInputType_dataToolTipValueFormatSpecifiers: string | any[]
ngAcceptInputType_dataToolTipValueFormatUseGrouping: string | boolean
ngAcceptInputType_dataToolTipValueRowMarginBottom: string | number
ngAcceptInputType_dataToolTipValueRowMarginLeft: string | number
ngAcceptInputType_dataToolTipValueRowMarginRight: string | number
ngAcceptInputType_dataToolTipValueRowMarginTop: string | number
ngAcceptInputType_dataToolTipValueRowVisible: string | boolean
ngAcceptInputType_dataToolTipValueTextMarginBottom: string | number
ngAcceptInputType_dataToolTipValueTextMarginLeft: string | number
ngAcceptInputType_dataToolTipValueTextMarginRight: string | number
ngAcceptInputType_dataToolTipValueTextMarginTop: string | number
ngAcceptInputType_dataToolTipValueTextUseSeriesColors: string | boolean
ngAcceptInputType_domainType: string | DomainType
ngAcceptInputType_excludedProperties: string | string[]
ngAcceptInputType_finalValueAnnotationsPrecision: string | number
ngAcceptInputType_finalValueAnnotationsVisible: string | boolean
ngAcceptInputType_highlightingBehavior: string | SeriesHighlightingBehavior
ngAcceptInputType_highlightingMode: string | SeriesHighlightingMode
ngAcceptInputType_horizontalViewScrollbarCornerRadius: string | number
ngAcceptInputType_horizontalViewScrollbarHeight: string | number
ngAcceptInputType_horizontalViewScrollbarInset: string | number
ngAcceptInputType_horizontalViewScrollbarMaxOpacity: string | number
ngAcceptInputType_horizontalViewScrollbarMode: string | SeriesViewerScrollbarMode
ngAcceptInputType_horizontalViewScrollbarPosition: string | SeriesViewerHorizontalScrollbarPosition
ngAcceptInputType_horizontalViewScrollbarShouldAddAutoTrackInsets: string | boolean
ngAcceptInputType_horizontalViewScrollbarStrokeThickness: string | number
ngAcceptInputType_horizontalViewScrollbarTrackEndInset: string | number
ngAcceptInputType_horizontalViewScrollbarTrackStartInset: string | number
ngAcceptInputType_includedProperties: string | string[]
ngAcceptInputType_indicatorBrushes: string | string[]
ngAcceptInputType_indicatorDisplayTypes: string | IgxIndicatorDisplayTypeCollection
ngAcceptInputType_indicatorLongPeriod: string | number
ngAcceptInputType_indicatorMultiplier: string | number
ngAcceptInputType_indicatorNegativeBrushes: string | string[]
ngAcceptInputType_indicatorPeriod: string | number
ngAcceptInputType_indicatorShortPeriod: string | number
ngAcceptInputType_indicatorSignalPeriod: string | number
ngAcceptInputType_indicatorSmoothingPeriod: string | number
ngAcceptInputType_indicatorThickness: string | number
ngAcceptInputType_indicatorTypes: string | IgxFinancialIndicatorTypeCollection
ngAcceptInputType_isHorizontalZoomEnabled: string | boolean
ngAcceptInputType_isLegendVisible: string | boolean
ngAcceptInputType_isSeriesHighlightingEnabled: string | boolean
ngAcceptInputType_isToolbarVisible: string | boolean
ngAcceptInputType_isVerticalZoomEnabled: string | boolean
ngAcceptInputType_isWindowSyncedToVisibleRange: string | boolean
ngAcceptInputType_leftMargin: string | number
ngAcceptInputType_legendHighlightingMode: string | LegendHighlightingMode
ngAcceptInputType_legendItemBadgeMode: string | LegendItemBadgeMode
ngAcceptInputType_legendItemBadgeShape: string | LegendItemBadgeShape
ngAcceptInputType_markerAutomaticBehavior: string | MarkerAutomaticBehavior
ngAcceptInputType_markerBrushes: string | string[]
ngAcceptInputType_markerFillMode: string | MarkerFillMode
ngAcceptInputType_markerFillOpacity: string | number
ngAcceptInputType_markerMaxCount: string | number
ngAcceptInputType_markerOutlineMode: string | MarkerOutlineMode
ngAcceptInputType_markerOutlines: string | string[]
ngAcceptInputType_markerThickness: string | number
ngAcceptInputType_markerTypes: string | IgxMarkerTypeCollection
ngAcceptInputType_negativeBrushes: string | string[]
ngAcceptInputType_negativeOutlines: string | string[]
ngAcceptInputType_outlineMode: string | SeriesOutlineMode
ngAcceptInputType_outlines: string | string[]
ngAcceptInputType_overlayBrushes: string | string[]
ngAcceptInputType_overlayMultiplier: string | number
ngAcceptInputType_overlayOutlines: string | string[]
ngAcceptInputType_overlayThickness: string | number
ngAcceptInputType_overlayTypes: string | IgxFinancialOverlayTypeCollection
ngAcceptInputType_pixelScalingRatio: string | number
ngAcceptInputType_plotAreaMarginBottom: string | number
ngAcceptInputType_plotAreaMarginLeft: string | number
ngAcceptInputType_plotAreaMarginRight: string | number
ngAcceptInputType_plotAreaMarginTop: string | number
ngAcceptInputType_rangeSelectorOptions: string | IgxFinancialChartRangeSelectorOptionCollection
ngAcceptInputType_resolution: string | number
ngAcceptInputType_rightMargin: string | number
ngAcceptInputType_seriesPlotAreaMarginHorizontalMode: string | SeriesPlotAreaMarginHorizontalMode
ngAcceptInputType_seriesPlotAreaMarginVerticalMode: string | SeriesPlotAreaMarginVerticalMode
ngAcceptInputType_shouldAvoidAxisAnnotationCollisions: string | boolean
ngAcceptInputType_shouldDisplayMockData: string | boolean
ngAcceptInputType_shouldPanOnMaximumZoom: string | boolean
ngAcceptInputType_shouldUseSkeletonStyleForMockData: string | boolean
ngAcceptInputType_subtitleAlignment: string | HorizontalAlignment
ngAcceptInputType_subtitleBottomMargin: string | number
ngAcceptInputType_subtitleLeftMargin: string | number
ngAcceptInputType_subtitleRightMargin: string | number
ngAcceptInputType_subtitleTopMargin: string | number
ngAcceptInputType_thickness: string | number
ngAcceptInputType_titleAlignment: string | HorizontalAlignment
ngAcceptInputType_titleBottomMargin: string | number
ngAcceptInputType_titleLeftMargin: string | number
ngAcceptInputType_titleRightMargin: string | number
ngAcceptInputType_titleTopMargin: string | number
ngAcceptInputType_toolTipType: string | ToolTipType
ngAcceptInputType_toolbarHeight: string | number
ngAcceptInputType_topMargin: string | number
ngAcceptInputType_transitionDuration: string | number
ngAcceptInputType_trendLineBrushes: string | string[]
ngAcceptInputType_trendLinePeriod: string | number
ngAcceptInputType_trendLineThickness: string | number
ngAcceptInputType_trendLineType: string | TrendLineType
ngAcceptInputType_unknownValuePlotting: string | UnknownValuePlotting
ngAcceptInputType_valueLines: string | IgxValueModeCollection
ngAcceptInputType_valueLinesBrushes: string | string[]
ngAcceptInputType_valueLinesThickness: string | number
ngAcceptInputType_verticalViewScrollbarCornerRadius: string | number
ngAcceptInputType_verticalViewScrollbarInset: string | number
ngAcceptInputType_verticalViewScrollbarMaxOpacity: string | number
ngAcceptInputType_verticalViewScrollbarMode: string | SeriesViewerScrollbarMode
ngAcceptInputType_verticalViewScrollbarPosition: string | SeriesViewerVerticalScrollbarPosition
ngAcceptInputType_verticalViewScrollbarShouldAddAutoTrackInsets: string | boolean
ngAcceptInputType_verticalViewScrollbarStrokeThickness: string | number
ngAcceptInputType_verticalViewScrollbarTrackEndInset: string | number
ngAcceptInputType_verticalViewScrollbarTrackStartInset: string | number
ngAcceptInputType_verticalViewScrollbarWidth: string | number
ngAcceptInputType_viewport: string | IgRect
ngAcceptInputType_volumeBrushes: string | string[]
ngAcceptInputType_volumeOutlines: string | string[]
ngAcceptInputType_volumeThickness: string | number
ngAcceptInputType_volumeType: string | FinancialChartVolumeType
ngAcceptInputType_windowRect: string | IgRect
ngAcceptInputType_windowRectMinHeight: string | number
ngAcceptInputType_windowRectMinWidth: string | number
ngAcceptInputType_windowSizeMinHeight: string | number
ngAcceptInputType_windowSizeMinWidth: string | number
ngAcceptInputType_xAxisEnhancedIntervalPreferMoreCategoryLabels: string | boolean
ngAcceptInputType_xAxisExtent: string | number
ngAcceptInputType_xAxisInverted: string | boolean
ngAcceptInputType_xAxisLabelAngle: string | number
ngAcceptInputType_xAxisLabelBottomMargin: string | number
ngAcceptInputType_xAxisLabelFormatSpecifiers: string | any[]
ngAcceptInputType_xAxisLabelHorizontalAlignment: string | HorizontalAlignment
ngAcceptInputType_xAxisLabelLeftMargin: string | number
ngAcceptInputType_xAxisLabelLocation: string | XAxisLabelLocation
ngAcceptInputType_xAxisLabelRightMargin: string | number
ngAcceptInputType_xAxisLabelTopMargin: string | number
ngAcceptInputType_xAxisLabelVerticalAlignment: string | VerticalAlignment
ngAcceptInputType_xAxisLabelVisibility: string | Visibility
ngAcceptInputType_xAxisMajorStrokeThickness: string | number
ngAcceptInputType_xAxisMinorStrokeThickness: string | number
ngAcceptInputType_xAxisMode: string | FinancialChartXAxisMode
ngAcceptInputType_xAxisStrokeThickness: string | number
ngAcceptInputType_xAxisTickLength: string | number
ngAcceptInputType_xAxisTickStrokeThickness: string | number
ngAcceptInputType_xAxisTitleAlignment: string | HorizontalAlignment
ngAcceptInputType_xAxisTitleAngle: string | number
ngAcceptInputType_xAxisTitleBottomMargin: string | number
ngAcceptInputType_xAxisTitleLeftMargin: string | number
ngAcceptInputType_xAxisTitleMargin: string | number
ngAcceptInputType_xAxisTitleRightMargin: string | number
ngAcceptInputType_xAxisTitleTopMargin: string | number
ngAcceptInputType_xAxisZoomMaximumCategoryRange: string | number
ngAcceptInputType_xAxisZoomMaximumItemSpan: string | number
ngAcceptInputType_xAxisZoomToCategoryRange: string | number
ngAcceptInputType_xAxisZoomToCategoryStart: string | number
ngAcceptInputType_xAxisZoomToItemSpan: string | number
ngAcceptInputType_yAxisAbbreviateLargeNumbers: string | boolean
ngAcceptInputType_yAxisActualMaximum: string | number
ngAcceptInputType_yAxisActualMinimum: string | number
ngAcceptInputType_yAxisEnhancedIntervalPreferMoreCategoryLabels: string | boolean
ngAcceptInputType_yAxisExtent: string | number
ngAcceptInputType_yAxisInterval: string | number
ngAcceptInputType_yAxisInverted: string | boolean
ngAcceptInputType_yAxisIsLogarithmic: string | boolean
ngAcceptInputType_yAxisLabelAngle: string | number
ngAcceptInputType_yAxisLabelBottomMargin: string | number
ngAcceptInputType_yAxisLabelFormatSpecifiers: string | any[]
ngAcceptInputType_yAxisLabelHorizontalAlignment: string | HorizontalAlignment
ngAcceptInputType_yAxisLabelLeftMargin: string | number
ngAcceptInputType_yAxisLabelLocation: string | YAxisLabelLocation
ngAcceptInputType_yAxisLabelRightMargin: string | number
ngAcceptInputType_yAxisLabelTopMargin: string | number
ngAcceptInputType_yAxisLabelVerticalAlignment: string | VerticalAlignment
ngAcceptInputType_yAxisLabelVisibility: string | Visibility
ngAcceptInputType_yAxisLogarithmBase: string | number
ngAcceptInputType_yAxisMajorStrokeThickness: string | number
ngAcceptInputType_yAxisMaximumValue: string | number
ngAcceptInputType_yAxisMinimumValue: string | number
ngAcceptInputType_yAxisMinorInterval: string | number
ngAcceptInputType_yAxisMinorStrokeThickness: string | number
ngAcceptInputType_yAxisMode: string | FinancialChartYAxisMode
ngAcceptInputType_yAxisStrokeThickness: string | number
ngAcceptInputType_yAxisTickLength: string | number
ngAcceptInputType_yAxisTickStrokeThickness: string | number
ngAcceptInputType_yAxisTitleAlignment: string | VerticalAlignment
ngAcceptInputType_yAxisTitleAngle: string | number
ngAcceptInputType_yAxisTitleBottomMargin: string | number
ngAcceptInputType_yAxisTitleLeftMargin: string | number
ngAcceptInputType_yAxisTitleMargin: string | number
ngAcceptInputType_yAxisTitleRightMargin: string | number
ngAcceptInputType_yAxisTitleTopMargin: string | number
ngAcceptInputType_zoomSliderType: string | FinancialChartZoomSliderType
ngAcceptInputType_zoomSliderXAxisMajorStrokeThickness: string | number
ɵcmp: unknown
ɵfac: unknown

Accessors

  • get actualBrushes(): string[]
  • Gets the actual palette of brushes to use for coloring the chart series.

    Returns string[]

  • set actualBrushes(v: string[]): void
  • Parameters

    • v: string[]

    Returns void

  • get actualOutlines(): string[]
  • Gets the actual palette of brushes to use for outlines on the chart series.

    Returns string[]

  • set actualOutlines(v: string[]): void
  • Parameters

    • v: string[]

    Returns void

  • get actualXAxisLabelTextColor(): string
  • Gets the actual color of labels on the X-axis

    Returns string

  • set actualXAxisLabelTextColor(v: string): void
  • Parameters

    • v: string

    Returns void

  • get actualYAxisLabelTextColor(): string
  • Gets the actual color of labels on the Y-axis

    Returns string

  • set actualYAxisLabelTextColor(v: string): void
  • Parameters

    • v: string

    Returns void

  • get alignsGridLinesToPixels(): boolean
  • Gets or sets a value indicating whether grid and tick lines are aligned to device pixels.

    Use AlignsGridLinesToPixels propert to indicat whether grid and tick lines are aligned to device pixels.

    <igx-category-chart
    [dataSource]="data"
    AlignsGridLinesToPixels="true">
    </igx-category-chart>
     this.chart.alignsGridLinesToPixels= true;
    

    Returns boolean

  • set alignsGridLinesToPixels(v: boolean): void
  • Parameters

    • v: boolean

    Returns void

  • get animateSeriesWhenAxisRangeChanges(): boolean
  • Gets or sets whether the series animations should be allowed when a range change has been detected on an axis.

    Returns boolean

  • set animateSeriesWhenAxisRangeChanges(v: boolean): void
  • Parameters

    • v: boolean

    Returns void

  • get applyCustomIndicators(): EventEmitter<{
        args: IgxFinancialChartCustomIndicatorArgs;
        sender: any;
    }>
  • Event raised by the chart when custom indicator data is needed from the application. During series rendering, event will be raised once for each value in the CustomIndicatorNames collection.

    Returns EventEmitter<{
        args: IgxFinancialChartCustomIndicatorArgs;
        sender: any;
    }>

  • get areaFillOpacity(): number
  • Gets or sets the fill opacity for all series that have area visuals in this chart. For example, Area, SplineArea, Column chart types

    Returns number

  • set areaFillOpacity(v: number): void
  • Parameters

    • v: number

    Returns void

  • get autoCalloutsVisible(): boolean
  • Gets or sets if the auto value callouts should be displayed.

    Returns boolean

  • set autoCalloutsVisible(v: boolean): void
  • Parameters

    • v: boolean

    Returns void

  • get bottomMargin(): number
  • Gets or sets the bottom margin around the chart content.

    Use the bottomMargin property for the bottom margin around the chart content.

    <igx-category-chart
    yAxisMinimumValue="0"
    [dataSource]="data"
    bottomMargin= 20>
    </igx-category-chart>
    this.chart.bottomMargin=20;
    

    Returns number

  • set bottomMargin(v: number): void
  • Parameters

    • v: number

    Returns void

  • get brushes(): string[]
  • Gets or sets the palette of brushes to use for coloring the chart series. The value provided should be an array of CSS color strings or JavaScript objects defining gradients. Optionally the first element can be a string reading "RGB" or "HSV" to specify the interpolation mode of the collection

    Use the Brushes property to set the brushes.

     <igx-category-chart
    yAxisMinimumValue="0"
    [dataSource]="data"
    Brushes="#ff0000, #cc0000, #aa0000">
    </igx-category-chart>
    this.chart.brushes = ["#ff0000","#00ff00"];
    

    Returns string[]

  • set brushes(v: string[]): void
  • Parameters

    • v: string[]

    Returns void

  • get calloutRenderStyleUpdating(): EventEmitter<{
        args: IgxCalloutRenderStyleUpdatingEventArgs;
        sender: any;
    }>
  • Occurs when the style of a callout is updated.

    Returns EventEmitter<{
        args: IgxCalloutRenderStyleUpdatingEventArgs;
        sender: any;
    }>

  • get calloutStyleUpdating(): EventEmitter<{
        args: IgxCalloutStyleUpdatingEventArgs;
        sender: any;
    }>
  • Occurs when the style of a callout is updated.

    Returns EventEmitter<{
        args: IgxCalloutStyleUpdatingEventArgs;
        sender: any;
    }>

  • get calloutStyleUpdatingEventEnabled(): boolean
  • Gets or sets if event annotations should be displayed.

    Returns boolean

  • set calloutStyleUpdatingEventEnabled(v: boolean): void
  • Parameters

    • v: boolean

    Returns void

  • get calloutsContentMemberPath(): string
  • Gets or sets the member path of the content data for the callouts.

    Returns string

  • set calloutsContentMemberPath(v: string): void
  • Parameters

    • v: string

    Returns void

  • get calloutsDataSource(): any[]
  • Returns any[]

  • set calloutsDataSource(value: any[]): void
  • Parameters

    • value: any[]

    Returns void

  • get calloutsLabelMemberPath(): string
  • Gets or sets the member path of the label data for the callouts.

    Returns string

  • set calloutsLabelMemberPath(v: string): void
  • Parameters

    • v: string

    Returns void

  • get calloutsVisible(): boolean
  • Gets or sets if callouts should be displayed.

    Returns boolean

  • set calloutsVisible(v: boolean): void
  • Parameters

    • v: boolean

    Returns void

  • get calloutsXMemberPath(): string
  • Gets or sets the member path of the X data for the callouts.

    Returns string

  • set calloutsXMemberPath(v: string): void
  • Parameters

    • v: string

    Returns void

  • get calloutsYMemberPath(): string
  • Gets or sets the member path of the Y data for the callouts.

    Returns string

  • set calloutsYMemberPath(v: string): void
  • Parameters

    • v: string

    Returns void

  • get chartTitle(): string
  • Gets or sets text to display above the plot area.

    Use the Title property to display the text above the plot area.

    <igx-category-chart
    yAxisMinimumValue="0"
    [dataSource]="data"
    title="This is a Title">
    </igx-category-chart>
     this.chart.title= "This is a Title";
    

    Returns string

  • set chartTitle(v: string): void
  • Parameters

    • v: string

    Returns void

  • get chartType(): FinancialChartType
  • The type of price series to display in the main chart.

    Use the ChartType property to set a type of series that will be used to render prices in the Financial Chart control, e.g.

    <igx-financial-chart
    [dataSource]="data"
    chartType="Candle">
    </igx-financial-chart>

    Returns FinancialChartType

  • set chartType(v: FinancialChartType): void
  • Parameters

    Returns void

  • get computedPlotAreaMarginMode(): ComputedPlotAreaMarginMode
  • Gets or sets mode to use for automatically calculating the plot area margin.

    Returns ComputedPlotAreaMarginMode

  • set computedPlotAreaMarginMode(v: ComputedPlotAreaMarginMode): void
  • Parameters

    Returns void

  • get crosshairsAnnotationEnabled(): boolean
  • Gets or sets whether annotations are shown along the axis for crosshair values

    Returns boolean

  • set crosshairsAnnotationEnabled(v: boolean): void
  • Parameters

    • v: boolean

    Returns void

  • get crosshairsAnnotationXAxisBackground(): string
  • Gets or sets the background of crosshair annotation on x-axis.

    Returns string

  • set crosshairsAnnotationXAxisBackground(v: string): void
  • Parameters

    • v: string

    Returns void

  • get crosshairsAnnotationXAxisPrecision(): number
  • Gets or sets precision on interpolated values of crosshairs on x-axis.

    Returns number

  • set crosshairsAnnotationXAxisPrecision(v: number): void
  • Parameters

    • v: number

    Returns void

  • get crosshairsAnnotationXAxisTextColor(): string
  • Gets or sets the text color of crosshair annotation on x-axis.

    Returns string

  • set crosshairsAnnotationXAxisTextColor(v: string): void
  • Parameters

    • v: string

    Returns void

  • get crosshairsAnnotationYAxisBackground(): string
  • Gets or sets the background of crosshair annotation on y-axis.

    Returns string

  • set crosshairsAnnotationYAxisBackground(v: string): void
  • Parameters

    • v: string

    Returns void

  • get crosshairsAnnotationYAxisPrecision(): number
  • Gets or sets precision on interpolated values of crosshairs on y-axis.

    Returns number

  • set crosshairsAnnotationYAxisPrecision(v: number): void
  • Parameters

    • v: number

    Returns void

  • get crosshairsAnnotationYAxisTextColor(): string
  • Gets or sets the text color of crosshair annotation on y-axis.

    Returns string

  • set crosshairsAnnotationYAxisTextColor(v: string): void
  • Parameters

    • v: string

    Returns void

  • get crosshairsDisplayMode(): CrosshairsDisplayMode
  • Gets or sets the crosshairs to be displayed.

    Returns CrosshairsDisplayMode

  • set crosshairsDisplayMode(v: CrosshairsDisplayMode): void
  • Parameters

    Returns void

  • get crosshairsLineHorizontalStroke(): string
  • Gets or sets the color to apply to horizontal crosshairs line.

    Returns string

  • set crosshairsLineHorizontalStroke(v: string): void
  • Parameters

    • v: string

    Returns void

  • get crosshairsLineThickness(): number
  • Gets or sets thickness of crosshairs lines.

    Returns number

  • set crosshairsLineThickness(v: number): void
  • Parameters

    • v: number

    Returns void

  • get crosshairsLineVerticalStroke(): string
  • Gets or sets the color to apply to vertical crosshairs line.

    Returns string

  • set crosshairsLineVerticalStroke(v: string): void
  • Parameters

    • v: string

    Returns void

  • get crosshairsSnapToData(): boolean
  • Gets or sets whether crosshairs will snap to the nearest data point.

    Returns boolean

  • set crosshairsSnapToData(v: boolean): void
  • Parameters

    • v: boolean

    Returns void

  • get dataSource(): any[]
  • Returns any[]

  • set dataSource(value: any[]): void
  • Parameters

    • value: any[]

    Returns void

  • get dataToolTipBadgeMarginBottom(): number
  • Returns number

  • set dataToolTipBadgeMarginBottom(v: number): void
  • Parameters

    • v: number

    Returns void

  • get dataToolTipBadgeMarginLeft(): number
  • Returns number

  • set dataToolTipBadgeMarginLeft(v: number): void
  • Parameters

    • v: number

    Returns void

  • get dataToolTipBadgeMarginRight(): number
  • Returns number

  • set dataToolTipBadgeMarginRight(v: number): void
  • Parameters

    • v: number

    Returns void

  • get dataToolTipBadgeMarginTop(): number
  • Returns number

  • set dataToolTipBadgeMarginTop(v: number): void
  • Parameters

    • v: number

    Returns void

  • get dataToolTipBadgeShape(): LegendItemBadgeShape
  • Gets or sets the BadgeShape for the data legend.

    Returns LegendItemBadgeShape

  • set dataToolTipBadgeShape(v: LegendItemBadgeShape): void
  • Parameters

    Returns void

  • get dataToolTipDefaultPositionOffsetX(): number
  • Gets or sets the offset of the tooltip layer on the X axis.

    Returns number

  • set dataToolTipDefaultPositionOffsetX(v: number): void
  • Parameters

    • v: number

    Returns void

  • get dataToolTipDefaultPositionOffsetY(): number
  • Gets or sets the offset of the tooltip layer on the Y axis.

    Returns number

  • set dataToolTipDefaultPositionOffsetY(v: number): void
  • Parameters

    • v: number

    Returns void

  • get dataToolTipExcludedColumns(): string[]
  • Gets or sets names of data columns or their labels to exclude from displaying in the data legend, e.g. "High, Low" or "H, L" The ExcludedColumns property takes precedences over values of IncludedColumns property

    Returns string[]

  • set dataToolTipExcludedColumns(v: string[]): void
  • Parameters

    • v: string[]

    Returns void

  • get dataToolTipExcludedSeries(): string[]
  • Gets or sets indexes or names of series to exclude from displaying in the data legend, e.g. "0, 1" The ExcludedSeries property takes precedences over values of IncludedSeries property

    Returns string[]

  • set dataToolTipExcludedSeries(v: string[]): void
  • Parameters

    • v: string[]

    Returns void

  • get dataToolTipGroupedPositionModeX(): DataTooltipGroupedPositionX
  • Gets or sets the tooltip position mode on the X axis for grouped series.

    Returns DataTooltipGroupedPositionX

  • set dataToolTipGroupedPositionModeX(v: DataTooltipGroupedPositionX): void
  • Parameters

    Returns void

  • get dataToolTipGroupedPositionModeY(): DataTooltipGroupedPositionY
  • Gets or sets the tooltip position mode on the Y axis for grouped series.

    Returns DataTooltipGroupedPositionY

  • set dataToolTipGroupedPositionModeY(v: DataTooltipGroupedPositionY): void
  • Parameters

    Returns void

  • get dataToolTipHeaderFormatCulture(): string
  • Gets or sets globalization culture when displaying header as date time This property is ignored when setting HeaderFormatSpecifiers or HeaderFormatString properties

    Returns string

  • set dataToolTipHeaderFormatCulture(v: string): void
  • Parameters

    • v: string

    Returns void

  • get dataToolTipHeaderFormatDate(): DataLegendHeaderDateMode
  • Gets or sets date format for the header This property is ignored when setting HeaderFormatSpecifiers or HeaderFormatString properties

    Returns DataLegendHeaderDateMode

  • set dataToolTipHeaderFormatDate(v: DataLegendHeaderDateMode): void
  • Parameters

    Returns void

  • get dataToolTipHeaderFormatSpecifiers(): any[]
  • Gets or sets the format specifiers to use with the HeaderFormatString string.

    Returns any[]

  • set dataToolTipHeaderFormatSpecifiers(v: any[]): void
  • Parameters

    • v: any[]

    Returns void

  • get dataToolTipHeaderFormatString(): string
  • Gets or sets the format string for header text displayed in the data legend.

    Returns string

  • set dataToolTipHeaderFormatString(v: string): void
  • Parameters

    • v: string

    Returns void

  • get dataToolTipHeaderFormatTime(): DataLegendHeaderTimeMode
  • Gets or sets time format for the header This property is ignored when setting HeaderFormatSpecifiers or HeaderFormatString properties

    Returns DataLegendHeaderTimeMode

  • set dataToolTipHeaderFormatTime(v: DataLegendHeaderTimeMode): void
  • Parameters

    Returns void

  • get dataToolTipHeaderRowMarginBottom(): number
  • Returns number

  • set dataToolTipHeaderRowMarginBottom(v: number): void
  • Parameters

    • v: number

    Returns void

  • get dataToolTipHeaderRowMarginLeft(): number
  • Returns number

  • set dataToolTipHeaderRowMarginLeft(v: number): void
  • Parameters

    • v: number

    Returns void

  • get dataToolTipHeaderRowMarginRight(): number
  • Returns number

  • set dataToolTipHeaderRowMarginRight(v: number): void
  • Parameters

    • v: number

    Returns void

  • get dataToolTipHeaderRowMarginTop(): number
  • Returns number

  • set dataToolTipHeaderRowMarginTop(v: number): void
  • Parameters

    • v: number

    Returns void

  • get dataToolTipHeaderRowVisible(): boolean
  • Gets or sets whether to show Header row.

    Returns boolean

  • set dataToolTipHeaderRowVisible(v: boolean): void
  • Parameters

    • v: boolean

    Returns void

  • get dataToolTipHeaderText(): string
  • Gets or sets the HeaderText for the data legend.

    Returns string

  • set dataToolTipHeaderText(v: string): void
  • Parameters

    • v: string

    Returns void

  • get dataToolTipHeaderTextColor(): string
  • Gets or sets the header text color.

    Returns string

  • set dataToolTipHeaderTextColor(v: string): void
  • Parameters

    • v: string

    Returns void

  • get dataToolTipHeaderTextMarginBottom(): number
  • Returns number

  • set dataToolTipHeaderTextMarginBottom(v: number): void
  • Parameters

    • v: number

    Returns void

  • get dataToolTipHeaderTextMarginLeft(): number
  • Returns number

  • set dataToolTipHeaderTextMarginLeft(v: number): void
  • Parameters

    • v: number

    Returns void

  • get dataToolTipHeaderTextMarginRight(): number
  • Returns number

  • set dataToolTipHeaderTextMarginRight(v: number): void
  • Parameters

    • v: number

    Returns void

  • get dataToolTipHeaderTextMarginTop(): number
  • Returns number

  • set dataToolTipHeaderTextMarginTop(v: number): void
  • Parameters

    • v: number

    Returns void

  • get dataToolTipHeaderTextStyle(): string
  • Gets or Sets the style to use for the header text.

    Returns string

  • set dataToolTipHeaderTextStyle(v: string): void
  • Parameters

    • v: string

    Returns void

  • get dataToolTipIncludedColumns(): string[]
  • Gets or sets names of data columns or their labels to include in displaying in the data legend, e.g. "High, Low" or "H, L" The ExcludedColumns property takes precedences over values of IncludedColumns property

    Returns string[]

  • set dataToolTipIncludedColumns(v: string[]): void
  • Parameters

    • v: string[]

    Returns void

  • get dataToolTipIncludedSeries(): string[]
  • Gets or sets indexes or names of series to include in displaying in the data legend, e.g. "0, 1"

    Returns string[]

  • set dataToolTipIncludedSeries(v: string[]): void
  • Parameters

    • v: string[]

    Returns void

  • get dataToolTipLabelDisplayMode(): DataLegendLabelMode
  • Gets or sets the mode for displaying labels before series values in the data legend, e.g. O: H: L: C: for financial series

    Returns DataLegendLabelMode

  • set dataToolTipLabelDisplayMode(v: DataLegendLabelMode): void
  • Parameters

    Returns void

  • get dataToolTipLabelTextColor(): string
  • Gets or sets the units text color.

    Returns string

  • set dataToolTipLabelTextColor(v: string): void
  • Parameters

    • v: string

    Returns void

  • get dataToolTipLabelTextMarginBottom(): number
  • Returns number

  • set dataToolTipLabelTextMarginBottom(v: number): void
  • Parameters

    • v: number

    Returns void

  • get dataToolTipLabelTextMarginLeft(): number
  • Returns number

  • set dataToolTipLabelTextMarginLeft(v: number): void
  • Parameters

    • v: number

    Returns void

  • get dataToolTipLabelTextMarginRight(): number
  • Returns number

  • set dataToolTipLabelTextMarginRight(v: number): void
  • Parameters

    • v: number

    Returns void

  • get dataToolTipLabelTextMarginTop(): number
  • Returns number

  • set dataToolTipLabelTextMarginTop(v: number): void
  • Parameters

    • v: number

    Returns void

  • get dataToolTipLabelTextStyle(): string
  • Gets or Sets the style to use for the units text.

    Returns string

  • set dataToolTipLabelTextStyle(v: string): void
  • Parameters

    • v: string

    Returns void

  • get dataToolTipPositionOffsetX(): number
  • Gets or sets the offset of the tooltip layer on the X axis.

    Returns number

  • set dataToolTipPositionOffsetX(v: number): void
  • Parameters

    • v: number

    Returns void

  • get dataToolTipPositionOffsetY(): number
  • Gets or sets the offset of the tooltip layer on the Y axis.

    Returns number

  • set dataToolTipPositionOffsetY(v: number): void
  • Parameters

    • v: number

    Returns void

  • get dataToolTipShouldUpdateWhenSeriesDataChanges(): boolean
  • Gets or sets whether the data legend should update when the series data is mutated.

    Returns boolean

  • set dataToolTipShouldUpdateWhenSeriesDataChanges(v: boolean): void
  • Parameters

    • v: boolean

    Returns void

  • get dataToolTipSummaryLabelText(): string
  • Gets or sets the units text for the data legend.

    Returns string

  • set dataToolTipSummaryLabelText(v: string): void
  • Parameters

    • v: string

    Returns void

  • get dataToolTipSummaryLabelTextColor(): string
  • Gets or sets the units text color.

    Returns string

  • set dataToolTipSummaryLabelTextColor(v: string): void
  • Parameters

    • v: string

    Returns void

  • get dataToolTipSummaryLabelTextStyle(): string
  • Gets or Sets the style to use for the units text.

    Returns string

  • set dataToolTipSummaryLabelTextStyle(v: string): void
  • Parameters

    • v: string

    Returns void

  • get dataToolTipSummaryRowMarginBottom(): number
  • Returns number

  • set dataToolTipSummaryRowMarginBottom(v: number): void
  • Parameters

    • v: number

    Returns void

  • get dataToolTipSummaryRowMarginLeft(): number
  • Returns number

  • set dataToolTipSummaryRowMarginLeft(v: number): void
  • Parameters

    • v: number

    Returns void

  • get dataToolTipSummaryRowMarginRight(): number
  • Returns number

  • set dataToolTipSummaryRowMarginRight(v: number): void
  • Parameters

    • v: number

    Returns void

  • get dataToolTipSummaryRowMarginTop(): number
  • Returns number

  • set dataToolTipSummaryRowMarginTop(v: number): void
  • Parameters

    • v: number

    Returns void

  • get dataToolTipSummaryTitleText(): string
  • Gets or sets the SummaryTitleText for the data legend.

    Returns string

  • set dataToolTipSummaryTitleText(v: string): void
  • Parameters

    • v: string

    Returns void

  • get dataToolTipSummaryTitleTextColor(): string
  • Gets or sets the summary text color.

    Returns string

  • set dataToolTipSummaryTitleTextColor(v: string): void
  • Parameters

    • v: string

    Returns void

  • get dataToolTipSummaryTitleTextMarginBottom(): number
  • Returns number

  • set dataToolTipSummaryTitleTextMarginBottom(v: number): void
  • Parameters

    • v: number

    Returns void

  • get dataToolTipSummaryTitleTextMarginLeft(): number
  • Returns number

  • set dataToolTipSummaryTitleTextMarginLeft(v: number): void
  • Parameters

    • v: number

    Returns void

  • get dataToolTipSummaryTitleTextMarginRight(): number
  • Returns number

  • set dataToolTipSummaryTitleTextMarginRight(v: number): void
  • Parameters

    • v: number

    Returns void

  • get dataToolTipSummaryTitleTextMarginTop(): number
  • Returns number

  • set dataToolTipSummaryTitleTextMarginTop(v: number): void
  • Parameters

    • v: number

    Returns void

  • get dataToolTipSummaryTitleTextStyle(): string
  • Gets or Sets the style to use for the summary text.

    Returns string

  • set dataToolTipSummaryTitleTextStyle(v: string): void
  • Parameters

    • v: string

    Returns void

  • get dataToolTipSummaryType(): DataLegendSummaryType
  • Gets or sets the SummaryType for the data legend.

    Returns DataLegendSummaryType

  • set dataToolTipSummaryType(v: DataLegendSummaryType): void
  • Parameters

    Returns void

  • get dataToolTipSummaryUnitsText(): string
  • Gets or sets the units text for the data legend.

    Returns string

  • set dataToolTipSummaryUnitsText(v: string): void
  • Parameters

    • v: string

    Returns void

  • get dataToolTipSummaryUnitsTextColor(): string
  • Gets or sets the units text color.

    Returns string

  • set dataToolTipSummaryUnitsTextColor(v: string): void
  • Parameters

    • v: string

    Returns void

  • get dataToolTipSummaryUnitsTextStyle(): string
  • Gets or Sets the style to use for the units text.

    Returns string

  • set dataToolTipSummaryUnitsTextStyle(v: string): void
  • Parameters

    • v: string

    Returns void

  • get dataToolTipSummaryValueTextColor(): string
  • Gets or sets the units text color.

    Returns string

  • set dataToolTipSummaryValueTextColor(v: string): void
  • Parameters

    • v: string

    Returns void

  • get dataToolTipSummaryValueTextStyle(): string
  • Gets or Sets the style to use for the units text.

    Returns string

  • set dataToolTipSummaryValueTextStyle(v: string): void
  • Parameters

    • v: string

    Returns void

  • get dataToolTipTitleTextColor(): string
  • Gets or sets the display text color.

    Returns string

  • set dataToolTipTitleTextColor(v: string): void
  • Parameters

    • v: string

    Returns void

  • get dataToolTipTitleTextMarginBottom(): number
  • Returns number

  • set dataToolTipTitleTextMarginBottom(v: number): void
  • Parameters

    • v: number

    Returns void

  • get dataToolTipTitleTextMarginLeft(): number
  • Returns number

  • set dataToolTipTitleTextMarginLeft(v: number): void
  • Parameters

    • v: number

    Returns void

  • get dataToolTipTitleTextMarginRight(): number
  • Returns number

  • set dataToolTipTitleTextMarginRight(v: number): void
  • Parameters

    • v: number

    Returns void

  • get dataToolTipTitleTextMarginTop(): number
  • Returns number

  • set dataToolTipTitleTextMarginTop(v: number): void
  • Parameters

    • v: number

    Returns void

  • get dataToolTipTitleTextStyle(): string
  • Gets or Sets the style to use for the display text.

    Returns string

  • set dataToolTipTitleTextStyle(v: string): void
  • Parameters

    • v: string

    Returns void

  • get dataToolTipUnitsDisplayMode(): DataLegendUnitsMode
  • Gets or sets the UnitsMode for the data legend.

    Returns DataLegendUnitsMode

  • set dataToolTipUnitsDisplayMode(v: DataLegendUnitsMode): void
  • Parameters

    Returns void

  • get dataToolTipUnitsText(): string
  • Gets or sets the units text for the data legend.

    Returns string

  • set dataToolTipUnitsText(v: string): void
  • Parameters

    • v: string

    Returns void

  • get dataToolTipUnitsTextColor(): string
  • Gets or sets the units text color.

    Returns string

  • set dataToolTipUnitsTextColor(v: string): void
  • Parameters

    • v: string

    Returns void

  • get dataToolTipUnitsTextMarginBottom(): number
  • Returns number

  • set dataToolTipUnitsTextMarginBottom(v: number): void
  • Parameters

    • v: number

    Returns void

  • get dataToolTipUnitsTextMarginLeft(): number
  • Returns number

  • set dataToolTipUnitsTextMarginLeft(v: number): void
  • Parameters

    • v: number

    Returns void

  • get dataToolTipUnitsTextMarginRight(): number
  • Returns number

  • set dataToolTipUnitsTextMarginRight(v: number): void
  • Parameters

    • v: number

    Returns void

  • get dataToolTipUnitsTextMarginTop(): number
  • Returns number

  • set dataToolTipUnitsTextMarginTop(v: number): void
  • Parameters

    • v: number

    Returns void

  • get dataToolTipUnitsTextStyle(): string
  • Gets or Sets the style to use for the units text.

    Returns string

  • set dataToolTipUnitsTextStyle(v: string): void
  • Parameters

    • v: string

    Returns void

  • get dataToolTipValueFormatAbbreviation(): DataAbbreviationMode
  • Gets or sets mode for abbreviating large numbers displayed in the legend This property is ignored when setting ValueFormatSpecifiers or ValueFormatString properties

    Returns DataAbbreviationMode

  • set dataToolTipValueFormatAbbreviation(v: DataAbbreviationMode): void
  • Parameters

    Returns void

  • get dataToolTipValueFormatCulture(): string
  • Gets or sets globalization culture when displaying values as currencies, e.g. use "en-GB" to display British pound symbol when the ValueFormatMode property is set to 'Currency' mode This property is ignored when setting ValueFormatSpecifiers or ValueFormatString properties

    Returns string

  • set dataToolTipValueFormatCulture(v: string): void
  • Parameters

    • v: string

    Returns void

  • get dataToolTipValueFormatMaxFractions(): number
  • Gets or sets maximum digits for formating numbers displayed in the legend This property is ignored when setting ValueFormatSpecifiers or ValueFormatString properties

    Returns number

  • set dataToolTipValueFormatMaxFractions(v: number): void
  • Parameters

    • v: number

    Returns void

  • get dataToolTipValueFormatMinFractions(): number
  • Gets or sets minimum digits for formating numbers displayed in the legend This property is ignored when setting ValueFormatSpecifiers or ValueFormatString properties

    Returns number

  • set dataToolTipValueFormatMinFractions(v: number): void
  • Parameters

    • v: number

    Returns void

  • get dataToolTipValueFormatMode(): DataLegendValueMode
  • Gets or sets the mode for displaying values in the data legend, e.g. Currency ($500.25), Decimal (500.25), Integer (500)

    Returns DataLegendValueMode

  • set dataToolTipValueFormatMode(v: DataLegendValueMode): void
  • Parameters

    Returns void

  • get dataToolTipValueFormatSpecifiers(): any[]
  • Gets or sets the format specifiers to use with the ValueFormatString string.

    Returns any[]

  • set dataToolTipValueFormatSpecifiers(v: any[]): void
  • Parameters

    • v: any[]

    Returns void

  • get dataToolTipValueFormatString(): string
  • Gets or sets the format string for values displayed in the data legend.

    Returns string

  • set dataToolTipValueFormatString(v: string): void
  • Parameters

    • v: string

    Returns void

  • get dataToolTipValueFormatUseGrouping(): boolean
  • Gets or sets whether or not use grouping separator, e.g, 15,000 for 15000 This property is ignored when setting ValueFormatSpecifiers or ValueFormatString properties

    Returns boolean

  • set dataToolTipValueFormatUseGrouping(v: boolean): void
  • Parameters

    • v: boolean

    Returns void

  • get dataToolTipValueRowMarginBottom(): number
  • Returns number

  • set dataToolTipValueRowMarginBottom(v: number): void
  • Parameters

    • v: number

    Returns void

  • get dataToolTipValueRowMarginLeft(): number
  • Returns number

  • set dataToolTipValueRowMarginLeft(v: number): void
  • Parameters

    • v: number

    Returns void

  • get dataToolTipValueRowMarginRight(): number
  • Returns number

  • set dataToolTipValueRowMarginRight(v: number): void
  • Parameters

    • v: number

    Returns void

  • get dataToolTipValueRowMarginTop(): number
  • Returns number

  • set dataToolTipValueRowMarginTop(v: number): void
  • Parameters

    • v: number

    Returns void

  • get dataToolTipValueRowVisible(): boolean
  • Gets or sets whether to show series rows.

    Returns boolean

  • set dataToolTipValueRowVisible(v: boolean): void
  • Parameters

    • v: boolean

    Returns void

  • get dataToolTipValueTextColor(): string
  • Gets or sets the units text color.

    Returns string

  • set dataToolTipValueTextColor(v: string): void
  • Parameters

    • v: string

    Returns void

  • get dataToolTipValueTextMarginBottom(): number
  • Returns number

  • set dataToolTipValueTextMarginBottom(v: number): void
  • Parameters

    • v: number

    Returns void

  • get dataToolTipValueTextMarginLeft(): number
  • Returns number

  • set dataToolTipValueTextMarginLeft(v: number): void
  • Parameters

    • v: number

    Returns void

  • get dataToolTipValueTextMarginRight(): number
  • Returns number

  • set dataToolTipValueTextMarginRight(v: number): void
  • Parameters

    • v: number

    Returns void

  • get dataToolTipValueTextMarginTop(): number
  • Returns number

  • set dataToolTipValueTextMarginTop(v: number): void
  • Parameters

    • v: number

    Returns void

  • get dataToolTipValueTextStyle(): string
  • Gets or Sets the style to use for the units text.

    Returns string

  • set dataToolTipValueTextStyle(v: string): void
  • Parameters

    • v: string

    Returns void

  • get dataToolTipValueTextUseSeriesColors(): boolean
  • Gets or sets whether to use series colors when displaying values in the legend

    Returns boolean

  • set dataToolTipValueTextUseSeriesColors(v: boolean): void
  • Parameters

    • v: boolean

    Returns void

  • get dataToolTipValueTextWhenMissingData(): string
  • Gets or sets text displayed when data column is missing a value, e.g. "no data"

    Returns string

  • set dataToolTipValueTextWhenMissingData(v: string): void
  • Parameters

    • v: string

    Returns void

  • get domainType(): DomainType
  • Gets domain type of this chart

    Returns DomainType

  • get excludedProperties(): string[]
  • Gets or sets a set of property paths that should be excluded from consideration by the category chart.

    The ExcludedProperties property used for the property paths that should be excluded from consideration by the category chart.

    <igx-category-chart
    yAxisMinimumValue="0"
    [dataSource]="data"
    excludedProperties="ID">
    </igx-category-chart>
    this.chart.excludedProperties = ["ID", "Discount"];
    

    Returns string[]

  • set excludedProperties(v: string[]): void
  • Parameters

    • v: string[]

    Returns void

  • get filterExpressions(): IgxFilterExpressionCollection
  • Gets the current filter that is applied to the grid. Collection can be updated to modify the filter for the grid. Once filter expresisons are in this collection, the grid will no longer listen for changes on their properties.

    Returns IgxFilterExpressionCollection

  • get finalValueAnnotationsBackground(): string
  • Gets or sets the background of final value annotation.

    Returns string

  • set finalValueAnnotationsBackground(v: string): void
  • Parameters

    • v: string

    Returns void

  • get finalValueAnnotationsPrecision(): number
  • Gets or sets precision on final value annotation.

    Returns number

  • set finalValueAnnotationsPrecision(v: number): void
  • Parameters

    • v: number

    Returns void

  • get finalValueAnnotationsTextColor(): string
  • Gets or sets the text color of final value annotation.

    Returns string

  • set finalValueAnnotationsTextColor(v: string): void
  • Parameters

    • v: string

    Returns void

  • get finalValueAnnotationsVisible(): boolean
  • Gets or sets whether annotations for the final value of each series is displayed on the axis.

    Returns boolean

  • set finalValueAnnotationsVisible(v: boolean): void
  • Parameters

    • v: boolean

    Returns void

  • get groupDescriptions(): IgxChartSortDescriptionCollection
  • Gets the current grouping that is applied to the grid. Collection can be updated to modify the grouping for the grid. Once grouping descriptions are in this collection, the grid will no longer listen for changes on their properties.

    Returns IgxChartSortDescriptionCollection

  • get groupSorts(): string
  • Gets or sets the sorts to apply after grouping has been applied.

    Returns string

  • set groupSorts(v: string): void
  • Parameters

    • v: string

    Returns void

  • get height(): string
  • Returns string

  • set height(value: string): void
  • Parameters

    • value: string

    Returns void

  • get highlightingBehavior(): SeriesHighlightingBehavior
  • Gets or sets the highlighting Behavior to use for the series in the component, when supported. This takes precedence over the series level IsHightlightingEnabled.

    Returns SeriesHighlightingBehavior

  • set highlightingBehavior(v: SeriesHighlightingBehavior): void
  • Parameters

    Returns void

  • get highlightingMode(): SeriesHighlightingMode
  • Gets or sets the highlighting mode to use for the series in the component, when supported. This takes precedence over the series level IsHightlightingEnabled.

    Returns SeriesHighlightingMode

  • set highlightingMode(v: SeriesHighlightingMode): void
  • Parameters

    Returns void

  • get horizontalViewScrollbarCornerRadius(): number
  • Gets or sets the corner radius to use for the horizontal scrollbar in the component, when enabled.

    Returns number

  • set horizontalViewScrollbarCornerRadius(v: number): void
  • Parameters

    • v: number

    Returns void

  • get horizontalViewScrollbarFill(): string
  • Gets or sets the fill to use for the horizontal scrollbar in the component, when enabled.

    Returns string

  • set horizontalViewScrollbarFill(v: string): void
  • Parameters

    • v: string

    Returns void

  • get horizontalViewScrollbarHeight(): number
  • Gets or sets the height to use for the horizontal scrollbar in the component, when enabled.

    Returns number

  • set horizontalViewScrollbarHeight(v: number): void
  • Parameters

    • v: number

    Returns void

  • get horizontalViewScrollbarInset(): number
  • Gets or sets the inset distance to use for the horizontal scrollbar in the component, when enabled.

    Returns number

  • set horizontalViewScrollbarInset(v: number): void
  • Parameters

    • v: number

    Returns void

  • get horizontalViewScrollbarMaxOpacity(): number
  • Gets or sets the max opacity to use for the horizontal scrollbar in the component, when enabled.

    Returns number

  • set horizontalViewScrollbarMaxOpacity(v: number): void
  • Parameters

    • v: number

    Returns void

  • get horizontalViewScrollbarMode(): SeriesViewerScrollbarMode
  • Gets or sets the horizontal scrollbar mode to use for the series viewer.

    Returns SeriesViewerScrollbarMode

  • set horizontalViewScrollbarMode(v: SeriesViewerScrollbarMode): void
  • Parameters

    Returns void

  • get horizontalViewScrollbarOutline(): string
  • Gets or sets the outline to use for the horizontal scrollbar in the component, when enabled.

    Returns string

  • set horizontalViewScrollbarOutline(v: string): void
  • Parameters

    • v: string

    Returns void

  • get horizontalViewScrollbarShouldAddAutoTrackInsets(): boolean
  • Gets or sets whether to use automatic track insets for the horizontal scrollbar in the component, when enabled.

    Returns boolean

  • set horizontalViewScrollbarShouldAddAutoTrackInsets(v: boolean): void
  • Parameters

    • v: boolean

    Returns void

  • get horizontalViewScrollbarStrokeThickness(): number
  • Gets or sets the stroke thickness to use for the horizontal scrollbar in the component, when enabled.

    Returns number

  • set horizontalViewScrollbarStrokeThickness(v: number): void
  • Parameters

    • v: number

    Returns void

  • get horizontalViewScrollbarTrackEndInset(): number
  • Gets or sets the track end inset to use for the horizontal scrollbar in the component, when enabled.

    Returns number

  • set horizontalViewScrollbarTrackEndInset(v: number): void
  • Parameters

    • v: number

    Returns void

  • get horizontalViewScrollbarTrackStartInset(): number
  • Gets or sets the track start inset to use for the horizontal scrollbar in the component, when enabled.

    Returns number

  • set horizontalViewScrollbarTrackStartInset(v: number): void
  • Parameters

    • v: number

    Returns void

  • get i(): FinancialChart
  • Returns FinancialChart

  • get includedProperties(): string[]
  • Gets or sets a set of property paths that should be included for consideration by the category chart, leaving the remainder excluded. If null, all properties will be considered.

    The IncludedProperties property used to include the properties for the consideration of the category chart.

    <igx-category-chart
    yAxisMinimumValue="0"
    [dataSource]="data"
    includedProperties="ProductName,Cost" >
    </igx-category-chart>
    this.chart.includedProperties = ["ProductName", "Cost"];
    

    Returns string[]

  • set includedProperties(v: string[]): void
  • Parameters

    • v: string[]

    Returns void

  • get indicatorBrushes(): string[]
  • Brushes to use for financial indicators.

    Use the IndicatorBrushes property to set a collection of brushes that will be used to render positive elements of indicators in the Financial Chart control, e.g.

    <igx-financial-chart
    [dataSource]="data"
    indicatorTypes="MoneyFlowIndex, AverageTrueRange"
    indicatorBrushes="Green, Blue">
    </igx-financial-chart>

    Returns string[]

  • set indicatorBrushes(v: string[]): void
  • Parameters

    • v: string[]

    Returns void

  • get indicatorDisplayTypes(): IgxIndicatorDisplayTypeCollection
  • The display types of financial indicators.

    Use the IndicatorDisplayTypes property to set display types that will determine whether render all indicators as area, lines, or columns in the Financial Chart control, e.g.

    <igx-financial-chart
    [dataSource]="data"
    indicatorTypes="MoneyFlowIndex, AverageTrueRange"
    indicatorDisplayTypes="Line, Line">
    </igx-financial-chart>

    Returns IgxIndicatorDisplayTypeCollection

  • set indicatorDisplayTypes(v: IgxIndicatorDisplayTypeCollection): void
  • Parameters

    Returns void

  • get indicatorLongPeriod(): number
  • The long period of financial indicators, where applicable.

    The IndicatorLongPeriod property applies only to these indicator types:

    • AbsoluteVolumeOscillator,
    • ChaikinOscillator,
    • MovingAverageConvergenceDivergence,
    • PercentagePriceOscillator,
    • PercentageVolumeOscillator,
    <igx-financial-chart
    [dataSource]="data"
    indicatorTypes="ChaikinOscillator"
    indicatorLongPeriod="8">
    </igx-financial-chart>

    Returns number

  • set indicatorLongPeriod(v: number): void
  • Parameters

    • v: number

    Returns void

  • get indicatorMultiplier(): number
  • The multiplier of financial indicators, e.g. BollingerBandWidth indicator.

    The IndicatorMultiplier property applies to only to BollingerBandWidth indicator type.

    <igx-financial-chart
    [dataSource]="data"
    indicatorTypes="BollingerBandWidth"
    indicatorMultiplier="8">
    </igx-financial-chart>

    Returns number

  • set indicatorMultiplier(v: number): void
  • Parameters

    • v: number

    Returns void

  • get indicatorNegativeBrushes(): string[]
  • Brushes to use for negative elements in financial indicators.

    Use the IndicatorNegativeBrushes property to set a collection of brushes that will be used to render negative elements of indicators in the Financial Chart control, e.g.

    <igx-financial-chart
    [dataSource]="data"
    indicatorTypes="MoneyFlowIndex, AverageTrueRange"
    indicatorNegativeBrushes="Red, Orange">
    </igx-financial-chart>

    Returns string[]

  • set indicatorNegativeBrushes(v: string[]): void
  • Parameters

    • v: string[]

    Returns void

  • get indicatorPeriod(): number
  • The period of financial indicators, where applicable.

    The indicatorPeriod property applies to only the BollingerBands overlay as well as to these indicators types: AverageDirectionalIndex, AverageTrueRange, BollingerBandWidth, ChaikinVolatility, CommodityChannelIndex, DetrendedPriceOscillator, FastStochasticOscillator, ForceIndex, FullStochasticOscillator, MoneyFlowIndex, PriceChannelOverlay, RateOfChangeAndMomentum, RelativeStrengthIndex, SlowStochasticOscillator, StandardDeviation, StochRSI, TRIX, WilliamsPercentR

    <igx-financial-chart
    [dataSource]="data"
    indicatorTypes="AverageTrueRange"
    indicatorPeriod="8">
    </igx-financial-chart>

    Returns number

  • set indicatorPeriod(v: number): void
  • Parameters

    • v: number

    Returns void

  • get indicatorShortPeriod(): number
  • The short period of financial indicators, where applicable.

    The IndicatorShortPeriod property applies only to these indicator types:

    • AbsoluteVolumeOscillator,
    • ChaikinOscillator,
    • MovingAverageConvergenceDivergence,
    • PercentagePriceOscillator,
    • PercentageVolumeOscillator,
    <igx-financial-chart
    [dataSource]="data"
    indicatorTypes="ChaikinOscillator"
    indicatorShortPeriod="8">
    </igx-financial-chart>

    Returns number

  • set indicatorShortPeriod(v: number): void
  • Parameters

    • v: number

    Returns void

  • get indicatorSignalPeriod(): number
  • The signal period of financial indicators, where applicable.

    The IndicatorSignalPeriod property applies to only to MovingAverageConvergenceDivergence indicator type.

    <igx-financial-chart
    [dataSource]="data"
    indicatorTypes="MovingAverageConvergenceDivergence"
    indicatorSignalPeriod="8">
    </igx-financial-chart>

    Returns number

  • set indicatorSignalPeriod(v: number): void
  • Parameters

    • v: number

    Returns void

  • get indicatorSmoothingPeriod(): number
  • The smoothing period of financial indicators, where applicable.

    The IndicatorSmoothingPeriod property applies to only to FullStochasticOscillator indicator type.

    <igx-financial-chart
    [dataSource]="data"
    indicatorTypes="FullStochasticOscillator"
    indicatorSmoothingPeriod="8">
    </igx-financial-chart>

    Returns number

  • set indicatorSmoothingPeriod(v: number): void
  • Parameters

    • v: number

    Returns void

  • get indicatorThickness(): number
  • The outline or stroke thickness of financial indicators.

    Use the IndicatorThickness property to set a number that will be used to render outline thickness of all indicators in the Financial Chart control, e.g.

    <igx-financial-chart
    [dataSource]="data"
    indicatorTypes="MoneyFlowIndex, AverageTrueRange"
    indicatorThickness="2.5">
    </igx-financial-chart>

    Returns number

  • set indicatorThickness(v: number): void
  • Parameters

    • v: number

    Returns void

  • get indicatorTypes(): IgxFinancialIndicatorTypeCollection
  • A collection indicating what financial indicator types to display on the Financial Chart.

    Use the IndicatorTypes property to set types of indicators that will be rendered below the price pane in the Financial Chart control, e.g.

    <igx-financial-chart
    [dataSource]="data"
    indicatorTypes="MoneyFlowIndex, AverageTrueRange">
    </igx-financial-chart>

    Returns IgxFinancialIndicatorTypeCollection

  • set indicatorTypes(v: IgxFinancialIndicatorTypeCollection): void
  • Parameters

    Returns void

  • get initialGroupSortDescriptions(): IgxChartSortDescriptionCollection
  • Gets the initial sorts that are applied to the chart after groupings and summaries are applied.

    Returns IgxChartSortDescriptionCollection

  • get initialGroups(): string
  • Gets or sets the groupings to apply to the chart. This property will become ignored if sorts are changed outside of this property.

    Returns string

  • set initialGroups(v: string): void
  • Parameters

    • v: string

    Returns void

  • get initialSorts(): string
  • Gets or sets the sorts to apply to the chart. This property will become ignored if sorts are changed outside of this property.

    Returns string

  • set initialSorts(v: string): void
  • Parameters

    • v: string

    Returns void

  • get initialSummaries(): string
  • Gets or sets the summaries to apply to the chart. This property will become ignored if sorts are changed outside of this property.

    Returns string

  • set initialSummaries(v: string): void
  • Parameters

    • v: string

    Returns void

  • get isHorizontalZoomEnabled(): boolean
  • Gets or sets whether the chart can be horizontally zoomed through user interactions.

    Use the IsHorizontalZoomEnabled property to allow chart horizontally zoomed .

     <igx-category-chart
    yAxisMinimumValue="0"
    [dataSource]="data"
    isHorizontalZoomEnabled=true>
    </igx-category-chart>
    this.chart.isHorizontalZoomEnabled = true;
    

    Returns boolean

  • set isHorizontalZoomEnabled(v: boolean): void
  • Parameters

    • v: boolean

    Returns void

  • get isLegendVisible(): boolean
  • Gets or sets weather or not a legend is visible between toolbar and chart's plot area

    Returns boolean

  • set isLegendVisible(v: boolean): void
  • Parameters

    • v: boolean

    Returns void

  • get isSeriesHighlightingEnabled(): boolean
  • Gets or sets whether the chart can highlight series through user interactions. This property applies to Category Chart and Financial Chart controls.

    Returns boolean

  • set isSeriesHighlightingEnabled(v: boolean): void
  • Parameters

    • v: boolean

    Returns void

  • get isToolbarVisible(): boolean
  • A boolean property controlling the visibility of the toolbar.

    Returns boolean

  • set isToolbarVisible(v: boolean): void
  • Parameters

    • v: boolean

    Returns void

  • get isVerticalZoomEnabled(): boolean
  • Gets or sets whether the chart can be vertically zoomed through user interactions.

    Use the IsVerticalZoomEnabled property to allow chart zoom vertically.

     <igx-category-chart
    yAxisMinimumValue="0"
    [dataSource]="data"
    isVerticalZoomEnabled=true>
    </igx-category-chart>
     this.chart.isVerticalZoomEnabled = true;
    

    Returns boolean

  • set isVerticalZoomEnabled(v: boolean): void
  • Parameters

    • v: boolean

    Returns void

  • get isWindowSyncedToVisibleRange(): boolean
  • A boolean indicating whether the chart should automatically zoom in vertically on the currently visible range of data. When this property is set to true, panning and zooming along the X-axis will result in a corresponding zoom on the Y-axis, so that the visible range of data fills the zoom window as fully as possible.

    Returns boolean

  • set isWindowSyncedToVisibleRange(v: boolean): void
  • Parameters

    • v: boolean

    Returns void

  • get leftMargin(): number
  • Gets or sets the left margin of the chart content.

    Use the 'leftMargin' property for the left margin of the chart content.

    <igx-category-chart
    yAxisMinimumValue="0"
    [dataSource]="data"
    leftMargin=20>
    </igx-category-chart>
     this.chart.leftMargin = 20;
    

    Returns number

  • set leftMargin(v: number): void
  • Parameters

    • v: number

    Returns void

  • get legend(): any
  • Returns any

  • set legend(v: any): void
  • Parameters

    • v: any

    Returns void

  • get legendHighlightingMode(): LegendHighlightingMode
  • Gets or sets the highlighting mode to use for the legend linked to the component, when supported.

    Returns LegendHighlightingMode

  • set legendHighlightingMode(v: LegendHighlightingMode): void
  • Parameters

    Returns void

  • get legendItemBadgeMode(): LegendItemBadgeMode
  • Gets or sets the mode of legend badges representing all series displayed in a legend linked to this component. This property will be ignored when the LegendItemTemplate or LegendItemBadgeTemplate property is set on a series

    Returns LegendItemBadgeMode

  • set legendItemBadgeMode(v: LegendItemBadgeMode): void
  • Parameters

    Returns void

  • get legendItemBadgeShape(): LegendItemBadgeShape
  • Gets or sets the type of legend badges representing all series displayed in a legend linked to this component This property will be ignored when the LegendItemTemplate or LegendItemBadgeTemplate property is set on a series

    Returns LegendItemBadgeShape

  • set legendItemBadgeShape(v: LegendItemBadgeShape): void
  • Parameters

    Returns void

  • get markerAutomaticBehavior(): MarkerAutomaticBehavior
  • Gets or sets the default marker type for all series plotted in this chart. This property is ignored when the MarkerTypes property is set

    Returns MarkerAutomaticBehavior

  • set markerAutomaticBehavior(v: MarkerAutomaticBehavior): void
  • Parameters

    Returns void

  • get markerBrushes(): string[]
  • Gets or sets the palette of brushes used for rendering fill area of data point markers. This property applies only to these chart types: point, line, spline, bubble, and polygon

    MarkerBrushes property used for rendering fill area of data point markers.

    <igx-category-chart
    yAxisMinimumValue="0"
    [dataSource]="data"
    markerBrushes="#ff0000, #cc0000, #aa0000">
    </igx-category-chart>
     this.chart.markerBrushes=[ "#ff0000", "#ffff00", "#00ffff" ];
    

    Returns string[]

  • set markerBrushes(v: string[]): void
  • Parameters

    • v: string[]

    Returns void

  • get markerFillMode(): MarkerFillMode
  • Gets or sets the MarkerFillMode for all series that support markers in this chart.

    Returns MarkerFillMode

  • set markerFillMode(v: MarkerFillMode): void
  • Parameters

    Returns void

  • get markerFillOpacity(): number
  • Gets or sets the Marker Fill Opacity for all series that support markers in this chart.

    Returns number

  • set markerFillOpacity(v: number): void
  • Parameters

    • v: number

    Returns void

  • get markerMaxCount(): number
  • Gets or sets the maximum number of markers displayed in the plot area of the chart.

    markerMaxCount property used to display maximum number of markers in the plot area of the chart.

    <igx-category-chart
    yAxisMinimumValue="0"
    [dataSource]="data"
    markerMaxCount=100 >
    </igx-category-chart>
     this.chart.markerMaxCount = 100 ;
    

    Returns number

  • set markerMaxCount(v: number): void
  • Parameters

    • v: number

    Returns void

  • get markerOutlineMode(): MarkerOutlineMode
  • Gets or sets the MarkerOutlineMode for all series that support markers in this chart.

    Returns MarkerOutlineMode

  • set markerOutlineMode(v: MarkerOutlineMode): void
  • Parameters

    Returns void

  • get markerOutlines(): string[]
  • Gets or sets the palette of brushes used for rendering outlines of data point markers. This property applies only to these chart types: point, line, spline, bubble, and polygon

    MarkerOutlines property used for rendering outlines of data point markers.

    <igx-category-chart
    yAxisMinimumValue="0"
    [dataSource]="data"
    markerOutlines="#ff0000, #cc0000, #aa0000">
    </igx-category-chart>
    this.chart.markerOutlines= ["#ff0000", "#ffff00", "#00ffff"] ;
    

    Returns string[]

  • set markerOutlines(v: string[]): void
  • Parameters

    • v: string[]

    Returns void

  • get markerThickness(): number
  • Gets or sets the Marker Thickness for all series that support markers in this chart.

    Returns number

  • set markerThickness(v: number): void
  • Parameters

    • v: number

    Returns void

  • get markerTypes(): IgxMarkerTypeCollection
  • Gets or sets the marker shapes used for indicating location of data points in this chart. This property applies only to these chart types: point, line, spline, bubble, and polygon

    Returns IgxMarkerTypeCollection

  • set markerTypes(v: IgxMarkerTypeCollection): void
  • Parameters

    Returns void

  • get negativeBrushes(): string[]
  • Gets or sets the palette used for coloring negative items of Waterfall chart type.

    Use the NegativeBrushes property to set a collection of brushes that will be used to render fill area of negative elements in the price pane, e.g.

    <igx-financial-chart
    [dataSource]="data"
    negativeBrushes="Red, Orange">
    </igx-financial-chart>

    Returns string[]

  • set negativeBrushes(v: string[]): void
  • Parameters

    • v: string[]

    Returns void

  • get negativeOutlines(): string[]
  • Brushes to use for drawing negative elements, when using a chart type with contextual coloring, such as Waterfall.

    Use the NegativeOutlines property to set a collection of brushes that will be used to render outline of negative elements in the price pane, e.g.

    <igx-financial-chart
    [dataSource]="data"
    negativeOutlines="Red, Orange">
    </igx-financial-chart>

    Returns string[]

  • set negativeOutlines(v: string[]): void
  • Parameters

    • v: string[]

    Returns void

  • get outlineMode(): SeriesOutlineMode
  • Gets or sets the OutlineMode for all series in this chart.

    Returns SeriesOutlineMode

  • set outlineMode(v: SeriesOutlineMode): void
  • Parameters

    Returns void

  • get outlines(): string[]
  • Gets or sets the palette of brushes to use for outlines on the chart series. The value provided should be an array of CSS color strings or JavaScript objects defining gradients. Optionally the first element can be a string reading "RGB" or "HSV" to specify the interpolation mode of the collection

    Use the Outlines property to sets the palette of brushes to use for outlines on the chart series

    <igx-category-chart
    yAxisMinimumValue="0"
    [dataSource]="data"
    outlines="#ff0000, #cc0000, #aa0000">
    </igx-category-chart>

    Returns string[]

  • set outlines(v: string[]): void
  • Parameters

    • v: string[]

    Returns void

  • get overlayBrushes(): string[]
  • Brushes to use for filling financial overlays.

    Use the OverlayBrushes property to set a collection of brushes that will be used to render fill area of overlays in the Financial Chart control, e.g.

    <igx-financial-chart
    [dataSource]="data"
    overlayTypes="BollingerBands"
    overlayBrushes="Green">
    </igx-financial-chart>

    Returns string[]

  • set overlayBrushes(v: string[]): void
  • Parameters

    • v: string[]

    Returns void

  • get overlayMultiplier(): number
  • The multiplier of financial overlay, e.g. BollingerBands overlay.

    Returns number

  • set overlayMultiplier(v: number): void
  • Parameters

    • v: number

    Returns void

  • get overlayOutlines(): string[]
  • Brushes to use for outlining financial overlays.

    Use the OverlayOutlines property to set a collection of brushes that will be used to render outlines of overlays in the Financial Chart control, e.g.

    <igx-financial-chart
    [dataSource]="data"
    overlayTypes="BollingerBands"
    overlayOutlines="Green">
    </igx-financial-chart>

    Returns string[]

  • set overlayOutlines(v: string[]): void
  • Parameters

    • v: string[]

    Returns void

  • get overlayThickness(): number
  • The outline thickness of financial overlays.

    Use the OverlayThickness property to set a number that will be used to render outline thickness of all overlays in the Financial Chart control, e.g.

    <igx-financial-chart
    [dataSource]="data"
    overlayTypes="BollingerBands"
    overlayThickness="2.5">
    </igx-financial-chart>

    Returns number

  • set overlayThickness(v: number): void
  • Parameters

    • v: number

    Returns void

  • get overlayTypes(): IgxFinancialOverlayTypeCollection
  • A collection indicating what financial overlay types to display on the Financial Chart.

    Use the OverlayTypes property to set types of overlays that will be rendered behind price series in the Financial Chart control, e.g.

    <igx-financial-chart
    [dataSource]="data"
    overlayTypes="BollingerBands">
    </igx-financial-chart>

    Returns IgxFinancialOverlayTypeCollection

  • set overlayTypes(v: IgxFinancialOverlayTypeCollection): void
  • Parameters

    Returns void

  • get pixelScalingRatio(): number
  • Gets or sets the scaling value used to affect the pixel density of the control. A higher scaling ratio will produce crisper visuals at the expense of memory. Lower values will cause the control to appear blurry.

    Returns number

  • set pixelScalingRatio(v: number): void
  • Parameters

    • v: number

    Returns void

  • get plotAreaMarginBottom(): number
  • Margin applied below the plot area.

    Returns number

  • set plotAreaMarginBottom(v: number): void
  • Parameters

    • v: number

    Returns void

  • get plotAreaMarginLeft(): number
  • Margin applied to the Left of the plot area.

    Returns number

  • set plotAreaMarginLeft(v: number): void
  • Parameters

    • v: number

    Returns void

  • get plotAreaMarginRight(): number
  • Margin applied to the right of the plot area.

    Returns number

  • set plotAreaMarginRight(v: number): void
  • Parameters

    • v: number

    Returns void

  • get plotAreaMarginTop(): number
  • Margin applied to the Top of the plot area.

    Returns number

  • set plotAreaMarginTop(v: number): void
  • Parameters

    • v: number

    Returns void

  • get resolution(): number
  • Gets or sets the rendering resolution for all series in this chart. Where n = Resolution, for every n horizontal pixels, combine all items into a single datapoint. When Resolution = 0, all datapoints will be rendered as graphical objects. Charts with a higher resolution will have faster performance.

    Returns number

  • set resolution(v: number): void
  • Parameters

    • v: number

    Returns void

  • get rightMargin(): number
  • Gets or sets the right margin of the chart content.

    Use rightMargin property for the right margin of the chart content.

    <igx-category-chart
    yAxisMinimumValue="0"
    [dataSource]="data"
    rightMargin=20>
    </igx-category-chart>
      this.chart.rightMargin = 20 ;
    

    Returns number

  • set rightMargin(v: number): void
  • Parameters

    • v: number

    Returns void

  • get seriesAdded(): EventEmitter<{
        args: IgxChartSeriesEventArgs;
        sender: any;
    }>
  • Event raised when a series is initialized and added to this chart.

    SeriesAdded event raised when a series is initialized and added to this chart.

     <igx-category-chart
    yAxisMinimumValue="0"
    [dataSource]="data"
    (seriesAdded)="CategoryChart_SeriesAdded()"
    >
    </igx-category-chart>

    Returns EventEmitter<{
        args: IgxChartSeriesEventArgs;
        sender: any;
    }>

  • get seriesPlotAreaMarginVerticalMode(): SeriesPlotAreaMarginVerticalMode
  • Gets or sets vertical mode to use for automatically calculating the plot area margin based ont the series.

    Returns SeriesPlotAreaMarginVerticalMode

  • set seriesPlotAreaMarginVerticalMode(v: SeriesPlotAreaMarginVerticalMode): void
  • Parameters

    Returns void

  • get seriesPointerDown(): EventEmitter<{
        args: IgxDomainChartSeriesPointerEventArgs;
        sender: any;
    }>
  • Occurs when the pointer is pressed down over a Series.

    SeriesPointerDown event raised when the pointer is pressed down over a Series

    <igx-category-chart
    yAxisMinimumValue="0"
    [dataSource]="data"
    (seriesPointerDown)="CategoryChart_seriesPointerDown()" >
    </igx-category-chart>

    Returns EventEmitter<{
        args: IgxDomainChartSeriesPointerEventArgs;
        sender: any;
    }>

  • get seriesPointerEnter(): EventEmitter<{
        args: IgxDomainChartSeriesPointerEventArgs;
        sender: any;
    }>
  • Occurs when the pointer enters a Series.

    SeriesPointerEnter event raised when the pointer enters a Series.

    <igx-category-chart
    yAxisMinimumValue="0"
    [dataSource]="data"
    (seriesPointerEnter)="CategoryChart_seriesPointerEnter()" >
    </igx-category-chart>
    CategoryChart_seriesPointerEnter(sender: any , aregs: ChartSeriesEventArgs)
    {

    }

    Returns EventEmitter<{
        args: IgxDomainChartSeriesPointerEventArgs;
        sender: any;
    }>

  • get seriesPointerLeave(): EventEmitter<{
        args: IgxDomainChartSeriesPointerEventArgs;
        sender: any;
    }>
  • Occurs when the pointer leaves a Series.

    SeriesPointerLeave event raised when the pointer leaves a Series.

    <igx-category-chart
    yAxisMinimumValue="0"
    [dataSource]="data"
    (seriesPointerLeave)= "CategoryChart_seriesPointerLeave()" >
    </igx-category-chart>
    CategoryChart_seriesPointerLeave(sender: any , aregs: ChartSeriesEventArgs)
    {

    }

    Returns EventEmitter<{
        args: IgxDomainChartSeriesPointerEventArgs;
        sender: any;
    }>

  • get seriesPointerMove(): EventEmitter<{
        args: IgxDomainChartSeriesPointerEventArgs;
        sender: any;
    }>
  • Occurs when the pointer moves over a Series.

    SeriesPointerMove event raised when the pointer moves over a Series.

    <igx-category-chart
    yAxisMinimumValue="0"
    [dataSource]="data"
    (seriesPointerMove)="CategoryChart_seriesPointerMove()">
    </igx-category-chart>
     CategoryChart_seriesPointerMove(sender: any , aregs: ChartSeriesEventArgs)
    {

    }

    Returns EventEmitter<{
        args: IgxDomainChartSeriesPointerEventArgs;
        sender: any;
    }>

  • get seriesPointerUp(): EventEmitter<{
        args: IgxDomainChartSeriesPointerEventArgs;
        sender: any;
    }>
  • Occurs when the pointer is released over a Series.

    SeriesPointerUp event raised when the pointer is released over a Series.

     CategoryChart_seriesPointerUp(sender: any , aregs: ChartSeriesEventArgs)
    {

    }
    <igx-category-chart
    yAxisMinimumValue="0"
    [dataSource]="data"
    (seriesPointerUp)="CategoryChart_seriesPointerUp()" >
    </igx-category-chart>

    Returns EventEmitter<{
        args: IgxDomainChartSeriesPointerEventArgs;
        sender: any;
    }>

  • get seriesRemoved(): EventEmitter<{
        args: IgxChartSeriesEventArgs;
        sender: any;
    }>
  • Event raised when a series is removed from this chart.

    SeriesRemoved event raised when a series is removed from this chart.

    <igx-category-chart
    yAxisMinimumValue="0"
    [dataSource]="data"
    (seriesRemoved)="CategoryChart_seriesRemoved()">
    </igx-category-chart>
     CategoryChart_seriesRemoved(sender: any , aregs: ChartSeriesEventArgs)
    {

    }

    Returns EventEmitter<{
        args: IgxChartSeriesEventArgs;
        sender: any;
    }>

  • get shouldAvoidAxisAnnotationCollisions(): boolean
  • Gets or sets whether annotations for the final value of each series is displayed on the axis.

    Returns boolean

  • set shouldAvoidAxisAnnotationCollisions(v: boolean): void
  • Parameters

    • v: boolean

    Returns void

  • get shouldDisplayMockData(): boolean
  • Gets or sets whether the chart should display mock data when the data source has not been provided, if supported for this type of chart.

    Returns boolean

  • set shouldDisplayMockData(v: boolean): void
  • Parameters

    • v: boolean

    Returns void

  • get shouldPanOnMaximumZoom(): boolean
  • Gets or sets a whether the chart should pan its content when zooing in passed max zoom level.

    Returns boolean

  • set shouldPanOnMaximumZoom(v: boolean): void
  • Parameters

    • v: boolean

    Returns void

  • get shouldUseSkeletonStyleForMockData(): boolean
  • Gets or sets whether the chart should use a faded skeleton style for mock data.

    Returns boolean

  • set shouldUseSkeletonStyleForMockData(v: boolean): void
  • Parameters

    • v: boolean

    Returns void

  • get sortDescriptions(): IgxChartSortDescriptionCollection
  • Gets the current sort that is applied to the grid. Collection can be updated to modify the sort for the grid. Once sort descriptions are in this collection, the grid will no longer listen for changes on their properties.

    Returns IgxChartSortDescriptionCollection

  • get subtitle(): string
  • Gets or sets text to display below the Title, above the plot area.

    Use the Subtitle property to display the text below and above the plot area.

    <igx-category-chart
    yAxisMinimumValue="0"
    [dataSource]="data"
    subtitle= "This is a subtitle">
    </igx-category-chart>
     this.chart.subtitle ="CategoryChart Subtitle" ;
    

    Returns string

  • set subtitle(v: string): void
  • Parameters

    • v: string

    Returns void

  • get subtitleAlignment(): HorizontalAlignment
  • Gets or sets horizontal alignment which determines the subtitle position, relative to the left and right edges of the control.

    Use the SubtitleAlignment property to Gets or sets horizontal alignment.

    <igx-category-chart
    yAxisMinimumValue="0"
    [dataSource]="data"
    subtitleAlignment= "center">
    </igx-category-chart>
    this.chart.subtitleAlignment = HorizontalAlignment.Right;
    

    Returns HorizontalAlignment

  • set subtitleAlignment(v: HorizontalAlignment): void
  • Parameters

    Returns void

  • get subtitleBottomMargin(): number
  • Gets or sets the bottom margin of chart subtitle

    Use subtitleBottomMargin property for the bottom margin of chart subtitle.

    <igx-category-chart
    yAxisMinimumValue="0"
    [dataSource]="data"
    subtitleBottomMargin=10>
    </igx-category-chart>
    this.chart.subtitleBottomMargin = 10 ;
    

    Returns number

  • set subtitleBottomMargin(v: number): void
  • Parameters

    • v: number

    Returns void

  • get subtitleLeftMargin(): number
  • Gets or sets the left margin of chart subtitle

    Use subtitleLeftMargin property for the left margin of chart subtitle.

    <igx-category-chart
    yAxisMinimumValue="0"
    [dataSource]="data"
    subtitleLeftMargin= 20>
    </igx-category-chart>
    this.chart.subtitleLeftMargin = 20 ;
    

    Returns number

  • set subtitleLeftMargin(v: number): void
  • Parameters

    • v: number

    Returns void

  • get subtitleRightMargin(): number
  • Gets or sets the right margin of chart subtitle

    Use subtitleRightMargin property for the right margin of chart subtitle.

    <igx-category-chart
    yAxisMinimumValue="0"
    [dataSource]="data"
    subtitleRightMargin= 10>
    </igx-category-chart>
     this.chart.subtitleRightMargin = 20 ;
    

    Returns number

  • set subtitleRightMargin(v: number): void
  • Parameters

    • v: number

    Returns void

  • get subtitleTextColor(): string
  • Gets or sets color of chart subtitle

    Use subtitleTextColor property to color the subtitle.

     <igx-category-chart
    yAxisMinimumValue="0"
    [dataSource]="data"
    subtitle= "This is a subtitle"
    subtitleTextColor= 'blue'>
    </igx-category-chart>
    this.chart.subtitleTextColor = "#ff0000" ;
    

    Returns string

  • set subtitleTextColor(v: string): void
  • Parameters

    • v: string

    Returns void

  • get subtitleTextStyle(): string
  • Gets or sets CSS font property for the chart subtitle

    Use subtitleTextStyle property for the CSS font of the chart subtitle.

     <igx-category-chart
    yAxisMinimumValue="0"
    [dataSource]="data"
    subtitle= "This is a subtitle"
    subtitleTextStyle ="16pt Verdona">
    </igx-category-chart>
    this.chart.subtitleTextStyle= "16pt Verdona";
    

    Returns string

  • set subtitleTextStyle(v: string): void
  • Parameters

    • v: string

    Returns void

  • get subtitleTopMargin(): number
  • Gets or sets the top margin of chart subtitle

    Use subtitleTopMargin property for the top margin of chart subtitle.

       <igx-category-chart
    yAxisMinimumValue="0"
    [dataSource]="data"
    subtitle= "This is a subtitle"
    subtitleTopMargin=10>
    </igx-category-chart>
    this.chart.subtitleTopMargin = 10;
    

    Returns number

  • set subtitleTopMargin(v: number): void
  • Parameters

    • v: number

    Returns void

  • get thickness(): number
  • Gets or sets the thickness for all series in this chart. Depending on the ChartType, this can be the main brush used, or just the outline.

    Use the Thickness property for the thickness of all the series in this chart.

    <igx-category-chart
    yAxisMinimumValue="0"
    [dataSource]="data"
    thickness=5>
    </igx-category-chart>

    Returns number

  • set thickness(v: number): void
  • Parameters

    • v: number

    Returns void

  • get titleAlignment(): HorizontalAlignment
  • Gets or sets horizontal alignment which determines the title position, relative to the left and right edges of the control.

    Use the TitleAlignment property for the horizontal alignment of the title.

    <igx-category-chart
    yAxisMinimumValue="0"
    [dataSource]="data"
    titleAlignment= "center">
    </igx-category-chart>
    this.chart.titleAlignment = HorizontalAlignment.Center;
    

    Returns HorizontalAlignment

  • set titleAlignment(v: HorizontalAlignment): void
  • Parameters

    Returns void

  • get titleBottomMargin(): number
  • Gets or sets the bottom margin of chart title

    Use titleBottomMargin property for the bottom margin of chart title.

    <igx-category-chart
    yAxisMinimumValue="0"
    [dataSource]="data"
    titleBottomMargin= 10 >
    </igx-category-chart>
     this.chart.titleBottomMargin = 5;
    

    Returns number

  • set titleBottomMargin(v: number): void
  • Parameters

    • v: number

    Returns void

  • get titleLeftMargin(): number
  • Gets or sets the left margin of chart title

    Use titleLeftMargin property for the left margin of chart title.

    <igx-category-chart
    yAxisMinimumValue="0"
    [dataSource]="data"
    titleLeftMargin= 10>
    </igx-category-chart>
    this.chart.titleLeftMargin = 10;
    

    Returns number

  • set titleLeftMargin(v: number): void
  • Parameters

    • v: number

    Returns void

  • get titleRightMargin(): number
  • Gets or sets the right margin of chart title

    Use titleLeftMargin property for the right margin of chart title.

    <igx-category-chart
    yAxisMinimumValue="0"
    [dataSource]="data"
    titleRightMargin= 10>
    </igx-category-chart>
    this.chart.titleRightMargin = 10;
    

    Returns number

  • set titleRightMargin(v: number): void
  • Parameters

    • v: number

    Returns void

  • get titleTextColor(): string
  • Gets or sets color of chart title

    Use titleTextColor property to color the chart title

    <igx-category-chart
    yAxisMinimumValue="0"
    [dataSource]="data"
    titleTextColor= "red">
    </igx-category-chart>
     this.chart.titleTextColor="red" ;
    

    Returns string

  • set titleTextColor(v: string): void
  • Parameters

    • v: string

    Returns void

  • get titleTextStyle(): string
  • Gets or sets CSS font property for the chart title

    Use titleTextStyle property for the CSS font property of the chart title

     <igx-category-chart
    yAxisMinimumValue="0"
    [dataSource]="data"
    titleTextStyle= "24pt Verdona">
    </igx-category-chart>
    this.chart.xAxisTitleTextStyle = "24pt Verdona";
    

    Returns string

  • set titleTextStyle(v: string): void
  • Parameters

    • v: string

    Returns void

  • get titleTopMargin(): number
  • Gets or sets the top margin of chart title

    Use titleTopMargin property for the top margin of chart title.

    <igx-category-chart
    yAxisMinimumValue="0"
    [dataSource]="data"
    title="Countries"
    titleTopMargin=10 >
    </igx-category-chart>
    this.chart.titleTopMargin = 10;
    

    Returns number

  • set titleTopMargin(v: number): void
  • Parameters

    • v: number

    Returns void

  • get toolTipType(): ToolTipType
  • Gets or sets the style of tooltip to be displayed.

    Returns ToolTipType

  • set toolTipType(v: ToolTipType): void
  • Parameters

    Returns void

  • get toolbarHeight(): number
  • Returns number

  • set toolbarHeight(v: number): void
  • Parameters

    • v: number

    Returns void

  • get tooltipTemplate(): TemplateRef<any>
  • Sets or gets the template reference to use for tooltips for all the series.

    Returns TemplateRef<any>

  • set tooltipTemplate(v: TemplateRef<any>): void
  • Parameters

    • v: TemplateRef<any>

    Returns void

  • get tooltipTemplates(): TemplateRef<any>[]
  • Sets or gets the template references to use for tooltips for all the series, in order.

    Returns TemplateRef<any>[]

  • set tooltipTemplates(v: TemplateRef<any>[]): void
  • Parameters

    • v: TemplateRef<any>[]

    Returns void

  • get topMargin(): number
  • Gets or sets the top margin of the chart content.

    Use topMargin property for the margin of the chart content.

    <igx-category-chart
    yAxisMinimumValue="0"
    [dataSource]="data"
    topMargin= 20>
    </igx-category-chart>
    this.chart.topMargin=20;
    

    Returns number

  • set topMargin(v: number): void
  • Parameters

    • v: number

    Returns void

  • get transitionDuration(): number
  • Gets or sets the duration used for animating series plots when the data is changing

    Use the TransitionDuration property to animating between data values.

    <igx-category-chart
    yAxisMinimumValue="0"
    [dataSource]="data"
    transitionDuration="500">
    </igx-category-chart>
    this.chart.transitionDuratio= 500;
    

    Returns number

  • set transitionDuration(v: number): void
  • Parameters

    • v: number

    Returns void

  • get transitionEasingFunction(): ((time: number) => number)
  • Gets or sets the easing function used for animating series plots when the data is changing. This can be set to one of the known values "linear" or "cubic," or it can be set to an easing function which takes a single numeric parameter and returns a number.

    The 'transitionInEasingFunction' property used for easing function for animating series plots when the chart is loading into view.

    <igx-category-chart
    yAxisMinimumValue="0"
    [dataSource]="data"
    transitionInEasingFunction= "cubic">
    </igx-category-chart>
    this.chart.transitionInEasingFunction=  this.cubicFunc;

    cubicFunc(time: number) : number
    {
    return time;
    }

    Returns ((time: number) => number)

      • (time: number): number
      • Gets or sets the easing function used for animating series plots when the data is changing. This can be set to one of the known values "linear" or "cubic," or it can be set to an easing function which takes a single numeric parameter and returns a number.

        The 'transitionInEasingFunction' property used for easing function for animating series plots when the chart is loading into view.

        <igx-category-chart
        yAxisMinimumValue="0"
        [dataSource]="data"
        transitionInEasingFunction= "cubic">
        </igx-category-chart>
        this.chart.transitionInEasingFunction=  this.cubicFunc;

        cubicFunc(time: number) : number
        {
        return time;
        }

        Parameters

        • time: number

        Returns number

  • set transitionEasingFunction(v: ((time: number) => number)): void
  • Parameters

    • v: ((time: number) => number)
        • (time: number): number
        • Parameters

          • time: number

          Returns number

    Returns void

  • get trendLineBrushes(): string[]
  • Gets or sets the palette of brushes to used for coloring trend lines in this chart. The value provided should be an array of CSS color strings or JavaScript objects defining gradients. Optionally the first element can be a string reading "RGB" or "HSV" to specify the interpolation mode of the collection

    Use the TrendLineBrushes property for coloring trend lines in the chart.

    <igx-category-chart
    yAxisMinimumValue="0"
    [dataSource]="data"
    trendLineBrushes="#ff0000,#aa0000">
    </igx-category-chart>
    this.chart.trendLineBrushes=["#ff0000", "#ffff00", "#00ffff"]	;
    

    Returns string[]

  • set trendLineBrushes(v: string[]): void
  • Parameters

    • v: string[]

    Returns void

  • get trendLinePeriod(): number
  • Returns number

  • set trendLinePeriod(v: number): void
  • Parameters

    • v: number

    Returns void

  • get trendLineThickness(): number
  • Gets or sets the thickness of the trend lines in this chart. This property applies only to these chart types: point, line, spline, and bubble

    Use the TrendLineThickness property for the thickness of the trend lines in the chart.

    <igx-category-chart
    yAxisMinimumValue="0"
    [dataSource]="data"
    trendLineThickness= 2>
    </igx-category-chart>
    this.chart.trendLineThickness=2;
    

    Returns number

  • set trendLineThickness(v: number): void
  • Parameters

    • v: number

    Returns void

  • get trendLineType(): TrendLineType
  • Gets or sets the formula used for calculating trend lines in this chart. This property applies only to these chart types: point, line, spline, and bubble

    Use the TrendLineType property for calculating trend lines.

    <igx-category-chart
    yAxisMinimumValue="0"
    [dataSource]="data"
    trendLineType= "cubicFit">
    </igx-category-chart>
    this.chart.trendLineType = TrendLineType.CubicFit;
    

    Returns TrendLineType

  • set trendLineType(v: TrendLineType): void
  • Parameters

    Returns void

  • get unknownValuePlotting(): UnknownValuePlotting
  • Gets or sets the behavior that determines how unknown values will be plotted on the chart. Null and Double.NaN are two examples of unknown values.

    Use the UnknownValuePlotting property to determines the behavior that how unknown values will be plotted on the chart.

    <igx-category-chart
    yAxisMinimumValue="0"
    [dataSource]="data"
    unknownValuePlotting= "dontPlot">
    </igx-category-chart>
    this.chart.unknownValuePlotting =UnknownValuePlotting.DontPlot;
    

    Returns UnknownValuePlotting

  • set unknownValuePlotting(v: UnknownValuePlotting): void
  • Parameters

    Returns void

  • get valueLines(): IgxValueModeCollection
  • Gets or sets what value lines to use in the chart.

    Returns IgxValueModeCollection

  • set valueLines(v: IgxValueModeCollection): void
  • Parameters

    Returns void

  • get valueLinesBrushes(): string[]
  • Gets or sets the palette of brushes to use for coloring the value lines present in the ValueLines property. The value provided should be an array of CSS color strings or JavaScript objects defining gradients. Optionally the first element can be a string reading "RGB" or "HSV" to specify the interpolation mode of the collection

    Returns string[]

  • set valueLinesBrushes(v: string[]): void
  • Parameters

    • v: string[]

    Returns void

  • get valueLinesThickness(): number
  • Gets or sets thickness of value lines.

    Returns number

  • set valueLinesThickness(v: number): void
  • Parameters

    • v: number

    Returns void

  • get verticalViewScrollbarCornerRadius(): number
  • Gets or sets the corner radius to use for the vertical scrollbar in the component, when enabled.

    Returns number

  • set verticalViewScrollbarCornerRadius(v: number): void
  • Parameters

    • v: number

    Returns void

  • get verticalViewScrollbarFill(): string
  • Gets or sets the fill to use for the vertical scrollbar in the component, when enabled.

    Returns string

  • set verticalViewScrollbarFill(v: string): void
  • Parameters

    • v: string

    Returns void

  • get verticalViewScrollbarInset(): number
  • Gets or sets the inset distance to use for the vertical scrollbar in the component, when enabled.

    Returns number

  • set verticalViewScrollbarInset(v: number): void
  • Parameters

    • v: number

    Returns void

  • get verticalViewScrollbarMaxOpacity(): number
  • Gets or sets the max opacity to use for the vertical scrollbar in the component, when enabled.

    Returns number

  • set verticalViewScrollbarMaxOpacity(v: number): void
  • Parameters

    • v: number

    Returns void

  • get verticalViewScrollbarMode(): SeriesViewerScrollbarMode
  • Gets or sets the vertical scrollbar mode to use for the series viewer.

    Returns SeriesViewerScrollbarMode

  • set verticalViewScrollbarMode(v: SeriesViewerScrollbarMode): void
  • Parameters

    Returns void

  • get verticalViewScrollbarOutline(): string
  • Gets or sets the outline to use for the vertical scrollbar in the component, when enabled.

    Returns string

  • set verticalViewScrollbarOutline(v: string): void
  • Parameters

    • v: string

    Returns void

  • get verticalViewScrollbarShouldAddAutoTrackInsets(): boolean
  • Gets or sets whether to use automatic track insets for the vertical scrollbar in the component, when enabled.

    Returns boolean

  • set verticalViewScrollbarShouldAddAutoTrackInsets(v: boolean): void
  • Parameters

    • v: boolean

    Returns void

  • get verticalViewScrollbarStrokeThickness(): number
  • Gets or sets the stroke thickness to use for the vertical scrollbar in the component, when enabled.

    Returns number

  • set verticalViewScrollbarStrokeThickness(v: number): void
  • Parameters

    • v: number

    Returns void

  • get verticalViewScrollbarTrackEndInset(): number
  • Gets or sets the track end inset to use for the vertical scrollbar in the component, when enabled.

    Returns number

  • set verticalViewScrollbarTrackEndInset(v: number): void
  • Parameters

    • v: number

    Returns void

  • get verticalViewScrollbarTrackStartInset(): number
  • Gets or sets the track start inset to use for the vertical scrollbar in the component, when enabled.

    Returns number

  • set verticalViewScrollbarTrackStartInset(v: number): void
  • Parameters

    • v: number

    Returns void

  • get verticalViewScrollbarWidth(): number
  • Gets or sets the width to use for the vertical scrollbar in the component, when enabled.

    Returns number

  • set verticalViewScrollbarWidth(v: number): void
  • Parameters

    • v: number

    Returns void

  • get viewport(): IgRect
  • Gets a rectangle representing the bounds of the plot area.

    viewport property representing the bounds of the plot area.

    let viewport:Rect =  this.chart.viewport;
    

    Returns IgRect

  • get volumeBrushes(): string[]
  • Brushes to use for filling volume series in the volume pane.

    Use the VolumeBrushes property to set a collection of brushes that will be used to render fill area of multiple series in the volume pane of the Financial Chart control, e.g.

    <igx-financial-chart
    [dataSource]="data"
    volumeBrushes="Green, Blue">
    </igx-financial-chart>

    Returns string[]

  • set volumeBrushes(v: string[]): void
  • Parameters

    • v: string[]

    Returns void

  • get volumeOutlines(): string[]
  • Brushes to use for outlining volume series in the volume pane.

    Use the VolumeOutlines property to set a collection of brushes that will be used to render outline of multiple series in the volume pane of the Financial Chart control, e.g.

    <igx-financial-chart
    [dataSource]="data"
    volumeOutlines="Green, Blue">
    </igx-financial-chart>

    Returns string[]

  • set volumeOutlines(v: string[]): void
  • Parameters

    • v: string[]

    Returns void

  • get volumeThickness(): number
  • The outline thickness of volume series in the volume pane.

    Use the VolumeThickness property to set a number that will be used to render outline thickness of all series in the volume pane, e.g.

    <igx-financial-chart
    [dataSource]="data"
    volumeThickness="2.5">
    </igx-financial-chart>

    Returns number

  • set volumeThickness(v: number): void
  • Parameters

    • v: number

    Returns void

  • get volumeType(): FinancialChartVolumeType
  • The type of series to display in the volume pane.

    Use the VolumeType property to set a type of all series that will be rendered in the volume pane, e.g.

    <igx-financial-chart
    [dataSource]="data"
    volumeType="Column">
    </igx-financial-chart>

    Returns FinancialChartVolumeType

  • set volumeType(v: FinancialChartVolumeType): void
  • Parameters

    Returns void

  • get width(): string
  • Returns string

  • set width(value: string): void
  • Parameters

    • value: string

    Returns void

  • get windowRect(): IgRect
  • Gets or sets the rectangle representing the current scroll and zoom state of the chart. WindowRect is expressed as a Rectangle with coordinates and sizes between 0 and 1.

    Use WindowRect property representing the current scroll and zoom state of the chart.

    <igx-category-chart
    yAxisMinimumValue="0"
    [dataSource]="data"
    WindowRect=[0,0,1,1]>
    </igx-category-chart>
    this.chart.windowRect =[0,0,1,1];
    

    Returns IgRect

  • set windowRect(v: IgRect): void
  • Parameters

    Returns void

  • get windowRectMinHeight(): number
  • Sets or gets the minimum height that the window rect is allowed to reach before being clamped. Decrease this value if you want to allow for further zooming into the viewer. If this value is lowered too much it can cause graphical corruption due to floating point arithmetic inaccuracy. This property accepts values between 0.0 (max zooming) and 1.0 (no zooming)

    Returns number

  • set windowRectMinHeight(v: number): void
  • Parameters

    • v: number

    Returns void

  • get windowRectMinWidth(): number
  • Sets or gets the minimum width that the window rect is allowed to reach before being clamped. Decrease this value if you want to allow for further zooming into the viewer. If this value is lowered too much it can cause graphical corruption due to floating point arithmetic inaccuracy. This property accepts values between 0.0 (max zooming) and 1.0 (no zooming)

    Returns number

  • set windowRectMinWidth(v: number): void
  • Parameters

    • v: number

    Returns void

  • get windowSizeMinHeight(): number
  • Sets or gets minimum pixel height that the window is allowed to reach before being clamped. Decrease this value if you want to allow for further zooming into the viewer. If this value is lowered too much it can cause graphical corruption due to floating point arithmetic inaccuracy. This property is overridden by the WindowRectMinHeight property

    Returns number

  • set windowSizeMinHeight(v: number): void
  • Parameters

    • v: number

    Returns void

  • get windowSizeMinWidth(): number
  • Sets or gets minimum pixel width that the window is allowed to reach before being clamped. Decrease this value if you want to allow for further zooming into the viewer. If this value is lowered too much it can cause graphical corruption due to floating point arithmetic inaccuracy. This property is overridden by the WindowRectMinWidth property

    Returns number

  • set windowSizeMinWidth(v: number): void
  • Parameters

    • v: number

    Returns void

  • get xAxisBreaks(): IgCollection<any, any>
  • TimeAxisBreaks to apply to this chart when in time axis mode, representing spans of time to omit, such as weekends.

    Returns IgCollection<any, any>

  • set xAxisBreaks(v: IgCollection<any, any>): void
  • Parameters

    Returns void

  • get xAxisEnhancedIntervalPreferMoreCategoryLabels(): boolean
  • Gets or sets whether the x axis enhanced interval management should prefer to show all the labels if possible without collisions for supported types of category axes. This is for use with EnhancedIntervalMinimumCharacters = -1 and axes that have an integral interval.

    Returns boolean

  • set xAxisEnhancedIntervalPreferMoreCategoryLabels(v: boolean): void
  • Parameters

    • v: boolean

    Returns void

  • get xAxisExtent(): number
  • Gets or sets the distance between the X-axis and the bottom of the chart.

    To allocate space between the x-axis and the edge of the chart, set the XAxisExtent property.

    <igx-category-chart
    [dataSource]="data"
    xAxisExtent="250">
    </igx-category-chart>
    this.chart.xAxisExtent="250";
    

    Returns number

  • set xAxisExtent(v: number): void
  • Parameters

    • v: number

    Returns void

  • get xAxisFormatLabel(): ((item: any) => string)
  • Gets or sets function which takes an context object and returns a formatted label for the X-axis.

    To customize the text of the x-axis label, set XAxisFormatLabel to a single-parameter function. The argument passed to that function will be your data item.

    <igx-category-chart
    [dataSource]="data"
    [xAxisFormatLabel]="formatX"
    xAxisExtent="250">
    </igx-category-chart>
    formatX(item: any): string {
    return "[ " + item.label + "! ]";
    }

    Returns ((item: any) => string)

      • (item: any): string
      • Gets or sets function which takes an context object and returns a formatted label for the X-axis.

        To customize the text of the x-axis label, set XAxisFormatLabel to a single-parameter function. The argument passed to that function will be your data item.

        <igx-category-chart
        [dataSource]="data"
        [xAxisFormatLabel]="formatX"
        xAxisExtent="250">
        </igx-category-chart>
        formatX(item: any): string {
        return "[ " + item.label + "! ]";
        }

        Parameters

        • item: any

        Returns string

  • set xAxisFormatLabel(v: ((item: any) => string)): void
  • Parameters

    • v: ((item: any) => string)
        • (item: any): string
        • Parameters

          • item: any

          Returns string

    Returns void

  • get xAxisInverted(): boolean
  • Gets or sets whether to invert the direction of the X-axis by placing the first data items on the right side of the chart.

    To reverse the direction of items along the x-axis, set the XAxisInverted property to true.

    <igx-category-chart
    [dataSource]="data"
    xAxisInverted="true">
    </igx-category-chart>
    this.chart.XAxisInverted="True";
    

    Returns boolean

  • set xAxisInverted(v: boolean): void
  • Parameters

    • v: boolean

    Returns void

  • get xAxisLabel(): any
  • Gets or sets the format for labels along the X-axis.

    Returns any

  • set xAxisLabel(v: any): void
  • Parameters

    • v: any

    Returns void

  • get xAxisLabelAngle(): number
  • Gets or sets the angle of rotation for labels along the X-axis.

    To control the rotation of labels on the x-axis, set the XAxisLabelAngle property to a number of rotational degrees.

    <igx-category-chart
    [dataSource]="data"
    xAxisLabelAngle="45">
    </igx-category-chart>
    this.chart.xAxisLabelAngle="45";
    

    Returns number

  • set xAxisLabelAngle(v: number): void
  • Parameters

    • v: number

    Returns void

  • get xAxisLabelBottomMargin(): number
  • Gets or sets the bottom margin of labels on the X-axis

    Use the XAxisLabelBottomMargin property to apply a margin below the x-axis labels.

    <igx-category-chart
    [dataSource]="data"
    xAxisLabelBottomMargin="100">
    </igx-category-chart>
    this.chart.xAxisLabelBottomMargin ="100";
    

    Returns number

  • set xAxisLabelBottomMargin(v: number): void
  • Parameters

    • v: number

    Returns void

  • get xAxisLabelFormat(): string
  • Gets or sets the format string for the X axis label.

    Returns string

  • set xAxisLabelFormat(v: string): void
  • Parameters

    • v: string

    Returns void

  • get xAxisLabelFormatSpecifiers(): any[]
  • Gets or sets the format specifiers to use with the XAxisLabelFormat string.

    Returns any[]

  • set xAxisLabelFormatSpecifiers(v: any[]): void
  • Parameters

    • v: any[]

    Returns void

  • get xAxisLabelHorizontalAlignment(): HorizontalAlignment
  • Gets or sets Horizontal alignment of X-axis labels.

    Returns HorizontalAlignment

  • set xAxisLabelHorizontalAlignment(v: HorizontalAlignment): void
  • Parameters

    Returns void

  • get xAxisLabelLeftMargin(): number
  • Gets or sets the left margin of labels on the X-axis

    Use the XAxisLabelLeftMargin property to apply a margin left of the x-axis labels.

    <igx-category-chart
    [dataSource]="data"
    xAxisLabelLeftMargin="100">
    </igx-category-chart>
    this.chart.xAxisLabelLeftMargin ="100";
    

    Returns number

  • set xAxisLabelLeftMargin(v: number): void
  • Parameters

    • v: number

    Returns void

  • get xAxisLabelLocation(): XAxisLabelLocation
  • Gets or sets location of X-axis labels, relative to the plot area.

    Returns XAxisLabelLocation

  • set xAxisLabelLocation(v: XAxisLabelLocation): void
  • Parameters

    Returns void

  • get xAxisLabelRightMargin(): number
  • Gets or sets the right margin of labels on the X-axis

    Use the XAxisLabelRightMargin property to apply a margin right of the x-axis labels.

    <igx-category-chart
    [dataSource]="data"
    xAxisLabelRightMargin="100">
    </igx-category-chart>
    this.chart.xAxisLabelRightMargin="100";
    

    Returns number

  • set xAxisLabelRightMargin(v: number): void
  • Parameters

    • v: number

    Returns void

  • get xAxisLabelTextColor(): string
  • Gets or sets color of labels on the X-axis

    To change the color of x-axis labels, set the XAxisLabelTextColor property to a color string.

    <igx-category-chart
    [dataSource]="data"
    xAxisLabelTextColor="green">
    </igx-category-chart>
    this.chart.xAxisLabelTextColor="green";
    

    Returns string

  • set xAxisLabelTextColor(v: string): void
  • Parameters

    • v: string

    Returns void

  • get xAxisLabelTextStyle(): string
  • Gets or sets CSS font property for labels on X-axis

    To change the font of x-axis labels, set the XAxisLabelTextStyle property.

    <igx-category-chart
    [dataSource]="data"
    xAxisLabelTextStyle="italic 15px arial, sans-serif">
    </igx-category-chart>
    this.chart.xAxisLabelTextStyle="italic 15px arial, sans-serif";
    

    Returns string

  • set xAxisLabelTextStyle(v: string): void
  • Parameters

    • v: string

    Returns void

  • get xAxisLabelTopMargin(): number
  • Gets or sets the top margin of labels on the X-axis

    Use the XAxisLabelTopMargin property to apply a margin above the x-axis labels.

    <igx-category-chart
    [dataSource]="data"
    xAxisTitle="x axis"
    xAxisTitleTopMargin="100">
    </igx-category-chart>
    this.chart.xAxisTitleTopMargin="250";
    

    Returns number

  • set xAxisLabelTopMargin(v: number): void
  • Parameters

    • v: number

    Returns void

  • get xAxisLabelVerticalAlignment(): VerticalAlignment
  • Gets or sets Vertical alignment of X-axis labels.

    Use the XAxisLabelVerticalAlignment property to change the vertical position of x-axis labels.

    <igx-category-chart
    [dataSource]="data"
    xAxisExtent="250"
    xAxisLabelVerticalAlignment="bottom">
    </igx-category-chart>
    this.chart.xAxisLabelVerticalAlignment="bottom";
    

    Returns VerticalAlignment

  • set xAxisLabelVerticalAlignment(v: VerticalAlignment): void
  • Parameters

    Returns void

  • get xAxisLabelVisibility(): Visibility
  • Gets or sets Visibility of X-axis labels.

    To hide the x-axis labels, set XAxisLabelVisibility to collapsed.

    <igx-category-chart
    [dataSource]="data"
    xAxisLabelVisibility="collapsed">
    </igx-category-chart>
    this.chart.xAxisLabelVisibility="collapsed";
    

    Returns Visibility

  • set xAxisLabelVisibility(v: Visibility): void
  • Parameters

    Returns void

  • get xAxisMajorStroke(): string
  • Gets or sets the color to apply to major gridlines along the X-axis.

    Set XAxisMajorStroke to control the color of major gridlines extending vertically from the x-axis.

    <igx-category-chart
    [dataSource]="data"
    xAxisMajorStroke="green">
    </igx-category-chart>
    this.chart.xAxisMajorStroke="green";
    

    Returns string

  • set xAxisMajorStroke(v: string): void
  • Parameters

    • v: string

    Returns void

  • get xAxisMajorStrokeThickness(): number
  • Gets or sets the thickness to apply to major gridlines along the X-axis.

    Set XAxisMajorStrokeThickness to control the thickness of major gridlines extending vertically from the x-axis.

    <igx-category-chart
    [dataSource]="data"
    xAxisMajorStroke="green"
    xAxisMajorStrokeThickness="3">
    </igx-category-chart>
    this.chart.xAxisMajorStrokeThickness="3" ;
    

    Returns number

  • set xAxisMajorStrokeThickness(v: number): void
  • Parameters

    • v: number

    Returns void

  • get xAxisMaximumValue(): Date
  • Gets or sets maximum value on x-axis

    Returns Date

  • set xAxisMaximumValue(v: Date): void
  • Parameters

    • v: Date

    Returns void

  • get xAxisMinimumValue(): Date
  • Gets or sets minimum value on x-axis

    Returns Date

  • set xAxisMinimumValue(v: Date): void
  • Parameters

    • v: Date

    Returns void

  • get xAxisMinorStroke(): string
  • Gets or sets the color to apply to minor gridlines along the X-axis.

    Set XAxisMinorStroke to control the color of minor gridlines extending vertically from the x-axis.

    <igx-category-chart
    [dataSource]="data"
    xAxisMinorStroke="green">
    </igx-category-chart>
    this.chart.xAxisExtent="250";
    

    Returns string

  • set xAxisMinorStroke(v: string): void
  • Parameters

    • v: string

    Returns void

  • get xAxisMinorStrokeThickness(): number
  • Gets or sets the thickness to apply to minor gridlines along the X-axis.

    Set XAxisMinorStrokeThickness to control the thickness of minor gridlines extending vertically from the x-axis.

    <igx-category-chart
    [dataSource]="data"
    xAxisMinorStroke="green"
    xAxisMinorStrokeThickness="3">
    </igx-category-chart>
    this.chart.xAxisMinorStrokeThickness="3";
    

    Returns number

  • set xAxisMinorStrokeThickness(v: number): void
  • Parameters

    • v: number

    Returns void

  • get xAxisMode(): FinancialChartXAxisMode
  • The scaling mode of the X-axis.

    Use the XAxisMode property to plot data items without any breaks in data range (Ordinal mode) or with breaks in data range (Time mode) such as weekends/holidays. Note that the Ordinal axis mode is less expensive to use in the financial chart than the Time axis mode.

    <igx-financial-chart
    [dataSource]="data"
    xAxisMode="Time">
    </igx-financial-chart>

    Returns FinancialChartXAxisMode

  • set xAxisMode(v: FinancialChartXAxisMode): void
  • Parameters

    Returns void

  • get xAxisStrip(): string
  • Gets or sets the color to apply to stripes along the X-axis.

    Set XAxisStrip to control the alternating color of stripes extending vertically from the x-axis.

    <igx-category-chart
    [dataSource]="data"
    xAxisStrip="green">
    </igx-category-chart>
    this.chart.xAxisStrip="green";
    

    Returns string

  • set xAxisStrip(v: string): void
  • Parameters

    • v: string

    Returns void

  • get xAxisStroke(): string
  • Gets or sets the color to apply to the X-axis line.

    Set XAxisStroke to control the color of the x-axis line.

    <igx-category-chart
    [dataSource]="data"
    xAxisStroke="green">
    </igx-category-chart>
    this.chart.xAxisStroke="green"";
    

    Returns string

  • set xAxisStroke(v: string): void
  • Parameters

    • v: string

    Returns void

  • get xAxisStrokeThickness(): number
  • Gets or sets the thickness to apply to the X-axis line.

    Set XAxisStrokeThickness to control the thickness of the x-axis line.

    <igx-category-chart
    [dataSource]="data"
    xAxisStrokeThickness="3">
    </igx-category-chart>
    this.chart.xAxisStrokeThickness="2";
    

    Returns number

  • set xAxisStrokeThickness(v: number): void
  • Parameters

    • v: number

    Returns void

  • get xAxisTickLength(): number
  • Gets or sets the length of tickmarks along the X-axis.

    Set XAxisTickLength to control the length of tickmarks extending vertically from the x-axis line.

    <igx-category-chart
    [dataSource]="data"
    xAxisTickLength="23">
    </igx-category-chart>
    this.chart.xAxisTickLength="25";
    

    Returns number

  • set xAxisTickLength(v: number): void
  • Parameters

    • v: number

    Returns void

  • get xAxisTickStroke(): string
  • Gets or sets the color to apply to tickmarks along the X-axis.

    Set XAxisTickStroke to control the color of tickmarks extending vertically from the x-axis line.

    <igx-category-chart
    [dataSource]="data"
    xAxisTickStroke="green">
    </igx-category-chart>
    this.chart. xAxisTickStroke="green";
    

    Returns string

  • set xAxisTickStroke(v: string): void
  • Parameters

    • v: string

    Returns void

  • get xAxisTickStrokeThickness(): number
  • Gets or sets the thickness to apply to tickmarks along the X-axis.

    Set XAxisTickStrokeThickness to control the thickness of tickmarks extending vertically from the x-axis line.

    <igx-category-chart
    [dataSource]="data"
    xAxisTickStrokeThickness="10">
    </igx-category-chart>
    this.chart.xAxisTickStrokeThickness="20";
    

    Returns number

  • set xAxisTickStrokeThickness(v: number): void
  • Parameters

    • v: number

    Returns void

  • get xAxisTitle(): string
  • Gets or sets the Text to display below the X-axis.

    Set XAxisTitle to display a label adjacent to the x-axis.

    <igx-category-chart
    [dataSource]="data"
    xAxisTitle="x axis">
    </igx-category-chart>
    this.chart. xAxisTitle="x axis";
    

    Returns string

  • set xAxisTitle(v: string): void
  • Parameters

    • v: string

    Returns void

  • get xAxisTitleAlignment(): HorizontalAlignment
  • Gets or sets Horizontal alignment of the X-axis title.

    Set XAxisTitleAlignment to control the horizontal alignment of the x-axis title.

    <igx-category-chart
    [dataSource]="data"
    xAxisTitle="x axis"
    xAxisTitleAlignment="right">
    </igx-category-chart>
    this.chart.xAxisTitleAlignment="right";
    

    Returns HorizontalAlignment

  • set xAxisTitleAlignment(v: HorizontalAlignment): void
  • Parameters

    Returns void

  • get xAxisTitleAngle(): number
  • Gets or sets the angle of rotation for the X-axis title.

    Set XAxisTitleAngle to control the rotation of the x-axis title.

    <igx-category-chart
    [dataSource]="data"
    xAxisTitle="x axis"
    xAxisTitleAngle="45">
    </igx-category-chart>
    this.chart.xAxisTitleAngle="50";
    

    Returns number

  • set xAxisTitleAngle(v: number): void
  • Parameters

    • v: number

    Returns void

  • get xAxisTitleBottomMargin(): number
  • Gets or sets the bottom margin of a title on the X-axis

    Use the XAxisTitleBottomMargin property to apply a margin below the x-axis title.

    <igx-category-chart
    [dataSource]="data"
    xAxisTitle="x axis"
    xAxisTitleBottomMargin="100">
    </igx-category-chart>
    this.chart.xAxisTitleBottomMargin="150";
    

    Returns number

  • set xAxisTitleBottomMargin(v: number): void
  • Parameters

    • v: number

    Returns void

  • get xAxisTitleLeftMargin(): number
  • Gets or sets the left margin of a title on the X-axis

    Use the XAxisTitleLeftMargin property to apply a margin left of the x-axis title.

    <igx-category-chart
    [dataSource]="data"
    xAxisTitle="x axis"
    xAxisTitleAlignment="left"
    xAxisTitleLeftMargin="100">
    </igx-category-chart>
    this.chart.xAxisTitleLeftMargin="150";
    

    Returns number

  • set xAxisTitleLeftMargin(v: number): void
  • Parameters

    • v: number

    Returns void

  • get xAxisTitleMargin(): number
  • Gets or sets the margin around a title on the X-axis

    Use the XAxisTitleMargin property to set a margin around the y-axis title.

    Returns number

  • set xAxisTitleMargin(v: number): void
  • Parameters

    • v: number

    Returns void

  • get xAxisTitleRightMargin(): number
  • Gets or sets the right margin of a title on the X-axis

    Use the XAxisTitleRightMargin property to apply a margin right of the x-axis title.

    <igx-category-chart
    [dataSource]="data"
    xAxisTitle="x axis"
    xAxisTitleAlignment="right"
    xAxisTitleRightMargin="100">
    </igx-category-chart>
    this.chart.xAxisTitleRightMargin="100";
    

    Returns number

  • set xAxisTitleRightMargin(v: number): void
  • Parameters

    • v: number

    Returns void

  • get xAxisTitleTextColor(): string
  • Gets or sets color of title on the X-axis

    To change the color of the x-axis title, set the XAxisTitleTextColor property to a color string.

    <igx-category-chart
    [dataSource]="data"
    xAxisTitle="x axis"
    xAxisTitleTextColor="green">
    </igx-category-chart>
    this.chart.xAxisTitleTextColor="green";
    

    Returns string

  • set xAxisTitleTextColor(v: string): void
  • Parameters

    • v: string

    Returns void

  • get xAxisTitleTextStyle(): string
  • Gets or sets CSS font property for title on X-axis

    To change the font of the x-axis title, set the XAxisTitleTextStyle property.

    <igx-category-chart
    [dataSource]="data"
    xAxisTitle="x axis"
    xAxisTitleTextStyle="italic 15px arial, sans-serif">
    </igx-category-chart>
    this.chart.xAxisTitleTextStyle="italic 15px arial, sans-serif";
    

    Returns string

  • set xAxisTitleTextStyle(v: string): void
  • Parameters

    • v: string

    Returns void

  • get xAxisTitleTopMargin(): number
  • Gets or sets the top margin of a title on the X-axis

    Use the XAxisTitleTopMargin property to apply a margin above the x-axis title.

    <igx-category-chart
    [dataSource]="data"
    xAxisTitle="x axis"
    xAxisTitleTopMargin="100">
    </igx-category-chart>
    this.chart.xAxisTitleTopMargin="150";
    

    Returns number

  • set xAxisTitleTopMargin(v: number): void
  • Parameters

    • v: number

    Returns void

  • get xAxisZoomMaximumCategoryRange(): number
  • Gets or sets number of visible categories at maximum zooming level This property works only with ordinal XAxisMode and it is overridden by chart's WindowRectMinWidth property

    Returns number

  • set xAxisZoomMaximumCategoryRange(v: number): void
  • Parameters

    • v: number

    Returns void

  • get xAxisZoomMaximumItemSpan(): number
  • Gets or sets maximum pixel span of series item that will be visible at maximum zooming level This property ensures that series item does not get stretch above specified value. This property works only with ordinal XAxisMode and it is overridden by chart's WindowRectMinWidth property

    Returns number

  • set xAxisZoomMaximumItemSpan(v: number): void
  • Parameters

    • v: number

    Returns void

  • get xAxisZoomToCategoryRange(): number
  • Gets or sets number of categories that the chart will zoom in and fill plot area This property is overridden by chart's WindowRect or WindowScaleHorizontal properties

    Returns number

  • set xAxisZoomToCategoryRange(v: number): void
  • Parameters

    • v: number

    Returns void

  • get xAxisZoomToCategoryStart(): number
  • Gets or sets starting category that chart will move its zoom window. Acceptable value is between 0 and number of data items This property works only with ordinal XAxisMode and it is overridden by chart's WindowRect or WindowScaleHorizontal properties

    Returns number

  • set xAxisZoomToCategoryStart(v: number): void
  • Parameters

    • v: number

    Returns void

  • get xAxisZoomToItemSpan(): number
  • Gets or sets pixel span of series item that will be used to zoom chart such that the item has desired span Chart will automaticlly zoom in until series item has specified pixel span. This property works only with ordinal XAxisMode and it is overridden by chart's WindowRect or WindowScaleHorizontal properties

    Returns number

  • set xAxisZoomToItemSpan(v: number): void
  • Parameters

    • v: number

    Returns void

  • get yAxisAbbreviateLargeNumbers(): boolean
  • Gets or sets whether the large numbers on the Y-axis labels are abbreviated.

    Returns boolean

  • set yAxisAbbreviateLargeNumbers(v: boolean): void
  • Parameters

    • v: boolean

    Returns void

  • get yAxisActualMaximum(): number
  • Gets the current maximum value for the Y-axis.

    Returns number

  • get yAxisActualMinimum(): number
  • Gets the current minimum value for the Y-axis.

    Returns number

  • get yAxisEnhancedIntervalPreferMoreCategoryLabels(): boolean
  • Gets or sets whether the y axis enhanced interval management should prefer to show all the labels if possible without collisions for supported types of category axes. This is for use with EnhancedIntervalMinimumCharacters = -1 and axes that have an integral interval.

    Returns boolean

  • set yAxisEnhancedIntervalPreferMoreCategoryLabels(v: boolean): void
  • Parameters

    • v: boolean

    Returns void

  • get yAxisExtent(): number
  • Gets or sets the distance between the Y-axis and the left edge of the chart.

    To allocate space between the x-axis and the edge of the chart, set the XAxisExtent property.

    <igx-category-chart
    [dataSource]="data"
    xAxisExtent="250">
    </igx-category-chart>
    this.chart.xAxisExtent="250";
    

    Returns number

  • set yAxisExtent(v: number): void
  • Parameters

    • v: number

    Returns void

  • get yAxisFormatLabel(): ((item: any) => string)
  • Gets or sets function which takes a context object and returns a formatted label for the Y-axis.

    To customize the text of the y-axis label, set YAxisFormatLabel to a single-parameter function. The argument passed to that function will be the numeric value corresponding to a position on the y-axis.

    <igx-category-chart
    [dataSource]="data"
    [yAxisFormatLabel]="formatY">
    </igx-category-chart>
    formatY(value: any): string {
    return "[ " + value+ "! ]";
    }

    Returns ((item: any) => string)

      • (item: any): string
      • Gets or sets function which takes a context object and returns a formatted label for the Y-axis.

        To customize the text of the y-axis label, set YAxisFormatLabel to a single-parameter function. The argument passed to that function will be the numeric value corresponding to a position on the y-axis.

        <igx-category-chart
        [dataSource]="data"
        [yAxisFormatLabel]="formatY">
        </igx-category-chart>
        formatY(value: any): string {
        return "[ " + value+ "! ]";
        }

        Parameters

        • item: any

        Returns string

  • set yAxisFormatLabel(v: ((item: any) => string)): void
  • Parameters

    • v: ((item: any) => string)
        • (item: any): string
        • Parameters

          • item: any

          Returns string

    Returns void

  • get yAxisInterval(): number
  • Gets or sets the distance between each label and grid line along the Y-axis.

    The YAxisInterval determines how often to show a label, tickmark, and/or gridline along the y-axis. Set this property to a number less than the numeric range of the y-axis.

    <igx-financial-chart
    [dataSource]="data"
    yAxisInterval="10">
    </igx-financial-chart>

    Returns number

  • set yAxisInterval(v: number): void
  • Parameters

    • v: number

    Returns void

  • get yAxisInverted(): boolean
  • Gets or sets whether to invert the direction of the Y-axis by placing the minimum numeric value at the top of the chart.

    You can use YAxisInverted to invert the scale of the y axis like this:

    <igx-category-chart
    [dataSource]="data"
    yAxisInverted="true"
    >

    </igx-category-chart>
    this.chart.yAxisInverted="true";
    

    The default value of YAxisInverted is false.

    Returns boolean

  • set yAxisInverted(v: boolean): void
  • Parameters

    • v: boolean

    Returns void

  • get yAxisIsLogarithmic(): boolean
  • Gets or sets whether the Y-axis should use a logarithmic scale instead of a linear one. Since log(-1) is imaginary and log(0) is undefined, it is recommended to enable this property only when the Y-axis minimum is greater than zero.

    Returns boolean

  • set yAxisIsLogarithmic(v: boolean): void
  • Parameters

    • v: boolean

    Returns void

  • get yAxisLabel(): any
  • Gets or sets the property or string from which the labels are derived.

    Returns any

  • set yAxisLabel(v: any): void
  • Parameters

    • v: any

    Returns void

  • get yAxisLabelAngle(): number
  • Gets or sets the angle of rotation for labels along the Y-axis.

    To control the rotation of labels on the y-axis, set the YAxisLabelAngle property to a number of rotational degrees.

    <igx-category-chart
    [dataSource]="data"
    yAxisLabelAngle="45">
    </igx-category-chart>
    this.chart.yAxisLabelAngle="25";
    

    Returns number

  • set yAxisLabelAngle(v: number): void
  • Parameters

    • v: number

    Returns void

  • get yAxisLabelBottomMargin(): number
  • Gets or sets the bottom margin of labels on the Y-axis

    Use the YAxisLabelBottomMargin property to apply a margin below the y-axis labels.

    <igx-category-chart
    [dataSource]="data"
    yAxisLabelBottomMargin="100">
    </igx-category-chart>
    this.chart.yAxisLabelBottomMargin="250";
    

    Returns number

  • set yAxisLabelBottomMargin(v: number): void
  • Parameters

    • v: number

    Returns void

  • get yAxisLabelFormat(): string
  • Gets or sets the format string for the Y axis label.

    Returns string

  • set yAxisLabelFormat(v: string): void
  • Parameters

    • v: string

    Returns void

  • get yAxisLabelFormatSpecifiers(): any[]
  • Gets or sets the format specifiers to use with the YAxisLabelFormat string.

    Returns any[]

  • set yAxisLabelFormatSpecifiers(v: any[]): void
  • Parameters

    • v: any[]

    Returns void

  • get yAxisLabelHorizontalAlignment(): HorizontalAlignment
  • Gets or sets Horizontal alignment of Y-axis labels.

    Returns HorizontalAlignment

  • set yAxisLabelHorizontalAlignment(v: HorizontalAlignment): void
  • Parameters

    Returns void

  • get yAxisLabelLeftMargin(): number
  • Gets or sets the left margin of labels on the Y-axis

    Use the YAxisLabelLeftMargin property to apply a margin left of the y-axis labels.

    <igx-category-chart
    [dataSource]="data"
    yAxisLabelLeftMargin="100">
    </igx-category-chart>
    this.chart. yAxisLabelLeftMargin="250";
    

    Returns number

  • set yAxisLabelLeftMargin(v: number): void
  • Parameters

    • v: number

    Returns void

  • get yAxisLabelLocation(): YAxisLabelLocation
  • Gets or sets location of Y-axis labels, relative to the plot area.

    Set the YAxisLabelLocation property to change the location of the y-axis and its labels.

    <igx-category-chart
    [dataSource]="data"
    yAxisLabelLocation="outsideRight">
    </igx-category-chart>
    this.chart.yAxisLabelLocation="outsideRight";
    

    Returns YAxisLabelLocation

  • set yAxisLabelLocation(v: YAxisLabelLocation): void
  • Parameters

    Returns void

  • get yAxisLabelRightMargin(): number
  • Gets or sets the right margin of labels on the Y-axis

    Use the YAxisLabelRightMargin property to apply a margin right of the y-axis labels.

    <igx-category-chart
    [dataSource]="data"
    yAxisLabelRightMargin="100">
    </igx-category-chart>
    this.chart.yAxisLabelRightMargin="250";
    

    Returns number

  • set yAxisLabelRightMargin(v: number): void
  • Parameters

    • v: number

    Returns void

  • get yAxisLabelTextColor(): string
  • Gets or sets color of labels on the Y-axis

    To change the color of y-axis labels, set the YAxisLabelTextColor property to a color string.

    <igx-category-chart
    [dataSource]="data"
    yAxisLabelTextColor="green">
    </igx-category-chart>
    this.chart.yAxisLabelTextColor="green";
    

    Returns string

  • set yAxisLabelTextColor(v: string): void
  • Parameters

    • v: string

    Returns void

  • get yAxisLabelTextStyle(): string
  • Gets or sets CSS font property for labels on Y-axis

    To change the font of x-axis labels, set the YAxisLabelTextStyle property.

    <igx-category-chart
    [dataSource]="data"
    yAxisLabelTextStyle="italic 15px arial, sans-serif">
    </igx-category-chart>
    this.chart. yAxisLabelTextStyle="italic 15px arial, sans-serif";
    

    Returns string

  • set yAxisLabelTextStyle(v: string): void
  • Parameters

    • v: string

    Returns void

  • get yAxisLabelTopMargin(): number
  • Gets or sets the top margin of labels on the Y-axis

    Use the YAxisLabelTopMargin property to apply a margin above the y-axis labels.

    <igx-category-chart
    [dataSource]="data"
    yAxisLabelTopMargin="100">
    </igx-category-chart>
    this.chart.yAxisLabelTopMargin="250";
    

    Returns number

  • set yAxisLabelTopMargin(v: number): void
  • Parameters

    • v: number

    Returns void

  • get yAxisLabelVerticalAlignment(): VerticalAlignment
  • Gets or sets Vertical alignment of Y-axis labels.

    Returns VerticalAlignment

  • set yAxisLabelVerticalAlignment(v: VerticalAlignment): void
  • Parameters

    Returns void

  • get yAxisLabelVisibility(): Visibility
  • Gets or sets Visibility of Y-axis labels.

    To hide the y-axis labels, set YAxisLabelVisibility to collapsed.

    <igx-category-chart
    [dataSource]="data"
    yAxisLabelVisibility="collapsed">
    </igx-category-chart>
    this.chart.yAxisLabelVisibility="collapsed"";
    

    Returns Visibility

  • set yAxisLabelVisibility(v: Visibility): void
  • Parameters

    Returns void

  • get yAxisLogarithmBase(): number
  • Gets or sets the base value to use in the log function when mapping the position of data items along the Y-axis. This property is effective only when YAxisIsLogarithmic is true.

    Returns number

  • set yAxisLogarithmBase(v: number): void
  • Parameters

    • v: number

    Returns void

  • get yAxisMajorStroke(): string
  • Gets or sets the color to apply to major gridlines along the Y-axis.

    Set YAxisMajorStroke to control the color of major gridlines extending horizontally from the y-axis.

    <igx-category-chart
    [dataSource]="data"
    yAxisMajorStroke="green">
    </igx-category-chart>
    this.chart.yAxisMajorStroke="green";
    

    Returns string

  • set yAxisMajorStroke(v: string): void
  • Parameters

    • v: string

    Returns void

  • get yAxisMajorStrokeThickness(): number
  • Gets or sets the thickness to apply to major gridlines along the Y-axis.

    Set YAxisMajorStrokeThickness to control the thickness of major gridlines extending horizontally from the y-axis.

    <igx-category-chart
    [dataSource]="data"
    yAxisMajorStrokeThickness="3">
    </igx-category-chart>
    this.chart.yAxisMajorStrokeThickness="2";
    

    Returns number

  • set yAxisMajorStrokeThickness(v: number): void
  • Parameters

    • v: number

    Returns void

  • get yAxisMaximumValue(): number
  • Gets or sets the data value corresponding to the maximum value of the Y-axis.

    The YAxisMaximumValue determines ending value of labels, tickmarks, and gridlines on the y-axis.

    <igx-financial-chart
    [dataSource]="data"
    yAxisMaximumValue="100">
    </igx-financial-chart>

    Returns number

  • set yAxisMaximumValue(v: number): void
  • Parameters

    • v: number

    Returns void

  • get yAxisMinimumValue(): number
  • Gets or sets the data value corresponding to the minimum value of the Y-axis.

    The YAxisMinimumValue determines starting value of labels, tickmarks, and gridlines on the y-axis.

    <igx-financial-chart
    [dataSource]="data"
    yAxisMinimumValue="10">
    </igx-financial-chart>

    Returns number

  • set yAxisMinimumValue(v: number): void
  • Parameters

    • v: number

    Returns void

  • get yAxisMinorInterval(): number
  • Gets or sets the frequency of displayed minor lines along the Y-axis.

    The YAxisMinorInterval determines how often to show minor gridline along the y-axis. Set this property to a number less than the YAxisInterval and the numeric range of the y-axis.

    <igx-financial-chart
    [dataSource]="data"
    yAxisMinorInterval="5">
    </igx-financial-chart>

    Returns number

  • set yAxisMinorInterval(v: number): void
  • Parameters

    • v: number

    Returns void

  • get yAxisMinorStroke(): string
  • Gets or sets the color to apply to minor gridlines along the Y-axis.

    Set YAxisMinorStroke to control the color of minor gridlines extending horizontally from the y-axis.

    <igx-category-chart
    [dataSource]="data"
    yAxisMinorStroke="green"
    yAxisMinorStrokeThickness="1">
    </igx-category-chart>
    this.chart.yAxisMinorStroke="green";
    

    Returns string

  • set yAxisMinorStroke(v: string): void
  • Parameters

    • v: string

    Returns void

  • get yAxisMinorStrokeThickness(): number
  • Gets or sets the thickness to apply to minor gridlines along the Y-axis.

    Set YAxisMinorStrokeThickness to control the thickness of minor gridlines extending horizontally from the y-axis.

    <igx-category-chart
    [dataSource]="data"
    yAxisMinorStroke="green"
    yAxisMinorStrokeThickness="3">
    </igx-category-chart>
    this.chart.yAxisMinorStrokeThickness="3";
    

    Returns number

  • set yAxisMinorStrokeThickness(v: number): void
  • Parameters

    • v: number

    Returns void

  • get yAxisMode(): FinancialChartYAxisMode
  • The scaling mode of the Y-axis.

    Use the YAxisMode property to plot data items using their actual values (Numeric) or using percent changes from the first data point (PercentChange), e.g.

    <igx-financial-chart
    [dataSource]="data"
    yAxisMode="PercentChange">
    </igx-financial-chart>

    Returns FinancialChartYAxisMode

  • set yAxisMode(v: FinancialChartYAxisMode): void
  • Parameters

    Returns void

  • get yAxisStrip(): string
  • Gets or sets the color to apply to stripes along the Y-axis.

    Set YAxisStrip to control the alternating color of stripes extending horizontally from the y-axis.

    <igx-category-chart
    [dataSource]="data"
    yAxisStrip="green">
    </igx-category-chart>
    this.chart.yAxisStrip="green";
    

    Returns string

  • set yAxisStrip(v: string): void
  • Parameters

    • v: string

    Returns void

  • get yAxisStroke(): string
  • Gets or sets the color to apply to the Y-axis line.

    Set YAxisStroke to control the color of the y-axis line.

    <igx-category-chart
    [dataSource]="data"
    yAxisStroke="green">
    </igx-category-chart>
    this.chart.yAxisStroke="green";
    

    Returns string

  • set yAxisStroke(v: string): void
  • Parameters

    • v: string

    Returns void

  • get yAxisStrokeThickness(): number
  • Gets or sets the thickness to apply to the Y-axis line.

    Set YAxisStrokeThickness to control the thickness of the y-axis line.

    <igx-category-chart
    [dataSource]="data"
    yAxisStroke="green"
    yAxisStrokeThickness="3">
    </igx-category-chart>
    this.chart. yAxisStrokeThickness="2";
    

    Returns number

  • set yAxisStrokeThickness(v: number): void
  • Parameters

    • v: number

    Returns void

  • get yAxisTickLength(): number
  • Gets or sets the length of tickmarks along the Y-axis.

    Set YAxisTickLength to control the length of tickmarks extending horizontally from the y-axis line.

    <igx-category-chart
    [dataSource]="data"
    yAxisTickLength="23">
    </igx-category-chart>
    this.chart.yAxisTickLength="25";
    

    Returns number

  • set yAxisTickLength(v: number): void
  • Parameters

    • v: number

    Returns void

  • get yAxisTickStroke(): string
  • Gets or sets the color to apply to tickmarks along the Y-axis.

    Set YAxisTickStroke to control the color of tickmarks extending horizontally from the y-axis line.

    <igx-category-chart
    [dataSource]="data"
    yAxisTickLength="5"
    yAxisTickStroke="green">
    </igx-category-chart>
    this.chart.yAxisTickStroke="green";
    

    Returns string

  • set yAxisTickStroke(v: string): void
  • Parameters

    • v: string

    Returns void

  • get yAxisTickStrokeThickness(): number
  • Gets or sets the thickness to apply to tickmarks along the Y-axis.

    Set YAxisTickStrokeThickness to control the thickness of tickmarks extending vertically from the y-axis line.

    <igx-category-chart
    [dataSource]="data"
    yAxisTickLength="5"
    yAxisTickStrokeThickness="10">
    </igx-category-chart>
    this.chart.yAxisTickStrokeThickness="25";
    

    Returns number

  • set yAxisTickStrokeThickness(v: number): void
  • Parameters

    • v: number

    Returns void

  • get yAxisTitle(): string
  • Gets or sets the Text to display to the left of the Y-axis.

    Set YAxisTitle to display a label adjacent to the y-axis.

    <igx-category-chart
    [dataSource]="data"
    yAxisTitle="y axis">
    </igx-category-chart>
    this.chart.yAxisTitle="y axis";
    

    Returns string

  • set yAxisTitle(v: string): void
  • Parameters

    • v: string

    Returns void

  • get yAxisTitleAlignment(): VerticalAlignment
  • Gets or sets Vertical alignment of the Y-axis title.

    Set YAxisTitleAlignment to control the vertical alignment of the x-axis title.

    <igx-category-chart
    [dataSource]="data"
    yAxisTitle="y axis"
    yAxisTitleAlignment="bottom">
    </igx-category-chart>
    this.chart.yAxisTitleAlignment="bottom";
    

    Returns VerticalAlignment

  • set yAxisTitleAlignment(v: VerticalAlignment): void
  • Parameters

    Returns void

  • get yAxisTitleAngle(): number
  • Gets or sets the angle of rotation for the Y-axis title.

    Set YAxisTitleAngle to control the rotation of the y-axis title.

    <igx-category-chart
    [dataSource]="data"
    yAxisTitle="y axis"
    yAxisTitleAngle="45">
    </igx-category-chart>
    this.chart.yAxisTitleAngle="25";
    

    Returns number

  • set yAxisTitleAngle(v: number): void
  • Parameters

    • v: number

    Returns void

  • get yAxisTitleBottomMargin(): number
  • Gets or sets the bottom margin of a title on the Y-axis

    Use the YAxisTitleBottomMargin property to apply a margin below the y-axis title.

    <igx-category-chart
    [dataSource]="data"
    yAxisTitle="y axis"
    yAxisTitleAlignment="bottom"
    yAxisTitleBottomMargin="100">
    </igx-category-chart>
    this.chart.yAxisTitleBottomMargin="150";
    

    Returns number

  • set yAxisTitleBottomMargin(v: number): void
  • Parameters

    • v: number

    Returns void

  • get yAxisTitleLeftMargin(): number
  • Gets or sets the left margin of a title on the Y-axis

    Use the YAxisTitleLeftMargin property to apply a margin left of the y-axis title.

    <igx-category-chart
    [dataSource]="data"
    yAxisTitle="y axis"
    yAxisTitleLeftMargin="100">
    </igx-category-chart>
    this.chart.yAxisTitleLeftMargin="150";
    

    Returns number

  • set yAxisTitleLeftMargin(v: number): void
  • Parameters

    • v: number

    Returns void

  • get yAxisTitleMargin(): number
  • Gets or sets the margin around a title on the Y-axis

    Use the YAxisTitleMargin property to set a margin around the y-axis title.

    Returns number

  • set yAxisTitleMargin(v: number): void
  • Parameters

    • v: number

    Returns void

  • get yAxisTitleRightMargin(): number
  • Gets or sets the right margin of a title on the Y-axis

    Use the YAxisTitleRightMargin property to apply a margin right of the y-axis title.

    <igx-category-chart
    [dataSource]="data"
    yAxisTitle="y axis"
    yAxisTitleRightMargin="100">
    </igx-category-chart>
    this.chart.yAxisTitleRightMargin="150";
    

    Returns number

  • set yAxisTitleRightMargin(v: number): void
  • Parameters

    • v: number

    Returns void

  • get yAxisTitleTextColor(): string
  • Gets or sets color of title on the Y-axis

    To change the color of the y-axis title, set the YAxisTitleTextColor property to a color string.

    <igx-category-chart
    [dataSource]="data"
    yAxisTitle="y axis"
    yAxisTitleTextColor="green">
    </igx-category-chart>
    this.chart.yAxisTitleTextColor="green";
    

    Returns string

  • set yAxisTitleTextColor(v: string): void
  • Parameters

    • v: string

    Returns void

  • get yAxisTitleTextStyle(): string
  • Gets or sets CSS font property for title on Y-axis

    To change the font of the x-axis title, set the YAxisTitleTextStyle property.

    <igx-category-chart
    [dataSource]="data"
    xAxisTitle="y axis"
    yAxisTitleTextStyle="italic 15px arial, sans-serif">
    </igx-category-chart>
    this.chart.yAxisTitleTextStyle="italic 15px arial, sans-serif";
    

    Returns string

  • set yAxisTitleTextStyle(v: string): void
  • Parameters

    • v: string

    Returns void

  • get yAxisTitleTopMargin(): number
  • Gets or sets the top margin of a title on the Y-axis

    Use the YAxisTitleTopMargin property to apply a margin above the y-axis title.

    <igx-category-chart
    [dataSource]="data"
    yAxisTitle="y axis"
    yAxisTitleAlignment="top"
    yAxisTitleTopMargin="100">
    </igx-category-chart>
    this.chart.yAxisTitleTopMargin="150";
    

    Returns number

  • set yAxisTitleTopMargin(v: number): void
  • Parameters

    • v: number

    Returns void

  • get zoomSliderType(): FinancialChartZoomSliderType
  • Gets or sets type of series to display in the zoom slider pane.

    Use the ZoomSliderType property to set a type of all series that will be rendered in the zoom pane, e.g.

    <igx-financial-chart
    [dataSource]="data"
    zoomSliderType="Candle">
    </igx-financial-chart>

    Returns FinancialChartZoomSliderType

  • set zoomSliderType(v: FinancialChartZoomSliderType): void
  • Parameters

    Returns void

  • get zoomSliderXAxisMajorStroke(): string
  • Gets or sets stroke brush of major gridlines on x-axis of the zoom slider pane

    Returns string

  • set zoomSliderXAxisMajorStroke(v: string): void
  • Parameters

    • v: string

    Returns void

  • get zoomSliderXAxisMajorStrokeThickness(): number
  • Gets or sets thickness of major gridlines on x-axis of the zoom slider pane

    Returns number

  • set zoomSliderXAxisMajorStrokeThickness(v: number): void
  • Parameters

    • v: number

    Returns void

Methods

  • Parameters

    • listener: ICommandAvailabilityListener

    Returns void

  • Parameters

    • listener: ICommandStateChangedListener

    Returns void

  • Returns void

  • Destroy this control

    Use the destroy property to destroy the chart.

    this.chart.destroy();
    

    Returns void

  • Returns visuals as a serialized string.

    Returns string

  • Parameters

    • name: string

    Returns any

  • Forces any pending refresh to the chart to be finished.

    Method flush used to Forces any pending deferred work to render on the chart before continuing.

    this.chart.flush();
    

    Returns void

  • Converts the given visual location to a data value.

    Parameters

    • unscaledValue: number
      • The x-coordinate of the location to scale.

    Returns number

  • Converts the given visual location to a data value.

    Parameters

    • unscaledValue: number
      • The y-coordinate of the location to scale.

    Returns number

  • Converts the given data value to a visual location.

    Parameters

    • scaledValue: number
      • The data value to un-scale.

    Returns number

  • Converts the given data value to a visual location.

    Parameters

    • scaledValue: number
      • The data value to un-scale.

    Returns number

  • Hides the active main tooltip, if displayed.

    Use the HideToolTip method to hide the active tooltip.

    this.chart.hideToolTip();
    

    Returns void

  • Returns void

  • Returns void

  • Returns void

  • Used to manually notify the chart that the data source has reset or cleared its items.

    Use notifyClearItems method to notifies the chart that the items have been cleared from an associated data source.

    this.chart.notifyClearItems(this.data);
    

    Parameters

    • source_: any

    Returns void

  • Parameters

    • source_: any
    • index: number
    • newItem: any

    Returns void

  • Parameters

    • source_: any
    • index: number
    • oldItem: any

    Returns void

  • Called when the control has been resized.

    NotifyResized method Called when the control has been resized.

    this.chart.notifyResized();
    

    Returns void

  • Parameters

    • source_: any
    • index: number
    • oldItem: any
    • newItem: any

    Returns void

  • Parameters

    • ev: Event

    Returns void

  • Parameters

    • command: ToolCommand

    Returns void

  • Called by the UI framework to provide a UI container for rendering this control.

    Parameters

    • container: any
      • The UI container element.

    Returns void

  • Parameters

    • listener: ICommandAvailabilityListener

    Returns void

  • Parameters

    • listener: ICommandStateChangedListener

    Returns void

  • Replays transition-in animation on all series in the chart.

    Returns void

  • Resets the zoom level to default.

    Returns void

  • Performs zoom in action on the chart by specified percentage of current window rect

    Parameters

    • percentage: number

    Returns void

  • Performs zoom out action on the chart by specified percentage of current window rect

    Parameters

    • percentage: number

    Returns void