igniteui-angular-charts
Version:
Ignite UI Angular charting components for building rich data visualizations for modern web apps.
451 lines (448 loc) • 20.7 kB
TypeScript
import { OnDestroy, AfterViewInit, Injector, ComponentFactoryResolver, AfterContentInit, Renderer2, QueryList, NgZone, ViewContainerRef } from '@angular/core';
import { IgxAxisComponent } from './igx-axis-component';
import { IgxSeriesComponent } from './igx-series-component';
import { GridMode } from './GridMode';
import { IgxSeriesViewerComponent } from './igx-series-viewer-component';
import { XamDataChart } from './XamDataChart';
import { IgxSeriesCollection } from './igx-series-collection';
import { IgxAxisCollection } from './igx-axis-collection';
import { ComputedPlotAreaMarginMode } from './ComputedPlotAreaMarginMode';
import { AutoMarginsAndAngleUpdateMode } from './AutoMarginsAndAngleUpdateMode';
import { SeriesPlotAreaMarginHorizontalMode } from './SeriesPlotAreaMarginHorizontalMode';
import { SeriesPlotAreaMarginVerticalMode } from './SeriesPlotAreaMarginVerticalMode';
import * as i0 from "@angular/core";
/**
* Represents a chart area containing axes, series, an optional legend and other hosted content.
*/
export declare class IgxDataChartComponent extends IgxSeriesViewerComponent implements AfterContentInit, AfterViewInit, OnDestroy {
private _renderer;
private _elRef;
private _ngZone;
private _componentFactoryResolver;
private _injector;
contentAxes: QueryList<IgxAxisComponent>;
contentSeries: QueryList<IgxSeriesComponent>;
_dynamicContent: ViewContainerRef;
private _height;
private _width;
set height(value: string);
get height(): string;
set width(value: string);
get width(): string;
/**
* Gets or sets the legend used for the current chart.
*/
get legend(): any;
set legend(v: any);
/**
* The series actually present in the chart. Do not directly modify this array.
* This array's contents can be modified by causing Angular to reproject the child content.
* Or adding and removing series from the manual series collection on the series property.
*/
actualSeries: IgxSeriesComponent[];
/**
* The axes actually present in the chart. Do not directly modify this array.
* This array's contents can be modified by causing Angular to reproject the child content.
* Or adding and removing axes from the manual axes collection on the axes property.
*/
actualAxes: IgxAxisComponent[];
private _container;
private _series;
/**
* A collection or manually added series for the chart.
*/
get series(): IgxSeriesCollection;
private _axes;
/**
* A collection or manually added axes for the chart.
*/
get axes(): IgxAxisCollection;
private _root;
constructor(_renderer: Renderer2, _elRef: ViewContainerRef, _ngZone: NgZone, _componentFactoryResolver: ComponentFactoryResolver, _injector: Injector);
ngOnDestroy(): void;
private _wrapper;
protected createImplementation(): XamDataChart;
private _chart;
private _dataSource;
set dataSource(value: any);
get dataSource(): any;
private _highlightedDataSource;
set highlightedDataSource(value: any);
get highlightedDataSource(): any;
bindData(): void;
bindHighlightedData(): void;
private _axesAdapter;
private _seriesAdapter;
ngAfterContentInit(): void;
ngAfterViewInit(): void;
updateStyle(): void;
private _ensureTooltipCreated;
private _defaultTooltips;
private _ensureDefaultTooltip;
private _onDefaultTooltipsReady;
private createTooltip;
/**
* Gets or sets the channel with which to synchronize.
*
* Synchronization is the coordination of zooming, panning and crosshairs events between multiple charts. Multiple chart controls can be synchronized horizontally (along X-Axis), vertically (along Y-Axis), or both. If you want to synchronize a set of charts, assign them the same name to the `syncChannel` and then specify whether or not synchronize chart horizontally and/or vertically.
*/
get syncChannel(): string;
set syncChannel(v: string);
/**
* Gets or sets the bool used to display the window preview shadow.
*
* Synchronization is the coordination of zooming, panning and crosshairs events between multiple charts. Multiple chart controls can be synchronized horizontally (along X-Axis), vertically (along Y-Axis), or both. If you want to synchronize a set of charts, assign them the same name to the `syncChannel` and then specify whether or not synchronize chart horizontally and/or vertically.
*/
get synchronizeVertically(): boolean;
set synchronizeVertically(v: boolean);
/**
* Gets or sets the bool used to display the window preview shadow.
*
* Synchronization is the coordination of zooming, panning and crosshairs events between multiple charts. Multiple chart controls can be synchronized horizontally (along X-Axis), vertically (along Y-Axis), or both. If you want to synchronize a set of charts, assign them the same name to the `syncChannel` and then specify whether or not synchronize chart horizontally and/or vertically.
*/
get synchronizeHorizontally(): boolean;
set synchronizeHorizontally(v: boolean);
/**
* @hidden
*/
get i(): XamDataChart;
/**
* Gets or sets whether to use a square aspect ratio for the chart. This is locked to true for polar and radial charts.
*
* Set `IsSquare` to true to constrain the chart to a square, using the minimum of its height and width.
*
* ```html
* <igx-data-chart [dataSource]="data"
* isSquare="true"
* width="800px"
* height="400px">
* <igx-category-x-axis #xAxis
* label="label">
* </igx-category-x-axis>
* <igx-numeric-y-axis #yAxis
* majorStroke="green">
* </igx-numeric-y-axis>
*
* <igx-column-series
* [xAxis]="xAxis"
* [yAxis]="yAxis"
* valueMemberPath="value">
* </igx-column-series>
* </igx-data-chart>
* ```
*
* ```ts
* this.chart.isSquare="True";
* ```
*/
get isSquare(): boolean;
set isSquare(v: boolean);
static ngAcceptInputType_isSquare: boolean | string;
/**
* A number between 0 and 1 determining the scale of the horizontal zoom.
* This property is effectively a shortcut to the Width of the WindowRect property.
*
* To programmatically change the horizontal zoom level, set `WindowScaleHorizontal` to a value between 0 and 1.
*
* ```html
* <igx-data-chart [dataSource]="data"
* windowScaleHorizontal="0.75">
* <igx-category-x-axis #xAxis
* label="label">
* </igx-category-x-axis>
* <igx-numeric-y-axis #yAxis>
* </igx-numeric-y-axis>
*
* <igx-column-series
* [xAxis]="xAxis"
* [yAxis]="yAxis"
* valueMemberPath="value">
* </igx-column-series>
* </igx-data-chart>
* ```
*
* ```ts
* this.chart.windowScaleHorizontal="0.75";
* ```
*/
get windowScaleHorizontal(): number;
set windowScaleHorizontal(v: number);
static ngAcceptInputType_windowScaleHorizontal: number | string;
/**
* A number between 0 and 1 determining the scale of the vertical zoom.
* This property is effectively a shortcut to the Height of the WindowRect property.
*
* To programmatically change the vertical zoom level, set `WindowScaleVertical` to a value between 0 and 1.
*
* ```html
* <igx-data-chart [dataSource]="data"
* windowScaleVertical="0.75">
* <igx-category-x-axis #xAxis
* label="label">
* </igx-category-x-axis>
* <igx-numeric-y-axis #yAxis>
* </igx-numeric-y-axis>
*
* <igx-column-series
* [xAxis]="xAxis"
* [yAxis]="yAxis"
* valueMemberPath="value">
* </igx-column-series>
* </igx-data-chart>
* ```
*
* ```ts
* this.chart.windowScaleVertical="0.75";
* ```
*/
get windowScaleVertical(): number;
set windowScaleVertical(v: number);
static ngAcceptInputType_windowScaleVertical: number | string;
/**
* A number between 0 and 1 determining the scale of the horizontal zoom.
* This property is effectively a shortcut to the Width of the ActualWindowRect property.
*/
get actualWindowScaleHorizontal(): number;
set actualWindowScaleHorizontal(v: number);
static ngAcceptInputType_actualWindowScaleHorizontal: number | string;
/**
* A number between 0 and 1 determining the scale of the vertical zoom.
* This property is effectively a shortcut to the Height of the ActualWindowRect property.
*/
get actualWindowScaleVertical(): number;
set actualWindowScaleVertical(v: number);
static ngAcceptInputType_actualWindowScaleVertical: number | string;
/**
* Gets or sets horizontal zoomability of the current control
*
* Set `IsHorizontalZoomEnabled` to enable or disable horizontal zooming.
*
* ```html
* <igx-data-chart [dataSource]="data"
* isHorizontalZoomEnabled="true">
* <igx-category-x-axis #xAxis
* label="label">
* </igx-category-x-axis>
* <igx-numeric-y-axis #yAxis>
* </igx-numeric-y-axis>
*
* <igx-column-series
* [xAxis]="xAxis"
* [yAxis]="yAxis"
* valueMemberPath="value">
* </igx-column-series>
* </igx-data-chart>
* ```
*
* ```ts
* this.chart.IsHorizontalZoomEnabled= true;
* ```
*/
get isHorizontalZoomEnabled(): boolean;
set isHorizontalZoomEnabled(v: boolean);
static ngAcceptInputType_isHorizontalZoomEnabled: boolean | string;
/**
* Gets or sets vertical zoomability of the current control
*
* Set `IsVerticalZoomEnabled` to enable or disable vertical zooming.
*
* ```html
* <igx-data-chart [dataSource]="data"
* isVerticalZoomEnabled="true">
* <igx-category-x-axis #xAxis
* label="label">
* </igx-category-x-axis>
* <igx-numeric-y-axis #yAxis>
* </igx-numeric-y-axis>
*
* <igx-column-series
* [xAxis]="xAxis"
* [yAxis]="yAxis"
* valueMemberPath="value">
* </igx-column-series>
* </igx-data-chart>
* ```
*
* ```ts
* this.chart.isVerticalZoomEnabled="True";
* ```
*/
get isVerticalZoomEnabled(): boolean;
set isVerticalZoomEnabled(v: boolean);
static ngAcceptInputType_isVerticalZoomEnabled: boolean | string;
/**
* Gets or sets how grid lines are rendered in relation to series.
*
* Try setting the `GridMode` property to bring your grid lines in front of the data series.
*
* ```html
* <igx-data-chart [dataSource]="data"
* gridMode="beforeSeries">
* <igx-category-x-axis #xAxis
* label="label">
* </igx-category-x-axis>
* <igx-numeric-y-axis #yAxis
* majorStroke="green">
* </igx-numeric-y-axis>
*
* <igx-column-series
* [xAxis]="xAxis"
* [yAxis]="yAxis"
* valueMemberPath="value">
* </igx-column-series>
* </igx-data-chart>
* ```
*/
get gridMode(): GridMode;
set gridMode(v: GridMode);
static ngAcceptInputType_gridMode: GridMode | string;
/**
* Gets or sets a value indicating whether grid and tick lines are aligned to device pixels.
*/
get alignsGridLinesToPixels(): boolean;
set alignsGridLinesToPixels(v: boolean);
static ngAcceptInputType_alignsGridLinesToPixels: boolean | string;
/**
* Gets or sets the maximum amount the series viewer should auto expand margins to accomodate the initial horizontal axis labels.
*/
get autoExpandMarginMaximumValue(): number;
set autoExpandMarginMaximumValue(v: number);
static ngAcceptInputType_autoExpandMarginMaximumValue: number | string;
/**
* Gets or sets the extra amount the series viewer should auto expand margins to accomodate the initial horizontal axis labels.
*/
get autoExpandMarginExtraPadding(): number;
set autoExpandMarginExtraPadding(v: number);
static ngAcceptInputType_autoExpandMarginExtraPadding: number | string;
/**
* Gets or sets a whether the series viewer should suppress truncation of axis labels.
*/
get shouldSuppressAxisLabelTruncation(): boolean;
set shouldSuppressAxisLabelTruncation(v: boolean);
static ngAcceptInputType_shouldSuppressAxisLabelTruncation: boolean | string;
/**
* Gets or sets a whether the series viewer should auto expand margins to accomodate the initial horizontal axis labels.
*/
get shouldAutoExpandMarginForInitialLabels(): boolean;
set shouldAutoExpandMarginForInitialLabels(v: boolean);
static ngAcceptInputType_shouldAutoExpandMarginForInitialLabels: boolean | string;
/**
* Gets or sets a whether the series viewer should consider auto rotating labels to fit them in the initial view. This implies that ShouldAutoExpandMarginForInitialLabels is true.
*/
get shouldConsiderAutoRotationForInitialLabels(): boolean;
set shouldConsiderAutoRotationForInitialLabels(v: boolean);
static ngAcceptInputType_shouldConsiderAutoRotationForInitialLabels: boolean | string;
/**
* Gets or sets a whether the series viewer should suppress auto recalculating margin and axis label angles.
*/
get suppressAutoMarginAndAngleRecalculation(): boolean;
set suppressAutoMarginAndAngleRecalculation(v: boolean);
static ngAcceptInputType_suppressAutoMarginAndAngleRecalculation: boolean | string;
/**
* Gets or sets a whether the series viewer should consider auto rotating labels to fit them in the initial view. This implies that ShouldAutoExpandMarginForInitialLabels is true.
*/
get autoMarginAndAngleUpdateMode(): AutoMarginsAndAngleUpdateMode;
set autoMarginAndAngleUpdateMode(v: AutoMarginsAndAngleUpdateMode);
static ngAcceptInputType_autoMarginAndAngleUpdateMode: AutoMarginsAndAngleUpdateMode | string;
/**
* Gets or sets the DefaultAxisStroke property.
* The DefaultAxisStroke property defines the brush which is used by the axes when no
* Axis.Stroke is set.
*/
get defaultAxisStroke(): string;
set defaultAxisStroke(v: string);
/**
* Gets or sets the DefaultAxisMajorStroke property.
* The DefaultAxisMajorStroke property defines the brush which is used by the axes when no
* Axis.MajorStroke is set.
*/
get defaultAxisMajorStroke(): string;
set defaultAxisMajorStroke(v: string);
/**
* Gets or sets the DefaultAxisMinorStroke property.
* The DefaultAxisMinorStroke property defines the brush which is used by the axes when no
* Axis.MinorStroke is set.
*/
get defaultAxisMinorStroke(): string;
set defaultAxisMinorStroke(v: string);
/**
* Gets the actual resolved left plot area margin;
*/
get actualPlotAreaMarginLeft(): number;
set actualPlotAreaMarginLeft(v: number);
static ngAcceptInputType_actualPlotAreaMarginLeft: number | string;
/**
* Gets the actual resolved top plot area margin;
*/
get actualPlotAreaMarginTop(): number;
set actualPlotAreaMarginTop(v: number);
static ngAcceptInputType_actualPlotAreaMarginTop: number | string;
/**
* Gets the actual resolved right plot area margin;
*/
get actualPlotAreaMarginRight(): number;
set actualPlotAreaMarginRight(v: number);
static ngAcceptInputType_actualPlotAreaMarginRight: number | string;
/**
* Gets the actual resolved bottom plot area margin;
*/
get actualPlotAreaMarginBottom(): number;
set actualPlotAreaMarginBottom(v: number);
static ngAcceptInputType_actualPlotAreaMarginBottom: number | string;
/**
* Gets or sets mode to use for automatically calculating the plot area margin.
*/
get computedPlotAreaMarginMode(): ComputedPlotAreaMarginMode;
set computedPlotAreaMarginMode(v: ComputedPlotAreaMarginMode);
static ngAcceptInputType_computedPlotAreaMarginMode: ComputedPlotAreaMarginMode | string;
/**
* Gets or sets horizontal mode to use for automatically calculating the plot area margin based ont the series.
*/
get seriesPlotAreaMarginHorizontalMode(): SeriesPlotAreaMarginHorizontalMode;
set seriesPlotAreaMarginHorizontalMode(v: SeriesPlotAreaMarginHorizontalMode);
static ngAcceptInputType_seriesPlotAreaMarginHorizontalMode: SeriesPlotAreaMarginHorizontalMode | string;
/**
* Gets or sets vertical mode to use for automatically calculating the plot area margin based ont the series.
*/
get seriesPlotAreaMarginVerticalMode(): SeriesPlotAreaMarginVerticalMode;
set seriesPlotAreaMarginVerticalMode(v: SeriesPlotAreaMarginVerticalMode);
static ngAcceptInputType_seriesPlotAreaMarginVerticalMode: SeriesPlotAreaMarginVerticalMode | string;
/**
* Margin applied to the left of the plot area.
*/
get plotAreaMarginLeft(): number;
set plotAreaMarginLeft(v: number);
static ngAcceptInputType_plotAreaMarginLeft: number | string;
/**
* Margin applied above the plot area.
*/
get plotAreaMarginTop(): number;
set plotAreaMarginTop(v: number);
static ngAcceptInputType_plotAreaMarginTop: number | string;
/**
* Margin applied to the right of the plot area.
*/
get plotAreaMarginRight(): number;
set plotAreaMarginRight(v: number);
static ngAcceptInputType_plotAreaMarginRight: number | string;
/**
* Margin applied below the plot area.
*/
get plotAreaMarginBottom(): number;
set plotAreaMarginBottom(v: number);
static ngAcceptInputType_plotAreaMarginBottom: number | string;
findByName(name: string): any;
refreshComputedPlotAreaMargin(): void;
recalculateMarginAutoExpansion(): void;
recalculateAutoLabelsAngle(): void;
/**
* Notifies the chart that the CSS styles in effect have been updated.
*/
styleUpdated(): void;
/**
* Export serialized visual data.
*/
exportSerializedVisualData(): string;
static ɵfac: i0.ɵɵFactoryDeclaration<IgxDataChartComponent, never>;
static ɵcmp: i0.ɵɵComponentDeclaration<IgxDataChartComponent, "igx-data-chart", never, { "height": "height"; "width": "width"; "legend": "legend"; "dataSource": "dataSource"; "highlightedDataSource": "highlightedDataSource"; "syncChannel": "syncChannel"; "synchronizeVertically": "synchronizeVertically"; "synchronizeHorizontally": "synchronizeHorizontally"; "isSquare": "isSquare"; "windowScaleHorizontal": "windowScaleHorizontal"; "windowScaleVertical": "windowScaleVertical"; "actualWindowScaleHorizontal": "actualWindowScaleHorizontal"; "actualWindowScaleVertical": "actualWindowScaleVertical"; "isHorizontalZoomEnabled": "isHorizontalZoomEnabled"; "isVerticalZoomEnabled": "isVerticalZoomEnabled"; "gridMode": "gridMode"; "alignsGridLinesToPixels": "alignsGridLinesToPixels"; "autoExpandMarginMaximumValue": "autoExpandMarginMaximumValue"; "autoExpandMarginExtraPadding": "autoExpandMarginExtraPadding"; "shouldSuppressAxisLabelTruncation": "shouldSuppressAxisLabelTruncation"; "shouldAutoExpandMarginForInitialLabels": "shouldAutoExpandMarginForInitialLabels"; "shouldConsiderAutoRotationForInitialLabels": "shouldConsiderAutoRotationForInitialLabels"; "suppressAutoMarginAndAngleRecalculation": "suppressAutoMarginAndAngleRecalculation"; "autoMarginAndAngleUpdateMode": "autoMarginAndAngleUpdateMode"; "defaultAxisStroke": "defaultAxisStroke"; "defaultAxisMajorStroke": "defaultAxisMajorStroke"; "defaultAxisMinorStroke": "defaultAxisMinorStroke"; "actualPlotAreaMarginLeft": "actualPlotAreaMarginLeft"; "actualPlotAreaMarginTop": "actualPlotAreaMarginTop"; "actualPlotAreaMarginRight": "actualPlotAreaMarginRight"; "actualPlotAreaMarginBottom": "actualPlotAreaMarginBottom"; "computedPlotAreaMarginMode": "computedPlotAreaMarginMode"; "seriesPlotAreaMarginHorizontalMode": "seriesPlotAreaMarginHorizontalMode"; "seriesPlotAreaMarginVerticalMode": "seriesPlotAreaMarginVerticalMode"; "plotAreaMarginLeft": "plotAreaMarginLeft"; "plotAreaMarginTop": "plotAreaMarginTop"; "plotAreaMarginRight": "plotAreaMarginRight"; "plotAreaMarginBottom": "plotAreaMarginBottom"; }, {}, ["contentAxes", "contentSeries"], never>;
}