UNPKG

igniteui-angular-charts

Version:

Ignite UI Angular charting components for building rich data visualizations for modern web apps.

255 lines (254 loc) 9.26 kB
import { IgDataTemplate } from "igniteui-angular-core"; import { MarkerType } from "./MarkerType"; import { MarkerOutlineMode } from "./MarkerOutlineMode"; import { MarkerFillMode } from "./MarkerFillMode"; import { IgxSeriesComponent } from "./igx-series-component"; import { MarkerSeries } from "./MarkerSeries"; import * as i0 from "@angular/core"; /** * Represents the base class for series containing markers. * * MarkerSeries represents the base class for series containing markers. * * Example: * * ```html * <igx-data-chart * [dataSource]="data"> * <igx-category-x-axis * label="label" * #xAxis * > * </igx-category-x-axis> * <igx-numeric-y-axis * minimumValue="0" * #yAxis> * </igx-numeric-y-axis> * <igx-column-series * #series * [xAxis]="xAxis" * [yAxis]="yAxis" * valueMemberPath="value"> * </igx-column-series> * </igx-data-chart> * ``` * * ```ts * let series: IgxMarkerSeriesComponent = new IgxMarkerSeriesComponent(); * series.xAxis = this.xAxis; * series.yAxis = this.yAxis; * series.valueMemberPath = "value"; * this.chart.series.add(series); * ``` */ export declare abstract class IgxMarkerSeriesComponent extends IgxSeriesComponent { /** * @hidden */ get i(): MarkerSeries; constructor(); /** * Returns whether the current series supports visual markers. * * `HasMarkers` property is overriden, it returns whether the current series supports visual markers. You can use it like this: * * ```ts * let gotMarkers: boolean = this.series.hasMarkers; * ``` */ get hasMarkers(): boolean; static ngAcceptInputType_hasMarkers: boolean | string; get hasVisibleMarkers(): boolean; static ngAcceptInputType_hasVisibleMarkers: boolean | string; /** * Gets or sets the marker type for the current series object. * This property is ignored when the MarkerTemplate property is set * * `MarkerType` property gets or sets the marker type for the current series object. For example, you can set it like this: * * ```html * <igx-data-chart * [dataSource]="data"> * <igx-category-x-axis * label="label" * #xAxis> * </igx-category-x-axis> * <igx-numeric-y-axis * #yAxis> * </igx-numeric-y-axis> * <igx-column-series * #series * [xAxis]="xAxis" * [yAxis]="yAxis" * valueMemberPath="value" * markerType = "circle"> * </igx-column-series> * </igx-data-chart> * ``` * * ```ts * this.series.markerType = "circle"; * ``` */ get markerType(): MarkerType; set markerType(v: MarkerType); static ngAcceptInputType_markerType: MarkerType | string; /** * Represents the resolved marker type for the series. */ get actualMarkerType(): MarkerType; set actualMarkerType(v: MarkerType); static ngAcceptInputType_actualMarkerType: MarkerType | string; /** * Gets or sets whether the marker for the current series object should be treated as circular. */ get isCustomMarkerCircular(): boolean; set isCustomMarkerCircular(v: boolean); static ngAcceptInputType_isCustomMarkerCircular: boolean | string; /** * Gets whether the markers for the current series are in circular shape */ get effectiveIsMarkerCircular(): boolean; static ngAcceptInputType_effectiveIsMarkerCircular: boolean | string; /** * Gets or sets whether the marker outline is based on the marker brush of the series rather than the marker outlines collection. */ get markerOutlineMode(): MarkerOutlineMode; set markerOutlineMode(v: MarkerOutlineMode); static ngAcceptInputType_markerOutlineMode: MarkerOutlineMode | string; /** * Gets or sets whether the marker fill is based on the marker outline of the series rather than the marker brushes collection. */ get markerFillMode(): MarkerFillMode; set markerFillMode(v: MarkerFillMode); static ngAcceptInputType_markerFillMode: MarkerFillMode | string; /** * Gets or sets the MarkerTemplate for the current series object. * * `MarkerTemplate` property gets or sets the MarkerTemplate for the current series object. For example, you can use it like this: * * ```html * <igx-data-chart * [dataSource]="data"> * <igx-category-x-axis * label="label" * #xAxis> * </igx-category-x-axis> * <igx-numeric-y-axis #yAxis> * </igx-numeric-y-axis> * <igx-column-series * #series * [xAxis]="xAxis" * [yAxis]="yAxis" * valueMemberPath="value" * markerTemplate="circleMarkerTemplate"> * </igx-column-series> * </igx-data-chart> * ``` */ get markerTemplate(): IgDataTemplate; set markerTemplate(v: IgDataTemplate); /** * Gets or sets thickness of the marker outline */ get markerThickness(): number; set markerThickness(v: number); static ngAcceptInputType_markerThickness: number | string; /** * Gets the effective marker template for the current series object. * * `ActualMarkerTemplate` property gets the effective marker template for the current series object. You can use it like this: * * ```ts * let effectiveMarkerTemplate: IgxDataTemplate = this.series.actualMarkerTemplate; * ``` */ get actualMarkerTemplate(): IgDataTemplate; set actualMarkerTemplate(v: IgDataTemplate); /** * Gets or sets the brush that specifies how the current series object's marker interiors are painted. * * `MarkerBrush` property gets or sets the brush that specifies how the current series object's marker interiors are painted. You can use it like this: * * ```html * <igx-data-chart * [dataSource]="data"> * <igx-category-x-axis * label="label" * #xAxis> * </igx-category-x-axis> * <igx-numeric-y-axis #yAxis> * </igx-numeric-y-axis> * <igx-column-series * #series * [xAxis]="xAxis" * [yAxis]="yAxis" * valueMemberPath="value" * markerBrush = "blue"> * </igx-column-series> * </igx-data-chart> * ``` * * ```ts * this.series.markerBrush = "red"; * ``` */ get markerBrush(): string; set markerBrush(v: string); /** * Gets the effective marker brush for the current series object. * * `ActualMarkerBrush` property gets the effective marker brush for the current series object. For example, you can use it like this: * * ```ts * let effectiveMarkerBrush: string = this.series.actualMarkerBrush; * * ``` */ get actualMarkerBrush(): string; set actualMarkerBrush(v: string); /** * Gets or sets the brush that specifies how the current series object's marker outlines are painted. * * `MarkerOutline` property gets or sets the brush that specifies how the current series object's marker outlines are painted. You can use it like this: * * ```html * <igx-data-chart * [dataSource]="data"> * <igx-category-x-axis * label="label" * #xAxis> * </igx-category-x-axis> * <igx-numeric-y-axis #yAxis> * </igx-numeric-y-axis> * <igx-column-series * #series * [xAxis]="xAxis" * [yAxis]="yAxis" * valueMemberPath="value" * markerOutline = "blue"> * </igx-column-series> * </igx-data-chart> * ``` * * ```ts * this.series.markerOutline = "red"; * ``` */ get markerOutline(): string; set markerOutline(v: string); /** * Gets the effective marker outline for the current series object. * * `ActualMarkerOutline` property gets the effective marker outline for the current series object. You can use it like this: * * ```ts * let effectiveMarkerOutline: string = this.series.actualMarkerOutline; * * ``` */ get actualMarkerOutline(): string; set actualMarkerOutline(v: string); static ɵfac: i0.ɵɵFactoryDeclaration<IgxMarkerSeriesComponent, never>; static ɵcmp: i0.ɵɵComponentDeclaration<IgxMarkerSeriesComponent, "ng-component", never, { "markerType": "markerType"; "actualMarkerType": "actualMarkerType"; "isCustomMarkerCircular": "isCustomMarkerCircular"; "markerOutlineMode": "markerOutlineMode"; "markerFillMode": "markerFillMode"; "markerTemplate": "markerTemplate"; "markerThickness": "markerThickness"; "actualMarkerTemplate": "actualMarkerTemplate"; "markerBrush": "markerBrush"; "actualMarkerBrush": "actualMarkerBrush"; "markerOutline": "markerOutline"; "actualMarkerOutline": "actualMarkerOutline"; }, {}, never, never>; }