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